Zip File Hosting

Upload a zip file containing your HTML, CSS, and JavaScript files to host them.

\n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n \n // Serve uploaded files\n if (path.startsWith(\"/view/\")) {\n const parts = path.split(\"/\").filter(Boolean);\n \n if (parts.length < 2) {\n return new Response(\"Invalid path\", { status: 400 });\n }\n \n const uploadId = parts[1];\n \n // If no specific file is requested, try to serve index.html or show directory listing\n if (parts.length === 2) {\n try {\n // Check if this upload exists\n const meta = await blob.getJSON(`${uploadId}/_meta`);\n \n if (!meta) {\n return new Response(\"Upload not found\", { status: 404 });\n }\n \n // If there's an index file, serve it directly instead of redirecting\n if (meta.indexFile) {\n console.log(`Serving index file directly: ${meta.indexFile}`);\n const indexFileKey = `${uploadId}/${meta.indexFile}`;\n \n try {\n // Get the index file content\n console.log(`Retrieving index file: ${indexFileKey}`);\n const indexContent = await blob.get(indexFileKey);\n \n console.log(`Index content type: ${typeof indexContent}, is Response: ${indexContent instanceof Response}`);\n \n if (indexContent === null) {\n return new Response(`Index file not found: ${meta.indexFile}`, { status: 404 });\n }\n \n // Determine content type (should be HTML)\n const contentType = getContentType(meta.indexFile);\n \n // Check if indexContent is already a Response object\n if (indexContent instanceof Response) {\n console.log(\"Index content is already a Response object, extracting content...\");\n try {\n // For binary files, we need to use arrayBuffer() instead of text()\n if (isBinaryFile(meta.indexFile)) {\n const buffer = await indexContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n // For text files, use text()\n const text = await indexContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n // Serve the index file directly\n return new Response(indexContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // Add caching for better performance\n \"Access-Control-Allow-Origin\": \"*\", // Allow cross-origin requests\n \"X-Content-Type-Options\": \"nosniff\" // Prevent MIME type sniffing\n }\n });\n } catch (error) {\n console.error(`Error serving index file ${indexFileKey}:`, error);\n return new Response(`Error retrieving index file: ${error.message}`, { status: 500 });\n }\n }\n \n // Otherwise show a directory listing\n const fileList = await blob.getJSON(`${uploadId}/_index`);\n \n const htmlContent = `\n \n \n \n \n \n Files in ${uploadId}\n \n \n \n

Files in Upload ${uploadId}

Upload time: ${new Date(meta.uploadTime).toLocaleString()}

Total files: ${meta.fileCount}

\n \n

${file}

