Uploading an Image | Creating a REST API with Node.js

Подписаться 919 тыс.

Просмотров 459 тыс.

50% 1

We're already storing a lot of data on our database but what about files? Let's take a closer look!
Join the full Node.js course: acad.link/nodejs
Check out all our other courses: academind.com/...
----------
Learn Node.js in our comprehensive 30h+ course: acad.link/nodejs
More about Multer: github.com/exp...
Parsing Binary data in Node.js: stackoverflow....
Source Code: github.com/aca...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 662

@tonyvillegas4526 4 года назад

that feeling when you find a video for your problem and it has good English, quality and good explanation gosh!! You guys keep saving the day

@mr-moses-01 3 года назад

You say good English,I say american accent. :D

@nh4843 3 года назад

@@mr-moses-01 I LOVE AMERICAN ACCENT SO MUCH XD

@liluterKA Год назад

Hey guys , I need to add in 11:37 min const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, 'uploads/') }, filename: function(req, file, cb) { cb(null, new Date().toISOString().slice(0,10) + file.originalname); } }); Couse have error with saving files to drive. Windows 10. Great Tutarial again!

@liluterKA Год назад

Actualy it's better to use .replace(/:/g, "-") than slice() like @Cody Uhi above

@unkrass1337 3 года назад

Even so many years later, I found this super helpful. Thank you!

@aliazlanaziz 4 года назад

watching it in 2020 after approx. 3 years of being uploaded, still very helpful

@Kngdmio 4 года назад

YES!

@analuiza2677 3 года назад

I'm watching this January 2021 and the way he codes is still pretty accurate nowadays... it's truly amazing.

@VidTDM_XD 3 года назад

May 2021 and still works

@angelgalvez8684 3 года назад

June 2021 and it's the best

@shahjalalrafi4732 3 года назад

jully 2021 still benefited

@SachinSharma-kk6kn 6 лет назад

use this = > cb(null, Date.now() + file.originalname); instead of cb(null, new Date().toISOString() + file.originalname); to prevent "error": "ENOENT: no such file or directory

@lancerino765 6 лет назад

Thank you for that!

@Sledno1 6 лет назад

Thank you, I had the same error. Why does this happen by the way?

@tuananhao2057 6 лет назад

thank you , i have a same error

@DJArvee 6 лет назад

Hero

@salihcandusmez1731 6 лет назад

thanks

@amaryadav8703 6 лет назад

I love your way of teaching. You don't just dispense information, you trigger curiosity and fulfill it with the knowledge that you provide. You're an excellent teacher Max. I wish all teachers were like you.

@academind 6 лет назад

Thanks again for your absolutely amazing feedback Amar, it honestly means a lot to me to read that!

@johnn4314 5 лет назад

best node teacher. way better than competitors

@shashank_rajak 3 года назад

I have been looking all over the net for this exact solution which is very basic but found nowhere and here you explained it so nicely. Thanks a lot 😊

@menandmice 6 лет назад

A solid effort with much useful material. Uploading files and retrieving them is very important and common thing. Thank you, Max.

@academind 6 лет назад

It really makes me happy to read that you liked the video Mika, thank you for your comment and for your support!

@alibarznji2000 3 года назад

I searched for like 4 hours straight, for the life of me, I did not know why it wasn't working, thank you thank you a million times

@azqqzed7893 4 года назад

even it is old video there still something you can learn from it..I love you so much max

@SARAVANAKUMARPS 6 лет назад

Thanks Max for the beautiful narration of file upload using NODE.js. Standing ovation for you!. you are really great.

@academind 6 лет назад

YOU are great Saravana, thank you very much for your amazing feedback!

@kingsleyakindele5389 2 года назад

This is an amazing video, It has just solved my challenge for about 2 days now. Welldone man

@HazzR8 5 лет назад

Windows users: Use this multer setting to avoid ENOENT: no such file or directory: const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, './uploads/'); }, filename: function(req, file, cb) { const now = new Date().toISOString(); const date = now.replace(/:/g, '-'); cb(null, date + file.originalname); } }); It replaces colons" : " with dashes.

@mostafamegria7903 5 лет назад

Thanks a lot my dear ^^

@undertheradar4645 5 лет назад

You are my hero

@mahmoudbashir6921 4 года назад

best solution u have thanks

@ikechukwuboniface5859 4 года назад

