Cloudflare Developers•2mo ago

How to get R2 to work with Astro?

I want to use CF R2 in Astro + CF Pages project, I have setup the domain and made the bucket public. But when i try to make a put into R2, it doesn't do anything. Am i doing anything wrong? is there a way to debug this? I'm using Astro's actions here

export const products = {
  create: defineAction({
    accept: "form",
    input: z.object({
      name: z.string(),
      description: z.string(),
      category: z.string(),
      amount: z.number(),
      image: z.instanceof(File).optional(),
    }),
    handler: async ({ name, description, category, amount, image }, ctx) => {
      try {
        // call to api to create product with the form inputs, and return `product_id`

        let imageUrl = null;
        if (image && image.size > 0) {
          const fileExtension = image.name.split(".").pop();
          const fileName = `${product_id}.${fileExtension}`;
          await ctx.locals.runtime.env.CB_BUCKET.put(fileName, image);
          imageUrl = `https://example.com/${fileName}`;
          console.log("Image uploaded:", imageUrl);
        }

        return {
          success: true,
          message: "Product added successfully",
          id: product_id,
        };
      } catch (error: unknown) {
        console.error("Error adding a product", error);
        const errorMessage =
          error instanceof Error ? error.message : "An unknown error occurred";
        return {
          success: false,
          message: `Failed to add product: ${errorMessage}`,
        };
      }
    },
  }),
};

export const products = {
  create: defineAction({
    accept: "form",
    input: z.object({
      name: z.string(),
      description: z.string(),
      category: z.string(),
      amount: z.number(),
      image: z.instanceof(File).optional(),
    }),
    handler: async ({ name, description, category, amount, image }, ctx) => {
      try {
        // call to api to create product with the form inputs, and return `product_id`

        let imageUrl = null;
        if (image && image.size > 0) {
          const fileExtension = image.name.split(".").pop();
          const fileName = `${product_id}.${fileExtension}`;
          await ctx.locals.runtime.env.CB_BUCKET.put(fileName, image);
          imageUrl = `https://example.com/${fileName}`;
          console.log("Image uploaded:", imageUrl);
        }

        return {
          success: true,
          message: "Product added successfully",
          id: product_id,
        };
      } catch (error: unknown) {
        console.error("Error adding a product", error);
        const errorMessage =
          error instanceof Error ? error.message : "An unknown error occurred";
        return {
          success: false,
          message: `Failed to add product: ${errorMessage}`,
        };
      }
    },
  }),
};

When i console log the env, I'm getting all cf related env's logged. the code runs and prints all the logs. I don't see any errors coming. Is there a way to debug R2? It worked at some point and then it didnt work. I guess it has something to do with env

Docs

Actions

Learn how to create type-safe server functions you can call from anywhere.

11 Replies

Zeeshan•2mo ago

this is how my wrangler.toml looks like

# wrangler.toml
name = "admin"
compatibility_date = "2024-09-09"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat_v2"]


[[r2_buckets]]
binding = "CB_BUCKET"
bucket_name = "cherry-blossom"

# wrangler.toml
name = "admin"
compatibility_date = "2024-09-09"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat_v2"]


[[r2_buckets]]
binding = "CB_BUCKET"
bucket_name = "cherry-blossom"

Cyb3r-Jak3•2mo ago

How are you testing? If it local then you won't see the results in the R2 dashboard

Zeeshan•2mo ago

i'm testing locally and also by running a local build and then previewing it using wrangler pages dev command.

Cyb3r-Jak3•2mo ago

What do you see under your .wrangler/state in the project? That is where resources will go with local mode

Zeeshan•2mo ago

its empty

Zeeshan•2mo ago

i initially got it upload images to r2. it worked, but then i'm wondering what changes to break it.

Zeeshan•5w ago

i deleted the r2 bucket, and created again using wrangler cli. still same. when i try to access an image, i get 404

Zeeshan•5w ago

this is the setup

Cyb3r-Jak3•5w ago

Have you deployed a version of your project? That is the only way you will see items show in the dashboard

Zeeshan•5w ago

no, let me deploy and test. i can do R2.get, R2.list etc in local and get results. so i asssumed R2.put can also be performed in local.

Cyb3r-Jak3•5w ago

Yeah it should be able to

Gaming

Programming

How to get R2 to work with Astro?