No video
Storing S3 Bucket Image URLs in MongoDB using Multer, NodeJS
Рет қаралды 29,193
Күн бұрын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
@marmikpatel8387 2 жыл бұрын
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!
@aviraltiwari6649 3 жыл бұрын
I'm your 100th Subscriber! Congratulations and thank you for this amazing series.
@frontendinterviewpro 3 жыл бұрын
Thankyou so much!
@mohammedriyaz7623 2 жыл бұрын
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 :-)
@frontendinterviewpro 2 жыл бұрын
Thankyou!!
@unclebigbay 3 жыл бұрын
this is the best resource I've found on this concept. thanks for sharing
@frontendinterviewpro 3 жыл бұрын
Thankyou so much!
@fmgdoom8246 3 жыл бұрын
Great video. Was really waiting for this!
@frontendinterviewpro 3 жыл бұрын
Thankyou
@jean_damascene 2 жыл бұрын
Great video man, keep it going!
@md.rakibulislam8096 Жыл бұрын
Great tutorial and quality content.
@heiwa7591 3 жыл бұрын
Perfect timing thank you Manish Boro!
@frontendinterviewpro 3 жыл бұрын
Thankyou!!
@adventurerswithsanket 3 жыл бұрын
Very much helpful. Thanks a lot.
@ekanshkumarkumar91 3 жыл бұрын
your content is amazing... great work and video 👍
@frontendinterviewpro 3 жыл бұрын
Thankyou
@orangekitty5192 2 жыл бұрын
Thanks bro this really helped!
@sezif3157 2 жыл бұрын
Thank you bro, you made it easy for me!! :)
@frontendinterviewpro 2 жыл бұрын
I am glad that it helped you!!
@leehj0110 2 жыл бұрын
Thank you for this video.👍👍
@frontendinterviewpro 2 жыл бұрын
thankyou so much!!
@lemonyth 6 ай бұрын
thank you for the vid,
@ThangNguyen-se3ve 2 жыл бұрын
useful video!, thank you very much bro
@frontendinterviewpro 2 жыл бұрын
Thankyou so much!
@n_ah5505 3 жыл бұрын
Finally.... 🙏
@KevinNeel-kl6tq 2 жыл бұрын
helped a lot thanks
@frontendinterviewpro 2 жыл бұрын
Thankyou!!
@raba650 Жыл бұрын
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?
@dhanorkarnirav 10 күн бұрын
Wonderful video
@frontendinterviewpro Күн бұрын
Many thanks
@adad8795 2 жыл бұрын
Awesome
@saivarun2502 2 жыл бұрын
thank you
@muhammadshaheer9475 3 жыл бұрын
please use postman for backend only Over all these 3 video's really helpful for me
@abdullahnaseem7518 2 жыл бұрын
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
@istiakjaman7564 2 жыл бұрын
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?
@swaraj_ballal8612 7 ай бұрын
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 ?
@xyz_only_10x 2 жыл бұрын
great content brother.....Are you from assam?
@frontendinterviewpro 2 жыл бұрын
Yes I am from Assam
@sandeepkumar-of4wy Жыл бұрын
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?
@imranhussain5715 2 жыл бұрын
how to view image on browser without download the image from aws s3
@user-xl9kn5tn8e Жыл бұрын
I Am goind to Uplload my pics on aws s3 now
@coderslime Жыл бұрын
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?
@iamdhison 2 жыл бұрын
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.
@frontendinterviewpro 2 жыл бұрын
Hi Dhiraj, I think the cropper code is not supported in those browsers. Will have to look into it for further information.
@idrisisholaagboola8676 3 жыл бұрын
perfect tutorial, but you need to teach us how to delete files as well
@frontendinterviewpro 3 жыл бұрын
Sure. I'll try to make a video showing how to delete files as well.
@kushagrarathore5209 3 жыл бұрын
Bro how to delete file using node js from s3 bucket
@frontendinterviewpro 3 жыл бұрын
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.
@surajchanda7992 Жыл бұрын
Please make videos about servless node
@Believer01 2 жыл бұрын
Do we need pay for amazon S3 or free version also there?
@frontendinterviewpro 2 жыл бұрын
The pricing depends upon the size of the data that is stored.
@n_ah5505 3 жыл бұрын
Bro make some more videos on creative MERN & AWS project... (Don't create simple project like todo) Thank you...
@frontendinterviewpro 3 жыл бұрын
I'll try bro.
@mkjigoro4200 2 жыл бұрын
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 ) 😉
@frontendinterviewpro 2 жыл бұрын
You can pass different bucketnames to the "upload" function to upload images and audio to separate buckets.
@tamilbloggers4700 2 жыл бұрын
bro how to store image url to mysql instead of mongo? can you help me please
@frontendinterviewpro 2 жыл бұрын
its almost the same. you'll just have to use a different library for database operations.
@DJSahilAIM 2 жыл бұрын
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?
@frontendinterviewpro 2 жыл бұрын
You can connect with me via LinkedIn
@shaziasamreen8584 2 жыл бұрын
Very helpful tutorial..Can we have some way to just open the file in browser without downloading
@frontendinterviewpro 2 жыл бұрын
when you upload the files to S3 using multer, set contentType in order to be able to view the file in the browser
@tamilbloggers4700 2 жыл бұрын
bro what happen if we delete some files on aws s3? is it get updated on mongodb?
@frontendinterviewpro 2 жыл бұрын
no bro! it will not get updated.
@tamilbloggers4700 2 жыл бұрын
@@frontendinterviewpro bro how to store image url to mysql instead of mongo? can you help me please
@raghupathym2258 2 жыл бұрын
Is it possible to upload multiple files using this code?
@frontendinterviewpro 2 жыл бұрын
Nope, its not possible. You'll have to change the multer config to accept multiple files.
@raghupathym2258 2 жыл бұрын
@@frontendinterviewpro is that code available
@frontendinterviewpro 2 жыл бұрын
@@raghupathym2258 you can check the multer documentation.
@celestialarjun4769 3 жыл бұрын
2nd comment
@achintachoudhury1361 3 жыл бұрын
first comment
@MonkeyDLuffy-ki4ws 3 жыл бұрын
third comment
@siddhantkumar8432 Жыл бұрын
Sikh k naukri dhundu?💩
Sanjeev Thiyagarajan
Рет қаралды 46 М.
Lama Dev
Рет қаралды 694 М.
Frontend Interview Pro
Рет қаралды 8 М.
The Full Stack Junkie
Рет қаралды 99 М.