OMG, ...this just solved my problem even after visiting slackoverflow

@ricki2797 4 года назад

thank you for help

@Odidi_Bee6ix 11 месяцев назад

Exquisite content even in 2023

@gauravgaurav6055 2 года назад

Thanks for the last part part and helping me understand how the image path works 🤩

@maazdev9000 2 месяца назад

Superb Tutorial, Such knowledge of File Uploading, File Size Limiting, File Type Uploading confined into a 20 minuites video, bravo Academind Team, Really Great

@jasonpraful 4 года назад

Absolutely loved watching this video - the explanation was spot on and concise. I watch tons of videos on a daily basis and it's very rare I come across something like this with such high quality. Great job and thank you!

@webmats5479 6 лет назад

If anyone is wondering how to delete the image from the server after deleting the product from DB; in the delete route, add the following: const fs = require('fs'); ............................................................... Product.findByIdAndRemove({_id: id}, {select: 'productImage'}).then(feedback => { fs.unlinkSync(feedback.productImage); res.status(202).json({feedback, message: `Product with id ${id} was deleted!` }); }) BTW, Max, impeccable series. Thank you for everything that you do.

@iDevjs 3 года назад

I'm watching this tutorial in 2021 after approx. 4 years of being uploaded, still very helpful) Thank you!

4 года назад

Thanks a lot Max for this tutorial. I was stuck but after sit here and trying to figure out how everything works and, of course, along with your excellent explanation I finally got it. I confess I took around 2 days because I divided the controllers, middlewares, routes in their properly places and also uploaded objects with image, description and title to MongoDB but without you it could take even longer. Again, thanks a ton. You are my hero, bro! :)

@analuiza2677 3 года назад

This is absolutely amazing, the only thing that has more info than this is the complete NodeJS course...

@awaraamin6850 2 года назад

You have always been supper! Where have you come for us!? Great rescuer! Thank you

@devlargs5458 5 лет назад

Thank you so much, Max! Since I am a beginner till now, watching your videos helps me a lot.

@academind 5 лет назад

That's really great to read, thank you for your comment!

@dennis93521 3 года назад

I have been trying this for more than a day and you solved my problems. I love you sooo much

@marcin2x4 3 года назад

This is the best IT tutorial I've seen up to date. Material is alligned with best practices taken from real life experience. You guys rock!

@viral_audios_videos 3 года назад

love u max . i've been struggling to get this for a while. you saved me and my friends who were relied on me to complete my collage project

@qqike 16 дней назад

Thanks for the video! Even if some functions don't work (the course is 6 y.o.), it's possible to handle all problems (I like this approach more: you can learn more by yourself)

@maximos118 5 лет назад

This series is so awesome. You keep mentioning phrases or things I don't know about like "formData" for example. Then I stop, look it up, educate myself about it and then continue with the video. I feel like I'm getting a very comprehensive lesson this way. I could have just smashed through these videos but by doing it this way It's taken me 3 days to get to this point!

@academind 5 лет назад

Happy to read that Maximilian, thank you for your awesome feedback!

@manel6666 4 года назад

for those who have windows, you can use this (new Date().toISOString().replace(/:/g, "-") + "_" + file.originalname) instead of (Date().toISOString() + file.originalname)

@sushyyyyyyyy 4 года назад

thanks manel! it helped!

@therealwalim 3 года назад

Thanks a lot manel!!!!!

@erezta4155 6 лет назад

for windows users with the issue of uploading images with multer, you will have to insert a replace method as follows: filename: function (req, file, cb) { cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname) } it's the colon posing an issue for windows users.

@kasia_dabazant2044 11 месяцев назад

Not every hero wears a cape

@beataj3382 6 лет назад

Merry Christmas, Max. Don't forget about resting and thank you for all you are doing for Us.

@academind 6 лет назад

I'll take a break, no worries - many thanks for your awesome feedback! :)

@sunchitbansal5503 4 года назад

I was stuck on this for the past 12hours, thanks a lot sir! great explanation!

@mehdisalimi5820 2 года назад

Max is always precise and great.

@demyanzavgorodny2003 6 лет назад

I think it would be good idea to refactor a bit by moving all that code to middleware/upload.js Then you can use this middleware for different routes in future And thank you so much for great tutorials)

@Onyecode Год назад

i tried doing this but was having issues, can you paste how you did it

@brilliantphal6646 5 лет назад