\n \n \n `;\n \n return new Response(htmlContent, {\n headers: { \n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-cache\", // Don't cache directory listings\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n } catch (error) {\n console.error(\"Error serving directory:\", error);\n return new Response(`Error retrieving files: ${error.message}`, { status: 500 });\n }\n }\n \n // Serve a specific file\n const filePath = parts.slice(2).join(\"/\");\n \n // Log the requested file path for debugging\n console.log(`Requested file path: ${filePath}`);\n \n // Check if the path contains encoded characters\n const hasEncodedChars = filePath !== decodeURIComponent(filePath);\n console.log(`Path has encoded characters: ${hasEncodedChars}`);\n \n const fileKey = `${uploadId}/${filePath}`;\n \n try {\n console.log(`Attempting to serve file: ${fileKey}`);\n \n // Get the file from blob storage\n const fileContent = await blob.get(fileKey);\n \n console.log(`File content type: ${typeof fileContent}, is Response: ${fileContent instanceof Response}`);\n \n if (fileContent === null) {\n console.log(`File not found: ${fileKey}`);\n \n // Try with URL decoded path\n const decodedPath = decodeURIComponent(filePath);\n if (decodedPath !== filePath) {\n console.log(`Trying with decoded path: ${decodedPath}`);\n const decodedFileKey = `${uploadId}/${decodedPath}`;\n const decodedFileContent = await blob.get(decodedFileKey);\n \n if (decodedFileContent !== null) {\n console.log(`Found file with decoded path: ${decodedFileKey}`);\n const contentType = getContentType(decodedPath);\n \n // Check if decodedFileContent is a Response object\n if (decodedFileContent instanceof Response) {\n try {\n if (isBinaryFile(decodedPath)) {\n const buffer = await decodedFileContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n const text = await decodedFileContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n return new Response(decodedFileContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n }\n \n return new Response(`File not found: ${filePath}`, { status: 404 });\n }\n \n // Determine content type\n const contentType = getContentType(filePath);\n console.log(`Serving file ${filePath} with content type: ${contentType}`);\n \n // Check if fileContent is already a Response object\n if (fileContent instanceof Response) {\n console.log(\"File content is already a Response object, extracting content...\");\n try {\n // For binary files, we need to use arrayBuffer() instead of text()\n if (isBinaryFile(filePath)) {\n const buffer = await fileContent.arrayBuffer();\n return new Response(buffer, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n } else {\n // For text files, use text()\n const text = await fileContent.text();\n return new Response(text, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"X-Content-Type-Options\": \"nosniff\"\n }\n });\n }\n } catch (error) {\n console.error(`Error extracting content from Response: ${error}`);\n return new Response(`Error processing file: ${error.message}`, { status: 500 });\n }\n }\n \n // Serve the file with proper content type\n return new Response(fileContent, {\n headers: { \n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // Add caching for better performance\n \"Access-Control-Allow-Origin\": \"*\", // Allow cross-origin requests\n \"X-Content-Type-Options\": \"nosniff\" // Prevent MIME type sniffing\n }\n });\n } catch (error) {\n console.error(`Error serving file ${fileKey}:`, error);\n return new Response(`Error retrieving file: ${error.message}`, { status: 500 });\n }\n }\n \n // Handle unknown paths\n return new Response(`Not found: ${path}`, { status: 404 });\n }\n \n // Handle unsupported methods\n return new Response(`Method not allowed: ${req.method}`, { status: 405 });\n}",[],[171],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":184,"_99":185,"_161":176,"_163":186,"_164":22,"_165":-5,"_166":187,"_98":188},"a5439a26-3921-11f0-ad14-9e149126039e","r2-upload-test.ts","db98b8f6-38de-11f0-a95c-9e149126039e",["D",1748147711778],19,"import { S3Client, PutObjectCommand } from \"https://esm.sh/@aws-sdk/client-s3@3.454.0\";\n\n// Cloudflare R2 configuration\n// You'll need to set these environment variables in Val Town:\n// - R2_ACCOUNT_ID: Your Cloudflare account ID\n// - R2_ACCESS_KEY_ID: Your R2 access key ID \n// - R2_SECRET_ACCESS_KEY: Your R2 secret access key\n// - R2_BUCKET_NAME: Your R2 bucket name\n\nconst R2_ACCOUNT_ID = Deno.env.get('R2_ACCOUNT_ID');\nconst R2_ACCESS_KEY_ID = Deno.env.get('R2_ACCESS_KEY_ID');\nconst R2_SECRET_ACCESS_KEY = Deno.env.get('R2_SECRET_ACCESS_KEY');\nconst R2_BUCKET_NAME = Deno.env.get('R2_BUCKET_NAME');\n\n// Create S3 client configured for Cloudflare R2\nconst s3Client = new S3Client({\n region: 'auto',\n endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,\n credentials: {\n accessKeyId: R2_ACCESS_KEY_ID!,\n secretAccessKey: R2_SECRET_ACCESS_KEY!,\n },\n forcePathStyle: false, // Use virtual-hosted-style URLs\n});\n\n// Simple Hello World HTML content\nconst helloWorldHTML = `\n\n\n \n \n Hello World - R2 Test\n \n\n\n

🌍 Hello World!

This page is served from Cloudflare R2

Successfully uploaded via Val Town

\n Uploaded: ${new Date().toISOString()}\n

\n\n`;\n\n// Helper function to create HTML responses\nfunction createHtmlResponse(title: string, content: string, status: number = 200): Response {\n const html = `\n\n\n \n \n ${title}\n \n\n\n

🚀 R2 Upload Service

\n ${content}\n

