Cloudflare Developers•2w ago

Save Files Generated in Pages App

I'm writing a Blazor app that I will eventually host in Cloudflare pages. I'll be generating files and I don't want to lose those files. I'll be generating and appending to a mdb file and log text files. Is there a concept of persistent storage or something similar to kubernetes volumes? R2 seems to be what I'm looking for, but I don't see a way to link it to pages and generated files.

1 Reply

anand248•2w ago

after writing the file to bucket I generated a url and saved it in my DB That URL endpoint points to my own hono endpoint GET request, which downlods the file from R2, and returns to browser, Some indicative code

const uploadLogo = async (c: Context, logo: File): Promise<string> => {
  const fileName = `${c.var.user.id}-${Date.now()}.${logo.name.split('.').pop()}`;
  const r2 = c.env.ORG_BUCKET;
  await r2.put(fileName, await logo.arrayBuffer());
  return `${c.env.BASE_URL}/user/organization/file/${fileName}`;
};

const uploadLogo = async (c: Context, logo: File): Promise<string> => {
  const fileName = `${c.var.user.id}-${Date.now()}.${logo.name.split('.').pop()}`;
  const r2 = c.env.ORG_BUCKET;
  await r2.put(fileName, await logo.arrayBuffer());
  return `${c.env.BASE_URL}/user/organization/file/${fileName}`;
};

And GET endpoint code where the above url points to

import { createRoute } from "honox/factory";

import { HTTPException } from "hono/http-exception";

// Gets the id of the file from url parameters, then fetches the file from R2 and streams it to the client
export default createRoute(async (c) => {
  const id = c.req.param("id");
  const r2 = c.env.ORG_BUCKET;
  const file = await r2.get(id);

  if (!file) {
    throw new HTTPException(404, { message: 'File not found' });
  }

  const headers = new Headers();
  file.writeHttpMetadata(headers);
  headers.set("etag", file.httpEtag);

  // Set the appropriate content type
  headers.set("Content-Type", file.httpMetadata?.contentType ?? "application/octet-stream");

  // Stream the file body
  return new Response(file.body, {
    headers: headers,
    status: 200
  });
});

import { createRoute } from "honox/factory";

import { HTTPException } from "hono/http-exception";

// Gets the id of the file from url parameters, then fetches the file from R2 and streams it to the client
export default createRoute(async (c) => {
  const id = c.req.param("id");
  const r2 = c.env.ORG_BUCKET;
  const file = await r2.get(id);

  if (!file) {
    throw new HTTPException(404, { message: 'File not found' });
  }

  const headers = new Headers();
  file.writeHttpMetadata(headers);
  headers.set("etag", file.httpEtag);

  // Set the appropriate content type
  headers.set("Content-Type", file.httpMetadata?.contentType ?? "application/octet-stream");

  // Stream the file body
  return new Response(file.body, {
    headers: headers,
    status: 200
  });
});

Gaming

Programming

Save Files Generated in Pages App