Upload files using NextJS and Digital Ocean Spaces (AWS S3)
Vložit
- čas přidán 7. 09. 2024
- NextJS is a ReactJS framework. Uploading files can be difficult, in this video I will show you how it does not have to be difficult.
We use the AWS S3 SDK to upload to Digital Ocean's Spaces.
LEARN MORE
JOIN our inclusive open source community EddieHub now for FREE ... eddiehub.org, also checkout my website and sign up to our community NEWSLETTER... eddiejaoude.io for my live stream + video schedule and community calls
Also join our community GitHub organisation by creating an issue with the type "invite me to the organisation" :)
I now have a 2nd CZcams channel for short video clips of 60s or less, subscribe ...
/ eddiejaoudetv
SERVICES I USE AND RECOMMEND
Some of these might be affiliate links, no extra cost you to, but I get a little $ if you sign up, plus you might get a discount too
- Live streaming with Streamyard links.eddiejaou...
- Cloud hosting with Digital Ocean, you will get $100 FREE credit links.eddiejaou...
- Membership, Newsletters, CRM all in one with Kartra links.eddiejaou...
- Awesome backup platform, BackBlaze links.eddiejaou...
- Descript for video editing, audiograms and transcription links.eddiejaou...
- Riverside online recording studio for the best quality riverside.fm/?...
COMMUNITY SPONSORS
A BIG thank you to my GitHub Sponsors:
***
Stephen Mount github.com/stem...
DailyDotDev github.com/dai...
***
- Nicholas Carrigan github.com/nhc...
- Santosh Yadav github.com/san...
FIND ME ON OTHER SOCIAL PLATFORMS
Don’t forget to support my channel by subscribing below, it’s free, and also share with your friends. Subscribe now!!
www.youtube.co...
Follow on other socials for behind the scenes footage, join discord to continue the conversation...
eddiejaoude.io
github.com/edd...
/ eddiejaoude
/ eddiejaoude
/ eddiejaoude
/ eddiejaoude
/ discord
github.com/Eddi...
Upload files using NextJS and Digital Ocean Spaces (AWS S3)
$100 FREE credit with Digital Ocean Cloud hosting links.eddiejaoude.io/t/EAaCRWhsnZlF
FYI blur is not a destructive state, I recommend you delete those credentials and redact them in future
oh wow really?!
Bro.... you saved me lol. Going to take pieces of this for a cloudinary upload I have going on.
Thanks a lot. finding a solution was so stressful.
Yes for me also, that is why I was keen to share it! Thank you for the great feedback
Thank you for this short and clean video.
I am a Prime fan from JSF components and loved this. 👌
Thank you Rajaneesh for the support and great feedback!
I am confused... which is real secred key - the one bellow access key in DO website, or one that appears once and should be copied when you regenerate the access key? your secret is longer
But I have a problem: Error SignatureDoesNotMatch: UnknownError - though all the credentials and urls are correct. No specification on what exactly is wrong. I hate it and am really pissed off as fighting it for 3 days and DigitaOcean is not answering a damn question.
Thanks for this great video Eddie. I'm gonna implement it in my project!!!
Thanks Om for the great feedback!
Here to show my supporttttt!!
Thank you Sean! You are always super supportive !!
And as I understand this approach makes double traffic - to your backend and then to DO. The recommended would be with pre-signed url upload.
pre-singned url are really not working in my case
is there a way to directly upload to a subfolder or is the only way to do so manually in the digitalocean dashboard? if you try to put the subfolder in the env file it wont work...
nvm, found out how. You need to put the path in the "key" field...
yes I was just about to say include the path, glad you found it, thank you for sharing the solution
Great video akhi
Thanks for the visit
When you recommend use DigitalOcean spaces or AWS S3 Bucket? you prefer pay a flat price as digitalOcean or pay for the usage like AWS? thanks.
Good question! I think it depends on the service I am using, I found with S3 it is very affordable, however some of their other services seem affordable but then I get a surprise at the end of the money. So I get fixed flat fee is better from muy experience - but with S3 I have never had surprise
Please add a gist of the final code in the description
Sure, I will upload the final project shortly, thank you for the reminder
hey thanks for your video it worked but i change a code a bit and use it on my node.js,
can you tell me if i want to save the files path on database how can i do it?does the function return me a key or path so i can have that on my sql database?
The AWS SDK for JavaScript (v2) will be put into maintenance mode in 2023. Does this have big changes in this tutorial?
Eddie I’m back, gonna do this tutorial asap. Let’s try TS next time bruv
Welcome back! I love TS
Hello, I am trying to use this on my project, is it possible to retrieve this automatically on upload and display it on part of the page? I want to use the uploaded picture as the hero on the next page every time a picture is uploaded.
thanks, great video!
Could you use a similar approach to handle the upload of multiple images?
For the front end, it should be easy, just adding the 'multiple' attribute, but I am struggling a bit at the backend.
Yes for the frontend add 'multiple' and also the array to the name like this
For the backend the files come in as an array already and we select 1, but you will need to loop over the incoming files - this is the only change needed
Thanks a lot for this video. Can you also please create a video on how we can use this uploaded video to stream on our website? Or if it's not possible - can you please explain it here? I am not finding any tutorials on it. Thanks again
Thank you for the great feedback! You can use the public path and the html tag "video" to stream the video on the website
@@eddiejaoude oh was it that simple? Thanks
It always seems simple when we know how, but figuring it out is difficult. I hope it goes ok
@@eddiejaoude Thanks a lot. Just did it and it's working as expected.
@@ashck Great news! thank you for letting me know it worked out well
Great video! What changes are necessary to upload to S3 instead of Digital Ocean Cloud ?
Thank you Alexandre! The only changes would be the environment variables used to configure the S3 SDK
thanks for the Amazing Video, i am just working on a project, i will be uploading videos on Server, so , i am looking forward to buy s3 Spaces from DO, which will cost me $5, now my question is that, if i use 5 gb monthly storage, and then i subscribe to next month $5 fee, the remaining space of last month will be added to the current storage, so will i get more then 250 GIb in my account ? also, if i choose to end up monthly subscription, will my videos be stored there, or will be removed ?
Muito obrigado, meu ajudou bastante.
You are welcome! Thank you for your great feedback!
Hey! can you let me know what extension you're using for automatic code filling thing. For example, here 5:46
Thanks
GitHub Copilot
hey can you I do this with typescript?
Yes you can! Typescript is amazing, it ends up being javascript. You can actually put the javascript straight in your ts files and it will still work
@@eddiejaoude I tried it and I'm getting a 'Presistant file' object rather than file. send help
@@lhrsupun Can you share a link to your repo with the code?
Excellent video! I have a question, how can I get the URL of the video, as an answer?
you set the path of the file, so you have it already, and the url will be of your bucket, you can get it from Digital Ocean or S3. I hope that helps
How would you add a parameter to the form?
Say you have some user data, like id and you would like to send this data together with the files when uploading.
There are multiple ways it can be done
- use the "onUpload" event
or
- don't have the file auto upload and upload after submitting for form so the relevant record exists
How to upload file more than 200mb? because formidable allow file under 200mb only.
Good question, I was not sure either, here is what I found...
The default is 200mb, you can config it to be as big as you want from their docs...
"options.maxFileSize {number} - default 200 * 1024 * 1024 (200mb); limit the size of uploaded file."
www.npmjs.com/package/formidable
@@eddiejaoude Thank you, I will try.
@@coodementor6826 You are welcome :)
Hey there, great video! I have a question on the public files that get created when running “fs.createReadStream”. These get add to the project and would make the project pretty big after heavy use, is it advisable to run some kinda clean up to purge some of these files after theyve been uploading to DO? I’m thinking specifically about a production environment and the best way to handle it there. Thanks!
these should go to a tmp directory by default, so should automatically be cleaned up. But if they don't, after the upload is complete, we could clean it up directly there to avoid the need for additional scripts
@@eddiejaoude How can I see where the tmp directory is created when working on localhost? Is it visible under .next/server folder somewhere. I want to just make sure that the files are getting cleaned up
I ran into an issue that could've been caught more easily with more error catching, e.g.
...
Bucket: process.env.BUCKET_NAME!,
Key: files.demo.originalFilename,
Body: fs.createReadStream(files.demo.filepath),
},
async (err, data) => {
if (err) console.log(err)
else res.status(201).send("File uploaded")
thanks for sharing Adley! Yep error handling is important
Hi Eddie, loved the video. I am new to S3 and not sure how it's even being used here since you are using spaces. I was expecting at some point in the video for u to go to aws and create a bucket but I guess the space is the equivalent of that bucket. how does S3 come into play here?
yes S3 is the same as Digital Ocean's Space - the code is the same for both
The following code is not written in AWS SDK 3.
Yes it is, the same aws sdk is used, for example AWS.S3{}), I don't think you watch the whole video czcams.com/video/HmHOTW2lNV8/video.htmlsi=StP2H0L7WqtSq_mz&t=404
does this approach work on a next.js app hosted in Vercel? (still would connect to DO spaces)
yes you should be able to setup the permissions to be accessible both other hosting providers like Vercel
did u just use aws s3 client to upload to digital ocean?
Yep I did 👍 Digital Ocean Spaces supports the AWS S3 SDK
Thanks for the Video
I am developing a learning management System, i have decided to go with Digital Ocean Spaces, the packages are good, but i have a scenario, which I want answers for
lets say, I have purchased a plan of 250 GB per month, if it exceeds the limit the Digital Will charge me, now consider a scenario when in a month I only consume a Space of 10 GB, and my Space is still remaining, will it be a addon to my next month, or the space, will be same as per package in the next month, and also, if i want to end up my subscription, my Videos are going to be removed from there
It is best to contact their support for their full terms and conditions
Hey, wanted to ask what will be the S3 URL using AWS not digital ocean?
I think a url might not be required, but others it will be provided when setting up the S3 bucket on AWS
I think it should be old. It is 3rd version for aws now.
yes this video was made years ago
would be nice to have a new one, and with custom uploading. Also with methods to debug the signature, for example. As I am fighting the 3rd day with the error - an no tutorial and even documentation is not helping@@eddiejaoude
@ I will add it to my content list to create an updated version
I could not make a straight upload work. So now I am trying presighning@@eddiejaoude
You got a thumbs down for using s3 was in the title of the video and using Digital Ocean instead.
The SDK is the same, you can use DO or AWS with the same code