File uploads: front-end → Worker → R2

We will build a tiny page with a file input, send the chosen file to a Worker, store the raw bytes in R2 (object storage = a service for keeping whole files like images and PDFs), record its details in D1 (a SQL database), and then serve the file back by a public URL.

Each layer has one clear job. Keeping bytes (R2) separate from facts about the bytes (D1) is what makes the system easy to query, list, and clean up later.

R2 only stores bytes under a key (key = the unique name/path of an object). To list a user's uploads or show a filename, we keep a small row of metadata in D1 for every object.

CREATE TABLE IF NOT EXISTS files (
  key          TEXT PRIMARY KEY,   -- R2 object key, e.g. uploads/172...-photo.jpg
  filename     TEXT NOT NULL,      -- original name the user picked
  content_type TEXT,               -- MIME type, e.g. image/png
  size_bytes   INTEGER,            -- file size, for quotas and display
  uploaded_at  TEXT NOT NULL       -- ISO timestamp
);

1) Uploading a file

The browser bundles the file into a multipart body (multipart/form-data = the standard way browsers package one or more files plus form fields). The Worker reads it, writes the bytes to R2 with put(), saves a row to D1, and returns a URL the page can link to.

2) Serving a file back

To view a file, the page just requests /files/<key>. The Worker calls get(), copies the stored Content-Type onto the response, and streams the bytes straight to the browser — no copy is loaded fully into memory.

Wrangler is Cloudflare's command-line tool (CLI = a program you type commands into). Make sure you have run npm install -g wrangler and wrangler login first.

1. Create the R2 bucket and D1 database

   Run both creates. Copy the database_id that wrangler prints for the D1 database — you will paste it next.

   bashcontent_copyCopy

   # Bucket that will hold the file bytes
   wrangler r2 bucket create user-uploads
   
   # Database that will hold the metadata (copy the printed database_id)
   wrangler d1 create uploads-meta

2. Add both bindings in wrangler.toml

   A binding gives your code a variable to reach a resource. Here [[r2_buckets]] exposes env.BUCKET and [[d1_databases]] exposes env.DB.

   tomlcontent_copyCopy

   name = "file-uploader"
   main = "src/index.js"
   compatibility_date = "2025-09-23"
   
   # R2 binding -> reachable as env.BUCKET in your Worker
   [[r2_buckets]]
   binding = "BUCKET"
   bucket_name = "user-uploads"
   
   # D1 binding -> reachable as env.DB in your Worker
   [[d1_databases]]
   binding = "DB"
   database_name = "uploads-meta"
   database_id = "paste-the-id-from-wrangler-d1-create"

3. Create the metadata table

   Run the CREATE TABLE against the real (remote) D1 database. You can also save it as schema.sql and use --file=./schema.sql instead.

   bashcontent_copyCopy

   wrangler d1 execute uploads-meta --remote --command "CREATE TABLE IF NOT EXISTS files (key TEXT PRIMARY KEY, filename TEXT NOT NULL, content_type TEXT, size_bytes INTEGER, uploaded_at TEXT NOT NULL);"

4. Front-end: file input + fetch

   FormData tells the browser to build a multipart/form-data body for us, so we never assemble the upload by hand.

   htmlcontent_copyCopy

   <!-- index.html (front-end) -->
   <input type="file" id="file" accept="image/*,.pdf" />
   <button id="send">Upload</button>
   <p id="status"></p>
   
   <script>
     const fileInput = document.getElementById("file");
     const statusEl = document.getElementById("status");
   
     document.getElementById("send").addEventListener("click", async () => {
       const file = fileInput.files[0];
       if (!file) {
         statusEl.textContent = "Pick a file first.";
         return;
       }
   
       // FormData makes the browser send a multipart/form-data body for us
       const form = new FormData();
       form.append("file", file);
   
       statusEl.textContent = "Uploading...";
       const res = await fetch("/upload", { method: "POST", body: form });
       const data = await res.json();
   
       statusEl.innerHTML = `Done! <a href="${data.url}">${data.filename}</a>`;
     });
   </script>

5. Worker: store in R2 + record in D1 + serve

   One handler does both jobs: POST /upload writes to R2 and D1; GET /files/<key> reads from R2 and streams it back.

   jscontent_copyCopy

   export default {
     async fetch(request, env) {
       const url = new URL(request.url);
   
       // 1) UPLOAD: POST /upload  (multipart/form-data)
       if (request.method === "POST" && url.pathname === "/upload") {
         const form = await request.formData();
         const file = form.get("file");
         if (!(file instanceof File)) {
           return Response.json({ error: "No file field" }, { status: 400 });
         }
   
         // Build a unique key so two uploads never collide
         const key = `uploads/${Date.now()}-${crypto.randomUUID()}-${file.name}`;
   
         // Store the raw bytes in R2 (reading them back out is free)
         await env.BUCKET.put(key, file.stream(), {
           httpMetadata: { contentType: file.type },
         });
   
         // Remember the details in D1 (bound params = no SQL injection)
         await env.DB.prepare(
           "INSERT INTO files (key, filename, content_type, size_bytes, uploaded_at) VALUES (?, ?, ?, ?, ?)"
         )
           .bind(key, file.name, file.type, file.size, new Date().toISOString())
           .run();
   
         return Response.json({
           key,
           filename: file.name,
           url: `${url.origin}/files/${encodeURIComponent(key)}`,
         });
       }
   
       // 2) SERVE: GET /files/<key>
       if (request.method === "GET" && url.pathname.startsWith("/files/")) {
         const key = decodeURIComponent(url.pathname.slice("/files/".length));
         const object = await env.BUCKET.get(key);
         if (object === null) {
           return new Response("Not found", { status: 404 });
         }
   
         // Copy the stored content-type etc. onto the response, then stream it
         const headers = new Headers();
         object.writeHttpMetadata(headers);
         headers.set("etag", object.httpEtag);
         return new Response(object.body, { headers });
       }
   
       return new Response("Not found", { status: 404 });
     },
   };

6. Deploy

   Publish the Worker to Cloudflare's global network. Your upload page and /files/ endpoint go live worldwide.

   bashcontent_copyCopy

   wrangler deploy

• Always make keys unique (timestamp + random id) so a new upload never overwrites an old one.
• Validate file size and type on the Worker before put() — never trust the browser alone.
• Store and re-apply Content-Type, or browsers may download files instead of showing them.
• Add CORS headers on /upload if your page is served from a different origin than the Worker.
• Avoid putting the raw user filename directly in the key; encode it or strip unusual characters.