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
ZeeshanOP3mo 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
Cyb3r-Jak32mo ago
How are you testing? If it local then you won't see the results in the R2 dashboard
Zeeshan
ZeeshanOP2mo ago
i'm testing locally and also by running a local build and then previewing it using wrangler pages dev command.
Cyb3r-Jak3
Cyb3r-Jak32mo ago
What do you see under your .wrangler/state in the project? That is where resources will go with local mode
Zeeshan
ZeeshanOP2mo ago
its empty
No description
Zeeshan
ZeeshanOP2mo ago
i initially got it upload images to r2. it worked, but then i'm wondering what changes to break it.
Zeeshan
ZeeshanOP2mo ago
i deleted the r2 bucket, and created again using wrangler cli. still same. when i try to access an image, i get 404
No description
Zeeshan
ZeeshanOP2mo ago
this is the setup
No description
Cyb3r-Jak3
Cyb3r-Jak32mo ago
Have you deployed a version of your project? That is the only way you will see items show in the dashboard
Zeeshan
ZeeshanOP2mo 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
Cyb3r-Jak32mo ago
Yeah it should be able to
Want results from more Discord servers?
Add your server