\n\n`;\n \n return new Response(html, {\n status,\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nexport default async function(req: Request): Promise {\n try {\n // First, let's just check what environment variables we have\n const envCheck = {\n R2_ACCOUNT_ID: R2_ACCOUNT_ID ? 'SET' : 'MISSING',\n R2_ACCESS_KEY_ID: R2_ACCESS_KEY_ID ? 'SET' : 'MISSING', \n R2_SECRET_ACCESS_KEY: R2_SECRET_ACCESS_KEY ? 'SET' : 'MISSING',\n R2_BUCKET_NAME: R2_BUCKET_NAME || 'MISSING'\n };\n\n // Check if required environment variables are set\n if (!R2_ACCOUNT_ID || !R2_ACCESS_KEY_ID || !R2_SECRET_ACCESS_KEY || !R2_BUCKET_NAME) {\n const missingVars = [];\n if (!R2_ACCOUNT_ID) missingVars.push('R2_ACCOUNT_ID');\n if (!R2_ACCESS_KEY_ID) missingVars.push('R2_ACCESS_KEY_ID');\n if (!R2_SECRET_ACCESS_KEY) missingVars.push('R2_SECRET_ACCESS_KEY');\n if (!R2_BUCKET_NAME) missingVars.push('R2_BUCKET_NAME');\n\n const content = `\n

❌ Missing Environment Variables

The following environment variables need to be set in Val Town:

• ${v}

Environment Status:

${key}: ${value}

Please configure these environment variables in your Val Town settings to use the R2 upload service.

\n `;\n \n return createHtmlResponse(\"Configuration Error\", content, 400);\n }\n\n // Check if upload is requested\n const url = new URL(req.url);\n const shouldUpload = url.searchParams.get('upload') === 'true';\n const testCredentials = url.searchParams.get('test') === 'true';\n \n if (testCredentials) {\n // Test credentials by attempting to list bucket contents\n try {\n const { ListObjectsV2Command } = await import(\"https://esm.sh/@aws-sdk/client-s3@3.454.0\");\n const listCommand = new ListObjectsV2Command({\n Bucket: R2_BUCKET_NAME,\n MaxKeys: 1\n });\n \n const listResult = await s3Client.send(listCommand);\n \n const content = `\n

✅ Credentials Valid!

Successfully connected to R2 bucket \"${R2_BUCKET_NAME}\"

\n \n

Connection Test Results:

Bucket Access: ✅ Success
Objects Found: ${listResult.Contents?.length || 0}
Bucket Name: ${R2_BUCKET_NAME}
Account ID: ${R2_ACCOUNT_ID}

\n \n

🚀 Ready to Upload

\n Upload Test File\n ← Back to Main\n

\n `;\n \n return createHtmlResponse(\"Credentials Test - Success\", content);\n \n } catch (testError) {\n const content = `\n

❌ Credentials Test Failed

Error: ${testError.message}

\n \n

Error Details:

Error Type: ${testError.name}
Error Code: ${testError.code || 'unknown'}
HTTP Status: ${testError.$metadata?.httpStatusCode || 'unknown'}

\n \n

🔧 Common Issues:

Invalid Access Key: Check R2_ACCESS_KEY_ID
Invalid Secret: Check R2_SECRET_ACCESS_KEY
Wrong Account ID: Check R2_ACCOUNT_ID
Bucket doesn't exist: Check R2_BUCKET_NAME
Insufficient permissions: Ensure API token has R2 read/write permissions

\n ← Back to Main\n

\n `;\n \n return createHtmlResponse(\"Credentials Test - Failed\", content, 400);\n }\n }\n \n if (!shouldUpload) {\n const content = `\n

✅ Environment Configured

All required environment variables are set and ready for R2 uploads.

Environment Status:

${key}: ${value}

Endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

🧪 Test & Upload

Ready to test R2 upload functionality.

\n 🔍 Test Credentials First\n 🚀 Upload Test File\n

\n `;\n \n return createHtmlResponse(\"R2 Upload Ready\", content);\n }\n\n // Attempt upload\n console.log('R2 Configuration:', {\n accountId: R2_ACCOUNT_ID ? 'SET' : 'MISSING',\n accessKeyId: R2_ACCESS_KEY_ID ? 'SET' : 'MISSING',\n secretAccessKey: R2_SECRET_ACCESS_KEY ? 'SET' : 'MISSING',\n bucketName: R2_BUCKET_NAME ? R2_BUCKET_NAME : 'MISSING',\n endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`\n });\n\n // Upload the HTML file to R2\n const uploadCommand = new PutObjectCommand({\n Bucket: R2_BUCKET_NAME,\n Key: 'index.html',\n Body: helloWorldHTML,\n ContentType: 'text/html',\n CacheControl: 'public, max-age=3600',\n });\n\n console.log('Attempting upload to R2...');\n const result = await s3Client.send(uploadCommand);\n console.log('Upload successful:', result);\n \n // Use custom domain for clean, reliable URLs\n const customDomainUrl = `https://ziphost.chadparker.com/index.html`;\n \n // Backup URLs in case custom domain isn't working\n const backupUrls = [\n `https://${R2_BUCKET_NAME}.${R2_ACCOUNT_ID}.r2.cloudflarestorage.com/index.html`,\n `https://pub-${R2_ACCOUNT_ID}.r2.dev/index.html`,\n `https://${R2_BUCKET_NAME}.r2.dev/index.html`,\n ];\n \n const content = `\n