The only way to save my GraphQL project with image upload. You saved my life. Thanks.

@yashkharel6525 6 лет назад

Hello! it only work with post man. I wabt to know how to bind with my frontEnd React app?

@janihanninen1805 6 лет назад

Thanks Max this is a great. There are many courses that teach how to use node with mongoose but none of them seem to show how to actually upload images. This is great! If you ever decide to make a fullstack react&node course i will buy it.

@academind 6 лет назад

Thanks a lot for sharing this great feedback Jani, this really means a lot to me! I got not concrete plans to create such a course in the near future but we'll see what the future brings :)

@ericksonteixeira1197 6 лет назад

It was the most explainable video about multer that I've seen eeeever

@academind 6 лет назад

Really happy to read that Erickson, thank you very much for your comment!

@ericksonteixeira1197 5 лет назад

I totally support you If you make some classes with node + sql. And tools like graphql and redis. Or maybe make courses at Udemy. I'm waiting hahaha.

@amjadaliafridi1023 Год назад

i was struggling with this. thank you so much

@jfojw21dfs9 5 лет назад

Can you please do a video on where is best to store media files. Maybe compare MonDB, AWS, etc.

@VikashXman 2 года назад

This is the method I was looking for Thanks

@Kngdmio 4 года назад

Great video! You demystified some things for me!

@olawaseem 3 года назад

For windows usres : if you see the path when post a new product like this: uploads\\yourUploadedFileName.ext , just add: req.file.path.replace(/\\/g, "/") instead of req.file.path in POST request then it will convert for valid url cheers

@bloxzyo 3 года назад

Best tutorial on multer

@Andrey-il8rh 6 лет назад

This part was absolutely golden! Thank you, Max

@academind 6 лет назад

Thanks so much Andrey, so great to read that!

@gaganramgharia2045 Год назад

thanks buddy you saved my life.

@mohamedfouad770 3 года назад

One Of The Best Tutorials I have ever seen in youtube you are awesome Max :)

@anshudixit3241 6 лет назад

hii max, thanku so much for a superb explanation of multer, i am no where found it like this and you make it very simpler

@academind 6 лет назад

Thank YOU Anshu for sharing this, always makes me happy to read when a video was helpful!

@emmanuelteye3723 4 года назад

you are my best programming youtuber

@juanmanuelgentili2152 6 лет назад

You're a genius. I have no words to thank you.

@academind 6 лет назад

Wow, thank you very very much for your amazing feedback Juan, this really means a lot to me!

@saurabhpande7456 3 года назад

Best dev coach

@pasinduekanayaka8023 4 года назад

you can include the whole path in the url if you use the middle-ware like this " app.use('/uploads' , express.static('uploads')); "

@shahidmehboob8862 6 лет назад

You are Angel for us

@JosepCastellsera 6 лет назад

just minor improvement @ 15:40 : { storage } would be equal to assign it like {storage: storage}

@reddevil4169 6 лет назад

he did it so that other people won't get confused -.-

@justdoodleit311 3 года назад

thank you so so much my eyes are on tears...thank you once again

@fatemafakhri786 5 лет назад

req.file comes undefined..any help as i m a new comer to node

@shabbirhusain6634 4 года назад

Was the error solve?

@zeljkokrnjic6287 5 лет назад

great tutorials mate !!!!!! nice and smart coding style. KEEP IT UP MATE!!! just a simple mistake --> filefilter callbackb(null, true) // accepts, not rejects a file

@NganNguyen-hp4rx 5 лет назад

