MERN Stack Image Upload Tutorial - GridFS Bucket and Material UI Dropzone
Vložit
- čas přidán 27. 07. 2024
- An image upload system for MERN Stack: MongoDB, Node/Express, and React. Upgraded to use the gridFS bucket system. We run through how to set up the express routes and database logic on the backend, then build two inputs for the frontend in react, one with SCSS and one with the material-ui-dropzone package. Lastly, we look at the beginning of how this might be implemented in a social media application and talk about some ideas for projects you could use this in. This kind of upload and download system will work for audio, video, pdfs, etc, so put your imagination to work.
Starter code: github.com/ThomasFoydel/mern-...
Resource files: github.com/ThomasFoydel/MERN-...
Final code: github.com/ThomasFoydel/MERN-...
0:00 Intro and Demo
0:45 Purpose and Expectations
1:24 GridFS and the Packages We Use
2:28 Starter Code and Setup
4:25 Image Routes
11:25 Frontend: Regular Version
21:52 Frontend: Material UI Version
29:52 On Progress Events
30:52 Social Media Integration Example
35:06 Social Media Example Two
36:48 Wrap Up and Other Ideas
If you aren't familiar with MERN stack I recommended these resources to get started:
• Learn The MERN Stack
• Build a Project with G...
• How To Build A Markdow...
• Learn the MERN Stack -...
Great work on the tutorial! I'm modifying this to accept video files, how can I add the appropriate file extensions when downloading?
I'm not exactly sure, you might want to save the file type as a property on the document saved to the database and then read it from the document in mongodb when a user sends in a request for a file
@@SingleWingAcademyI was able to figure it out! I just needed to res.set() the Content-Type to match the file's mimetype, and set Content-Disposition to the original name. Along with your main guide, it works perfectly now!
@@vinct1234 Thats awesome! Thank you for sharing this info! I will pin this so others can learn from your findings as well
The most discriptive and easy to watch video ever
I'll have to rewatch this several times, this kind of tutorials are very rare, loys of stuff are included here.
Loved it and Subed 🎉
Great tutorial, appreciate your efforts!
Thank you so much. This video helped me a lot to understand the concept correctly. Keep it up ♥️🔥
Thank's brother. Keep it up❤️🔥
thanx for the video, helped me a lot with my current project.
Nice Tutorial!!!
Exactly what I need!!
great tutorial !!! I love it ...
Thank you so much for watching, have an awesome day!
This is dope
good vid ty
Shouldn't the mongoose connection have been done only once? You have done it in both index.js and image.js
It ultimately doesn't really matter, it will work either way. In a production app you would most likely do the connection in one place and export it, and then import it into your other files to use it, but I didn't bother in this case because I was trying to make the gridfs stuff as clear as possible. Thank you for inquiring, this is a good thing to note.
So when you upload an image, you dont pass the image path to your api?
Why would we check for file size inside route if we already checked it in the middleware?
Great question. It's to demonstrate that you can set smaller file size limits on specific routes individually if you want them to be smaller than whatever you set for your absolute maximum file size allowed in the multer middleware. Thank you for watching and happy coding!
Great tutorial. Can you help me figure out how can I add image compression in this using 'Sharp'?
Hey thanks for watching! I haven't used Sharp before so I'm not sure how it is used or how to integrate it with this app. This video may be of use to you czcams.com/video/MdjqacsMn8s/video.html
@@SingleWingAcademy Thanks.