How I Upload Images to CloudFlare R2 in Next.js Server Components (Presigned PUT)
ฝัง
- เผยแพร่เมื่อ 29 พ.ค. 2024
- repoz.io: www.repoz.io
🌎 Follow me here:
Discord: / discord
Twitter: / tomdoes_tech
Facebook: / tomdoestech
Instagram: / tomdoestech
TikTok: / tomdoes_tech
☕ Buy me a coffee: www.buymeacoffee.com/tomn - บันเทิง
Love you man! I was facing issue to connect with client from my node app for an whole day, found solution to my issue in few minutes only. Thank you so much 🙇♂
Thank you Tom for this useful video! 🔥🔥
Could you please consider extending this with a multi file upload with individual progress?
It would be a game changer for me.
Thanks, It would be great to make a tutorial about D1 also.
How to upload files to the aws s3 bucket using lambda functions
Hey, really liked this video. I have one question, What if we need to upload multiple files do we need to create multiple signed urls for that?
Yeah, I think you have to make multiple URLs. I haven't done it to be honest so I'm not sure
Tom: There won't be many tutorials on this channel anymore
Also Tom a few days later: Makes Tutorial*
This isn't really a tutorial. This is the kind of video I'll be making in the future
@@TomDoesTech thats great man 😃
Your font is small...kindly try to enlarge next time...thank you for all you do.
3600 seconds is an hour haha 12:57
I was thinking it was ms
Hi Tom Thanks for such a helpfull video, I'm Facing one issue while accessing the image in FrontEnd using the Token (ReadOnly access)
Here is how I'm call
export const fetchMedia = async (url) => {
const token = "myToken"; // Replace with your actual access token
try {
const response = await axios.get(url, {
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
console.error(
`Failed to fetch media: ${response.status} ${response.statusText}`
);
console.error("Response details:", await response.text());
throw new Error(`Failed to fetch media: ${response.statusText}`);
}
const blob = await response.blob();
const mediaUrl = URL.createObjectURL(blob);
return mediaUrl;
} catch (error) {
console.error("Error fetching media:", error);
return null;
}
};
Why do you need to fetch the image on the frontend? I don't understand