Storing S3 Bucket Image URLs in MongoDB using Multer, NodeJS
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Learn to setup an AWS S3 bucket, generate API keys to access the bucket, using multer to upload images to S3, storing the returned URL in a database like MongoDB and sending a response consisting the URL back to the client.
In the very last two videos we made the frontend, setup our backend server and connected to MongoDB.
This is the last video of the series and here we will basically setup our S3 bucket, generate API keys, use libraries like aws-sdk, multer, multer-S3 to upload the cropped / edited image (that we receive from our frontend) to our S3 bucket. We will also store the returned S3 URL in MongoDB which we then send back to the client and use it to display the uploaded image as an avatar.
------------------
Timestamps -
0:00 Intro
1:10 Installing multer, multer-S3 and aws-sdk
2:13 Setting up S3 bucket and generating API keys
4:45 Storing API keys as environment variables
6:15 Connecting to S3 bucket
7:45 Using multer to upload files to S3
15:30 Generating unique filenames using timestamps
17:35 Creating MongoDB collection Schema
18:49 Storing the image URL in MongoDB collection
20:39 Making S3 bucket public
22:35 Sending image URL as response back to client
23:10 Setting the image URL as our Avatar
23:20 Make a Spinner appear when uploading image
27:10 Conclusion
------------------
⚪ Part 1 ➡ • (#1 Frontend) Profile ...
⚪ Part 2 ➡ • (#2 Backend) Profile I...
⚪ Starter Files ➡ github.com/manishboro/image-c...
⚪ Final Files ➡ github.com/manishboro/image-c...
⚪ Crop, Zoom and Download images in React ➡ • Crop, Zoom and Downloa...
------------------
Follow me -
⚪ Instagram ➡ / manish_boro
⚪ LinkedIn ➡ / manish-boro-692b16198
------------------
My PC Specifications -
⚪ Graphic Card ➡ GALAX RTX 2060 amzn.to/3hmSsCZ
⚪ RAM ➡ HyperX Fury 8GB 3200MHz * 2 amzn.to/3k3Pc17
⚪ Processor ➡ Ryzen 5 3600 amzn.to/2FkQzd0
⚪ CPU Cooler ➡ CoolerMaster H410R amzn.to/3hql7rb
⚪ Motherboard ➡ MSI B450 Tomahawk Max amzn.to/2Fq10f6
amzn.to/3NZRChL
** All the above mentioned links are affiliate links **
#webdevelopment #programming #coding #nextjstutorial #reactjs #multer - วิทยาศาสตร์และเทคโนโลยี
![อยู่ได้แล้ว - LIPTA feat. Mirrr [OFFICIAL MV]](http://i.ytimg.com/vi/-9-hpntNym4/mqdefault.jpg)
Great tutorial--covered a niche subject, demonstrated work for all aspects of the app (MERN + aws), provided a github repo link, included timestamps, and went at an appropriate pace! Thanks!
I'm your 100th Subscriber! Congratulations and thank you for this amazing series.
Thankyou so much!
this is the best resource I've found on this concept. thanks for sharing
Thankyou so much!
Great video. Was really waiting for this!
Thankyou
Perfect timing thank you Manish Boro!
Thankyou!!
Great Man. Thank you so much. I am new to AWS and learned lot of new stuff by the help of your video. Thanks Again :-)
Thankyou!!
Great tutorial and quality content.
Very much helpful. Thanks a lot.
Great video man, keep it going!
your content is amazing... great work and video 👍
Thankyou
Thanks bro this really helped!
Thank you bro, you made it easy for me!! :)
I am glad that it helped you!!
thank you for the vid,
Thank you for this video.👍👍
thankyou so much!!
useful video!, thank you very much bro
Thankyou so much!
Wonderful video
Many thanks
helped a lot thanks
Thankyou!!
thank you
If I want to add some image compression logic on the backend before storing it in s3 , where would be a good place to write that logic?
Awesome
Finally.... 🙏
please use postman for backend only
Over all these 3 video's really helpful for me
it was a great video the only doubt i have is if the s3 bucket is set public that means anyone can see the url for s3 bucket and access the bucket wouldn't this be a security issue ?
hi @Manish Boro please let me know how to use upload.single in middleware because i cant get more form data if i use inside controller i can only access req.files inside upload.single function cant access req.body
I'm getting this error: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1
what should I do to fix this?
I do not have any debit or credit cards. What should I do now? Amazon AWS account demands a valid card number to create. What can I do instead?
Is it safe to make your bucket public as it will be availble for public
i have created a mern app and i dont want my data to be shared,So what do you suggest?
perfect tutorial, but you need to teach us how to delete files as well
Sure. I'll try to make a video showing how to delete files as well.
great content brother.....Are you from assam?
Yes I am from Assam
Great content, could you please help I am struggling to upload two files from two separate inputs, to be stored to two buckets (images and audio
)
😉
You can pass different bucketnames to the "upload" function to upload images and audio to separate buckets.
Hi Manish, I have successfully implemented react easy crop watching your video and uploading to Azure blob container. But, the problem I am facing is it works absolutely fine on desktop browsers but not on mobile browsers. When I upload and crop image from mobile browswe eg. chrome or safari, I get completely black image stored in azure blob. Please help.
Hi Dhiraj, I think the cropper code is not supported in those browsers. Will have to look into it for further information.
Very helpful tutorial..Can we have some way to just open the file in browser without downloading
when you upload the files to S3 using multer, set contentType in order to be able to view the file in the browser
I Am goind to Uplload my pics on aws s3 now
Bro how to delete file using node js from s3 bucket
Bro , I have never tried deleting files from S3 bucket using NodeJS so I am not sure about it. Maybe you can try finding some answers on stack overflow.
how to view image on browser without download the image from aws s3
Do we need pay for amazon S3 or free version also there?
The pricing depends upon the size of the data that is stored.
Please make videos about servless node
You're good, I wonder you still working on the web and I have some work with you. is there any way I can contact you?
You can connect with me via LinkedIn
Bro make some more videos on creative MERN & AWS project...
(Don't create simple project like todo)
Thank you...
I'll try bro.
bro how to store image url to mysql instead of mongo? can you help me please
its almost the same. you'll just have to use a different library for database operations.
bro what happen if we delete some files on aws s3? is it get updated on mongodb?
no bro! it will not get updated.
@@frontendinterviewpro bro how to store image url to mysql instead of mongo? can you help me please
Is it possible to upload multiple files using this code?
Nope, its not possible. You'll have to change the multer config to accept multiple files.
@@frontendinterviewpro is that code available
@@raghupathym2258 you can check the multer documentation.
2nd comment
first comment
third comment
Sikh k naukri dhundu?💩