Upload a File or Multiple Files to a Node.js Express Server | JavaScript Tutorial

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

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

50% 1

👉 Source code: openjavascript...
‍🎓 NEW: Earn a professional certificate in web development from Meta Inc. (course links in card below) 👇
⚡ Need hosting for a website, WordPress blog or Node.js app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to upload one or multiple files and form data to a Node.js Express server using the Multer npm package.
#nodejs #upload #multer #express #forms #files #nodejstutorial #api #webdevelopment
⚡Web development professional certificates from Meta Inc.⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...

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

3 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@OpenJavaScript Год назад

Thanks for watching! 👉 Source code: openjavascript.info/2023/01/09/handle-a-file-upload-in-node-js-and-express-with-multer/

@krunked4949 9 месяцев назад

So so so glad I found this video!

@Filaxsan 5 месяцев назад

Maan! Best tutorial on the subject, hands down! 💪 Thanks a lot for making this, keep it up!

@rinkuv37 5 месяцев назад

wow amazing tutorial ever seen about multer thank you ♥

@byronkenoly Год назад

you are the best lad. Thanks!

@ddlesch88 Год назад

Thanks so much you saved my behind on a project i am busy with...

@clownmeat792 Год назад

This video should be top of the list. I have tried busboy, and multiparty BUT THIS IS THE SOLUTION. THANK YOU DONT EVER TAKE IT DOWN

@RAKESHR-tf2pf 5 месяцев назад

very helpful thank you bro

@hosseinbakhshian9602 Год назад

simple and useful thnaks

@mohammadkhalafIraqi Год назад

simple and useful thnaks

@Noritoshi-r8m 8 месяцев назад

Do you have a video showing how to open the images from the folder to the browser?

@ehcualquiera1377 3 месяца назад

How to be perseverant? What property to insert into the database? Just with the implementation of the API, is persistence already generated or does something have to be hosted in the database?

@stan-beats Год назад

thanks a lot

@davidlwatsonjr 7 месяцев назад

Wait, you can drag and drop into paint?!? 🤯

@haiderjaafer8164 Год назад

Great work keep going… how can direct upload files into specific folder in computer

@OpenJavaScript Год назад

Thanks! For that, you just need to include the path as the value for the destination property, e.g. C:\Users\OpenJavaScript\Desktop\New-Folder When constructing it, it may help you to use: __dirname // current path of Node file

@haiderjaafer8164 Год назад

@@OpenJavaScript I want it in button when click on button it take me specific folder… can you make example thank

@OpenJavaScript Год назад

@@haiderjaafer8164 I'm not sure I understand. Here the upload is being made after the submit button is clicked. If you mean go into a folder from the frontend immediately, unfortunately that's not possile if the file is on the server.

@traezeeofor 9 месяцев назад

This tutorial is confusing for me. You could have started from step 1, showing what is needed and where everything is, then start putting it all together. Uploading project data (starting and ending) on Github makes the viewer sure he has all starting files correctly.

@paulhetherington3854 4 месяца назад

And he, be not, in any -- required Win ADMN?

@metaltank2540 Год назад

best content ever, YOU ARE A GOD FOR ME

@OpenJavaScript Год назад

Thank you for this VERY high praise!

@wejesuss-1104 Год назад

What would be the approach to receive e send files without depending on multer?

@kehan6252 Год назад

Do you know how I can rename using the 'fn' and 'ln' values? For example, fn='Joe' and ln='Doe', the file will be sent to the node.js server and saved as 'JoeDoe.png'.

@trongnhanle7658 Год назад

how about upload pdf file or doc file ?

@OpenJavaScript Год назад

You don't have to make any adjustment for these types of files. As long as it is possible for the user to select it in HTML (the file input element attribute 'accept' does not restrict it) then it can be attached to and uploaded as part of a FormData object. This is one of the nice things about a FormData object: different types of file data can be attached without having to configure it. It will be received on the backend as type 'multipart/form-data' and can be parsed in this way with Multer.

@fartasmouad4334 Год назад

i have problem of page refreshing even if i use preventdefault

@OpenJavaScript Год назад

Not sure without seeing your code, but I posted the source code for this tutorial to the following link, might help you to copy and compare to what you have: openjavascript.info/2023/01/09/handle-a-file-upload-in-node-js-and-express-with-multer/

@fartasmouad4334 Год назад

Yes thank you so much for replying me i find out that problem wasn't in code but in VS code live server thank you so much That video helped me a lot

@OpenJavaScript Год назад

@@fartasmouad4334 OK, good to hear you found the source of the issue!

@Tim28259 Год назад

source code is broken

@danser_theplayer01 Год назад

What's the point of uploading something on a node.js server if it's local? It's not going to hide anything, it's completely open to the user and therefore can't be a real back end. What am I understanding wrong?

@OpenJavaScript Год назад

You are right, there is not a great deal of point only doing this locally. I'm doing it locally for testing purposes but if deployed on a web server this would protect the files. I don't know if it is useful to you, but I covered deploying a Node app to shared hosting here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-emDCYo5Rz0E.html

@danser_theplayer01 Год назад

@@OpenJavaScript It sure is.

@scotly_emi Год назад

How can we implement it into react so that we can upload files to our server and database

@scotly_emi Год назад

Also how can we use different like saying inputs for images and video maybe 3 inputs for images and one separate input for video, currently working on a movie site and I'm new to react, so I have screenshots, thumbnail, characters, and video with different inputs

@OpenJavaScript Год назад

There are a few different steps, first the uploading of files in React, receiving them in Node.js and then the posting of the files to the database on the backend. Here's a video covering each of these processes: Uploading files in React: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ijx0Uqlo3NA.html Receiving file/s in Node.js: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TZvMLWFVVhE.html Posting file to a MySQL database: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xwfeik3bPpw.html If you have any questions, let me know in the comments section, I'll do my best to respond.

@OpenJavaScript Год назад

As covered in the uploading in React video posted above, you can do this by sending a FormData object with multiple files appended to it. They can be of different types.

@scotly_emi Год назад

Can the inputs be separated

@OpenJavaScript Год назад

@@scotly_emi Yes, in this case you can create multiple file inputs in HTML and use a loop to append each one a user selects to a FormData object. Then upload in the way described in the videos.

@paulhetherington3854 4 месяца назад

HTML -- simulated video -- game! U don't notice -- the static: - English - Spanish Hindoo! I.e. meta -- muslim -- he be! Sc -- South Carolina -- statute of -- "Cat Burgler!" Attacked -- KUIMAKA BZ' -- i.e. named it: "Burger King!" You role play -- "King and Queen - gay!"