same error :((

@the_pippi 6 лет назад

Thanks, Max!!! I'm brazilian and I learned a lot with yours videos!

@academind 6 лет назад

So awesome to read that Patric, thank you for your comment! Greetings from Germany :)

@michaelwilmouth2552 4 года назад

This guy is a wizard....

@xjdn-34-gdndnk-45-aa 6 лет назад

Just like each chinese production, multer is not fully able to work with Windows directories xD "new Date().toISOString().replace(/:/g, '-')" can helps windows users

@faisaljutt7841 6 лет назад

can you please elaborate this more clearly ? i didn't understand this replace method.

@twojtatatobuka 6 лет назад

@Faisal Jutt In 'const storage' you just can't use 'new Date().toISOString', you should use 'new Date().toISOString().replace(/:/g, '-')'. Otherwise you'll get err.

@matarloum2894 6 лет назад

Thank you man!

@raquelmora3512 6 лет назад

So helpful, I got an error and didn't know why.. Thanks a lot!

@Quit.....529 6 лет назад

I was struggling to find this error when uploading image using multer : { "error": { "message": "ENOENT: no such file or directory, open 'F:\\PROGRAMS2018Tutorial\\RestAPI\ ode-restful-api-tutorial-13-controllers\\uploads\\2018-06-28T16:08:14.675Z12958.png'" } } AND YOUR SOLUTION FIXED IT !!! THANK YOU !!!

@ImranKhan-ft7ns 2 года назад

Can't thank you enough for uploading this video.. This is very helpful

@niyamoljoy4821 4 года назад

" Cannot read property 'path' of undefined ",how can i solve this error

@mina98 4 года назад

did u find the solution plz?

@vynhan5892 4 года назад

@@mina98 I have same error

@tonyto44 4 года назад

Hi ! Same error here but i fixed it ! In "fileFilter" const, change file.mimeType with file.mimetype :-) And everything works after that !

@ruk-e9q 4 года назад

make sure you have this two condition defined (file.mimetype === "image/jpeg" || file.mimetype === "image/png")

@zedzedder1426 4 года назад

@@tonyto44 It worked, thanks! I come from java and if I don't pay attention I type in camelCase...

@richardo8942 4 года назад

Thank you Max. You saved my hours. I am gonna buy all your fullstack courses on Udemy.

@MiladEkramnia Год назад

Great course, great teaching skills! simply wonderful

@Onyecode Год назад

best approach is to create an uploadmiddleware and push the code there export will look like this module.exports = image then in your route you will have const images = (or whatever you want to name it = require("../middleware/imageupload)) router.post('your-route' , images.single())

@reactworld2672 2 года назад

You have own level.

@rebarius 6 лет назад

At the beginning of my NodeJS / MySql Server i handled images with Base64 en-/decrypting and sending it as json, but after i understood multer, it was much more flexible & my Ionic App reacts better with the images 😊 thx for the perfect tutorial here ❤️👌🏼 i learned much more for multer ✌🏼 #MaxMyTeacher

@academind 6 лет назад

Thanks so much for your amazing feedback - I'm glad to hear that the video was helpful Rebar!

@MistaT44 5 лет назад

Thank you very much for this tut. Covered everything with clear and concise explanations. Perfect!

@academind 5 лет назад

Thank YOU for your comment, happy to read that the video was helpful!

@rkhunt007 3 года назад

This is the most helpful video. Thank you.

@makarandpundlik1083 3 года назад

Excellent presentation of skills, saved my entire day, it is good idea to save images on server rather than in db It also saves memory in the dB.

@dtransformtechm4719 5 лет назад

Perfect, saved my day. thank you

@mangayen2 4 года назад

You are insane, perfectly explained, thank you!!

@emmanuelteye3723 4 года назад

@Sachin Sharma you save my day

@shahidmehboob8862 6 лет назад

The way you explain is owsome

@academind 6 лет назад

YOU are awesome Shahid, thanks so much for your great feedback!

@sntoshah 5 лет назад

` destination: function(req, file, cb){ cb(null, './uploads/'); }, filename: function(req, file, cb){ cb(null, file.originalname); }` Why i am getting double slash in respose `"productImage": "uploads\\Chrysanthemum.jpg",` ?

@rossi4303 5 лет назад

You are using Windows. In Windows the slahes in a directory path are \ ,not / like on Linux or Mac. If you are using / they get replaced by \\ so Windows knows how to deal with them.

@arietbegeldinov9433 6 лет назад

This course is awesome thank u for all things that u r doing guys, big big thank from Russia.

@academind 6 лет назад

A big thank you to you Ariet, it's really amazing to receive such a great feedback! Greetings from Germany :)

@sarthaklav4496 6 лет назад

Thanks a ton for the video. I was struggling from last 2 days now got the solution

@academind 6 лет назад

That's really great to read Sarthak, thank you for sharing this!

@sarthaklav4496 6 лет назад

Now I am able to upload a file through postman but still how to retrieve it in ejs

@dominickurt 6 лет назад

Hi, I hope your next serie will be How to create nodejs api with loopback.

@academind 6 лет назад

Thanks for the suggestion Dominic. It probably won't be the next series but I'll add it to my "idea list" and see what I can do

@uziao 6 лет назад

LoopBack is not good? =P

@JanKowalski-kh9nl 5 лет назад

@@uziao no it's not. The basic mechanism of data filtering does not work in the loopback: github.com/strongloop/loopback/issues/517

@tekrak585 2 года назад

thank you so much man ! this is awsome 😍

@sharathtelu1904 4 года назад

Beautifully Explained!

@johnnys.f.5196 2 года назад

Thank yoou, this tutorial helped a lot :')

@realOjive 6 месяцев назад

@12:00 if you're wondering why you get ""ENOENT: no such file or directory, open" its because Date().toISOString uses forbidden Windows character ":" in its filename.

@niccubagonoc2153 6 лет назад

Can you do a tutorial on how you can implement this image upload backend with a React Frontend? I cant seem to get the image upload working using react.

@nomnom9151 4 года назад

I actually just started the FE. my get ALL BE route is different from the 'uploads' static route in his app.js. my plan on the FE with react is to do an axios call to the different route to get all including the route to uploads then do another axios within the first to get the img from the route using the url: uploads/:picName I get back. Ill let you know if I get it working and post a solution if I do.

@nomnom9151 4 года назад

Owie. Brain hurt. So i spent about 6 hours doing it yesterday. The double axios call does work. however the FE tries to stringify the data instead of returning a picture. So it becomes a jumbled mix of random letters and ? marks.Once I figure it out. Next im going to try to change my current table and see if I can make the BLOB be apart of the original table.

@nomnom9151 4 года назад

Omg took me about 30 hours. To realize on the back end. If you concatenate the base url with req.file inside the post where you called multer. It Will store the entire string url. With the /uploads/in-game.jpeg as an extension. Conveniently at the end he showed us the static route. That displays the image with uploads route. I totally forgot you can use a url in the image on frontend. So after about 30 hours it hit me.

@JORDIFUNGULA 4 года назад

@@nomnom9151 can you please explain further, I am stuck on this in react ?

@nomnom9151 4 года назад

@@JORDIFUNGULA pretty much I handled it all on the backend. All I did for the react portion is a get call to get the url string from the backend. For react and html you can use a url for the img src tag. Something like and if that url points to a picture it will display.

@diegoserrano8717 5 лет назад

Such a great tutorial and explanation mate.

@academind 5 лет назад

Thank you Diego :)

@csguru8211 2 года назад

Wow! explained very well. Thanks a lot.

@ПетроБойко-ц3б 6 лет назад

Merry Christmas and many thanks for your videos. Looking forward to JWT. :)