🎉 Upload Successful!

Hello World index.html has been uploaded successfully to R2!

\n \n

Upload Details:

Bucket: ${R2_BUCKET_NAME}
File: index.html
ETag: ${result.ETag}
Content-Type: text/html
Cache-Control: public, max-age=3600

\n \n

🌐 Deployed File

Your file has been deployed and is accessible at your custom domain:

\n 🔗 View at ziphost.chadparker.com\n \n

🔧 Backup URLs (if custom domain has issues)

\n ${backupUrls.map((url, index) => `\n

\n Backup ${index + 1}:
\n 🔗 ${url}\n

\n `).join('')}\n

\n \n

🔧 Debugging Information

Custom Domain: ziphost.chadparker.com

Account ID: ${R2_ACCOUNT_ID}

Bucket Name: ${R2_BUCKET_NAME}

Upload Endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

File Key: index.html

\n \n

🔄 Upload Another File

\n ← Back to Upload Service\n

\n `;\n \n return createHtmlResponse(\"Upload Complete\", content);\n\n } catch (error) {\n console.error(\"Error uploading to R2:\", error);\n \n // Get more detailed error information\n const errorDetails = {\n message: error.message,\n name: error.name,\n code: error.code || 'unknown',\n statusCode: error.$metadata?.httpStatusCode,\n requestId: error.$metadata?.requestId,\n };\n \n const content = `\n

❌ Upload Failed

Error: ${error.message}

\n \n

Error Details:

Error Type: ${error.name}
Error Code: ${error.code || 'unknown'}
HTTP Status: ${errorDetails.statusCode}
Request ID: ${errorDetails.requestId}

\n \n

🔧 Troubleshooting

Check credentials: Verify R2_ACCESS_KEY_ID and R2_SECRET_ACCESS_KEY are correct
Check account ID: Verify R2_ACCOUNT_ID matches your Cloudflare account
Check bucket: Verify R2_BUCKET_NAME exists and you have write permissions
Check permissions: Ensure your R2 API token has the necessary permissions
Current endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com

\n \n

\n ← Back to Upload Service\n

\n `;\n \n return createHtmlResponse(\"Upload Error\", content, 500);\n }\n}",[],[182],"files",[148,169,180],"counts",{"_193":32,"_194":160,"_195":32,"_196":197},"pulls","branches","forks","envVars",{"_198":199,"_200":32},"count",4,"emptyCount","contents",[203,206,209],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":204,"_99":160,"_161":162,"_163":72,"_164":22,"_165":-5,"_98":205},["D",1748113224956],[150],{"_102":170,"_95":171,"_151":172,"_153":-5,"_154":136,"_155":173,"_157":158,"_104":207,"_99":175,"_161":176,"_163":177,"_164":22,"_165":-5,"_98":208},["D",1747885601168],[171],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":135,"_157":158,"_104":210,"_99":185,"_161":176,"_163":186,"_164":22,"_165":-5,"_98":211},["D",1748147711778],[182],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":221,"_196":226},{"_102":103,"_95":96,"_104":222,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":223,"_130":224,"_133":225,"_145":22},["D",1747883539166],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[227,233,236,240],{"_228":229,"_104":230,"_231":-5,"_110":72,"_232":22},"key","R2_SECRET_ACCESS_KEY",["D",1748125698166],"updatedAt","isEmpty",{"_228":234,"_104":235,"_231":-5,"_110":72,"_232":22},"R2_ACCESS_KEY_ID",["D",1748125662439],{"_228":237,"_104":238,"_231":239,"_110":72,"_232":22},"R2_ACCOUNT_ID",["D",1748125558841],["D",1748127650602],{"_228":241,"_104":242,"_231":243,"_110":244,"_232":22},"R2_BUCKET_NAME",["D",1748120841935],["D",1748120858484],"zip-host","actionData","errors"]

chadparker

r2

Environment variables