@academind 6 лет назад

Thank YOU and merry Christmas to you! :)

@adedejiibrahim7 3 года назад

Thanks for this!

@artembelyshev9467 4 года назад

Thanks man! You're really great in your videos even across of years )))

@jm302music 5 лет назад

Thanks for the great tutorials, Max! Extremely helpful!

@academind 5 лет назад

Great to read that Joel, thank you for your comment!

@elmesiasyourpapi 6 лет назад

HI Max, do you have an example with nodejs and serverless where you can updates images but save them in S3?

@academind 6 лет назад

No, I got no such example right now. I only got one for Firebase (the Firebase video playlist on this channel).

@rambleroute 5 лет назад

please make a video how to send images from react to server(mongodb) and get back images from server(mongodb) ....

@ghz13 3 года назад

love your content man! this video helped me a lot

@Skaxarrat 6 лет назад

I've tried many (good) Express tutorials but I never found one so deep and this one. Thanks Max, I'm enjoying this course a lot (as well as the Angular and Ionic ones on Udemy I've bought ;) ). P.S: I just saw you've a Python course for Blockchain and Cryptocurrency. I would like to suggest you to make a Python course for Machine Learning applied for websites and/or industries (as how to increase production, suggest products as Amazon does, etc)

@academind 6 лет назад

Thanks for both your amazing feedback and the suggestion! There's definitely more Python content to come in the future :)

@abhishekbutola8294 6 лет назад

Awesome Tutorial. Expecting next tutorial on authentication. Thanks for the Great Job

@academind 6 лет назад

Auth is coming up, no worries! :)

@raghufriend159 4 года назад

Hi Max, can you please make a video, instead of uploading files to a folder, save into gridfs and is there any way to reference the saved file (in gridfs) with the saved record id.