In this tutorial, you will learn how you can upload all types of files to a Node.js REST API server. We'll create several different reusable middlewares for Node.js & Express and we'll learn how to use one HTML input to upload multiple files at the same time. If you are just getting started with Node.js, I recommend my Node.js for Beginners full course found here: ruclips.net/video/f2EqECiTBL8/видео.html
You're welcome! I struggle with perfectionism. The reminder at the end of each video is for me as much as everyone else - keep striving for progress (not perfection). A little bit every day :)
This video is simply amazing!! Especially for a beginner coder with about a week of learning. You are so precise and so thorough in explaining each separate section of coding logic in the building of each file and it’s related files. Simply Amazing 🎉
What a great video!! 🏆 Well explained, well done! After busting my brain with the issue of file upload in Node for so long, I was so happy to encouter this video. Thanks.
Hey Dave, Great Course, I've completed ReactJS and JavaScript playlists too from you. Your explanations are crystal clear and to the point. Thanks for the great quality content Dave. Have a great day.
Dave your teaching approach is really amazing, you're one of the best teacher i've ever had in my life. thank you for sharing such a valuable contents.
Hi Dave, Just now I have completed the video and tried it - its working well. Of course, it took some time for me to understand the concepts. But overall, really interesting - you did not use even axios or any other extras. Especially you have taken additional efforts to show the error messages without any grammatical issues and you have used middleware for validating the files are amazing. You did a great job and its very useful for the users. Thank you so much for your effort.
This glued me to a screen till the last seconds. Thanks Dave. I’ll definitely like to see React at the front end interacting with this api. Also, How to handle uploading such files to a mongodb or cloudnary service? After sometime. Meaning save temporarily to the save then move the files to cloudnary and store image url returned. BTW, thanks, you’re such a blessing to us learners
I just want to say thank you for sharing your knowledge .... I was here looking for a way to show progress of your file upload while it's uploading but this was still nice to watch as always you explain topics in a very clear way that anyone can understand!
Hey Dave, it would be great if you could make a react frontend form to upload xlsx files (or any other file) like in this video with backend. By the way your react, javascript, node js, css, tailwind courses are top notch, understood all the concepts.
This is a nice application of using middleware, thank you! I think the grammar thing was actually good since it gives the user a very human-like and easy to read feedback. I have a suggestion for refactoring. In the file size and file extension middlewares it is easier to get the sizes and extensions with a filter applied to the Object.values array. In fact, we don't need the keys as far as I can tell, and the loop can be replaced by the filter Array method.
i very much enjoyed following along and will be applying my new knowledge to my personal projects. Thank you for this excellent content, Dave. P.S. It would be excellent if you could do this using react. I believe you mentioned to let you know in the video.
Happy to see the return of vanilla JS 💪😁 (I don't know why but I always like to get the most out of native tools) anyway, we may use for-of loop to shrink this code Object.keys(files).foreach(key => { files[key].something }) to this: for(let file of files){ file.something } Thanks Dave
Thanks Ahmad! Yes, complete preference for choice there. Sometimes I use Object.keys() and sometimes for...of. I should probably consistently choose one only 😃
@@DaveGrayTeachesCode I use the first thing comes to my mind and can't be consistent even on the same project 🤦♂ anyway, I enjoy finding alternatives it keeps my brain active (if any 😁)
Dave, I want to add my compliments to the many you already have! Your instructions are crystal clear and allowed me to implement your solution into my project with very few updates as changing the repository path for uploaded files and saving the metadata to my database. I just want to ask you if you have a tutorial on retrieving the files from the server to allow users to open their files. Thank you very much!
Thank you for the kind words! I do not have a tutorial specific to downloading files. However, after learning about Node.js with Express, you should be able to implement the response.download method documented here: expressjs.com/en/5x/api.html#res.download
If you would make a react video on it, then please do try to make little change to backend code as well for duplicate name files. We should try to name incoming files something different so they may not get overwritten
thank you, this is great , perfect timing, I just happen to need this for my current project. Can you not use axios for this or did you just choose fetch randomly for this example? Can you possibly point me in the right direction on what I would need to research if I wanted to implement a crop photo option before upload or maybe it would be after? It would be to use the image for a profile photo but allow the client to crop it so the most important part of the image is displayed in the bubble.
If allowing the client to crop, I would look for a client-side solution - maybe on npmjs.com. I just used fetch, but you could use Axios or other API layer options.
This is a great tutorial, And therefore I'm a new subscriber :) Thank you, Dave! Having said that, you've mentioned few times along the video that you might share of the client side code for uploading files with React as well. Did you end up doing so? And if not, will you, please?
Best video in yt I have ever seen. Can u please make a separate video about Multer middleware stored in database like SQL, noSQL with MVC pattern? your video is far better then Udemy paid course. Appreciate your hard work 🙏
Hey Dave, awesome tutorial , can you please tell me how I can change the path of saved files meaning if I want to save somewhere else and divide them into different folders like image files separated from doc files.
In that case, you would need to look at the file extension and create the save path based on that information. Notice how I used path.join() to create the paths. If you aren't too familiar with Node.js, starting with my Node.js course would really help out: ruclips.net/video/f2EqECiTBL8/видео.html
Hi Dave Grey for the next video i would like you to cretae a video that show the way to generate report to PDF and Excel when the user send a request to backend (Express). this content will be very useful for many people (that include me :) )
Thanks for the tutorial! Btw what extension or setting are you using for highlighting syntax? I noticed that in your editor the opening and closing brackets are connected with a line (not just highlighted) which would be awesome.
Last I looked into creating an accurate progress bar, fetch did not support it - but the older XMLHttpRequest did. There may be some npm packages that make it easier. I created a progress bar for image upload in this tutorial: ruclips.net/video/jEjo9UytpIc/видео.html
@@DaveGrayTeachesCode Yes, thank you. I modified the sendFiles function a little bit, ... const sendFiles_xhr = async() => { //Object const myFiles = document.getElementById('myFiles').files //all files user selected const formData = new FormData() //Bind file data to the form Object.keys(myFiles).forEach(key =>{ formData.append(myFiles.item(key).name, myFiles.item(key)) }) //Send to backend alternative var xhr = new XMLHttpRequest(); xhr.open('post','localhost:3000/upload',true); xhr.upload.onprogress = (e) => { if(e.lengthComputable) { var percentage = (e.loaded / e.total) * 100.0; console.log("Progress in %", percentage.toFixed(0)) } } xhr.onerror = (e) => { console.error("Error! No response from server. This may caused by a network error.") } xhr.onload = () => { console.log('XMLHttpRequest transaction completes successfully'); } xhr.onreadystatechange = function() { // Call a function when the state changes. console.log("Ready with status", this.status," ", this.responseText); if(this.responseText.length==0) { console.log("No Response text!") return; }
Thanks Dave, love your tutorial! I was trying to use an external script for the javascript but it's not working even after using the same code. What might be the issue?
I have no idea. I did not use an external script in this tutorial. I do not know anything about the script you are trying to use, and I cannot see your code. No way I could know the answer. Consider joining my Discord where you can share your code and myself and others can answer questions: discord.gg/neKghyefqh
Note: so when you send one file, then req.files.inputname is a single object. When you send two files from one input, then the form sends as an array of objects. So the .mv function must handle that potential difference as I noticed you didn't. Just a heads up for those who wish to consume the files differently to check each req.files.inputname to determine it's an array or a single object
Thanks Dave what an amazing tutorial 👏 Appreciate if you can extend the tutorial to cover converting images to base64 string type and then save it to database Thanks again.
You're welcome and that's a great request! In the meantime, this tutorial has some of what you are asking for - the base64 part: ruclips.net/video/jEjo9UytpIc/видео.html
This is some cool asynchronous upload handling script. Creating formdata object and passing into fetch with await wrapped into async function and then taking resolve in json format with optional chaining. That’s really cool, but why express-fileupload and not Multer as an middleware?
Often more than one choice of middleware will meet the requirements you need. All I needed was express-fileupload. I have had other requests for a multer example and can do one this year.
very interesting material, permission to ask, how to upload this file consumed by api gateway? does the api gateway also have to have a multer and a storage folder? thanks
@@DaveGrayTeachesCode thank you for replying to my comment. i've used multer in my api gateway but i only managed to send the file into the api gateway folder not in the parent API/service I'm calling. do you have turorial for this? Thank you
@@DaveGrayTeachesCode more precisely I want to send an excel file to a certain service using the api gateway that I have created. the gateway api is only an intermediary
Great tutorial!! Is it possible to upload files by http post request only from postman or others? I need to upload video and photos files from game engine Unity.
Hey Dave, could you please make a sample tuto for a file upload using GraphQL mutation (file within variables e.g. queryInput: {firstname, lastname, image} ) thanks
Hi Dave, I'm a little confused about this section: Object.keys(myFiles).forEach(key => { formData.append(myFiles.item(key).name, myFiles.item(key)) }) So I wonder why do you use "myFiles.item(key)" over "myFiles[key]". Is there any difference between them ?
There is a difference. You are referring to the JS in the form of the index.html file. myFiles is a FileList. FileLists have an item() method (MDN: developer.mozilla.org/en-US/docs/Web/API/FileList) so I am calling that method to return a file object. myFiles[key] would be correct if myFiles was a single object, and you wanted to reference the property of the object with that specific key.
@@DaveGrayTeachesCode yes please do so make a project based course which is beyond basics ...I am looking forward to buy something from you if its of great value . I really appreciate all this free contect thank you for teaching me redux and stuff
Hey Dave, Great explanations and methods. I’ve been trying to create a React app and do some pre-processing there. Scenario 1: - I don’t need to store the file, but I need to process csv data. So I validate the file extension, headers, etc. in React and then push the data to the API once the file and data checks out. - my struggle with this is providing loading status for multiple files. I use a state array, but doesn’t always re-render the component for some reason until another state change later. Scenario 2: - uploading jpg files. This video couldn’t have come at a better time! - is it better to process the file with express? Or should some preprocessing be done with react? In both scenarios I am playing with react-dropzone vs standard input field and button. Appreciate and value your thoughts.
Thanks Christopher! 🙏 Let's look at both: #1: Fetch does not provide a loading status. See what npm packages are available for this if any. The loading statuses I've seen are faked. If you find a solid solution, please share. Join my Discord to share with others, too. Link in header of my channel. #2: I would process the file after it is received. That doesn't mean with Express, but with whatever npm package you need in the Node.js environment.
@@DaveGrayTeachesCode thanks! I guess the overarching opinion is let the api do the processing work; just use react to quickly validate and send the data and process the response. Correct? Also, I wasn’t meaning that I was doing loading status with fetch. Sorry for that confusion. I am ok with async/await. The question is probably better directed on the react tutorial where you talk about managing state and how arrays are handled on state changes. I’ll go back and rewatch.
Thank you very much! It is really helpful! Hi Dave, I'm a little confused about how to change and setting the url "localhost:3500" by enviorment setting in index.html this section: const response=await fetch('localhost:3500/upload',{ method:'POST', body:formData }) Thank you very much!
You would not use an environment variable in an html file. In your Node.js files, you can refer to environment variables with process.env.VARIABLE_NAME_GOES_HERE - I cover this and much more in my Node.js for Beginners course here: ruclips.net/video/f2EqECiTBL8/видео.html
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
In this tutorial, you will learn how you can upload all types of files to a Node.js REST API server. We'll create several different reusable middlewares for Node.js & Express and we'll learn how to use one HTML input to upload multiple files at the same time. If you are just getting started with Node.js, I recommend my Node.js for Beginners full course found here: ruclips.net/video/f2EqECiTBL8/видео.html
Hey Dave, you're teaching is incomparable. could please make a Next js full project with nextauth and mongo db
You are my best teacher Gray! Thank's from Turkey :)
I love the perfection side of your videos, on minute 22:32 you make it clear to all of us. Thank you for bringing this professionalism.
You're welcome! I struggle with perfectionism. The reminder at the end of each video is for me as much as everyone else - keep striving for progress (not perfection). A little bit every day :)
This video is simply amazing!! Especially for a beginner coder with about a week of learning. You are so precise and so thorough in explaining each separate section of coding logic in the building of each file and it’s related files. Simply Amazing 🎉
I get so excited now when I see you post a new video! Can't wait to watch this one
Thank you, Ryan! 💯
i usually fail to follow tutorials, this man is genius!
You tackle the hardest topics that others evade
Thank you! 🙏 You must challenge yourself to grow 💯
What a great video!! 🏆
Well explained, well done!
After busting my brain with the issue of file upload in Node for so long, I was so happy to encouter this video.
Thanks.
Im working on a kyc app and i struggled with limiting size of the document upload, now thanks to Dave, ive fixed it.
Glad to hear that, Richard! 💯
Hey Dave,
Great Course, I've completed ReactJS and JavaScript playlists too from you. Your explanations are crystal clear and to the point.
Thanks for the great quality content Dave. Have a great day.
Glad you like them and thanks for the kind words! 🙏💯
This person comes with absolute best example . sir i love your code thank you
Thank you, Aishwary! 🙏
Dave your teaching approach is really amazing, you're one of the best teacher i've ever had in my life. thank you for sharing such a valuable contents.
Thank you for the kind words, Mahdi! 🙏
Great Video. Text is bold and visible. Explanation is so clear and precise. Excellent delivery.
Glad to hear that!
Hi Dave, Just now I have completed the video and tried it - its working well. Of course, it took some time for me to understand the concepts. But overall, really interesting - you did not use even axios or any other extras. Especially you have taken additional efforts to show the error messages without any grammatical issues and you have used middleware for validating the files are amazing. You did a great job and its very useful for the users. Thank you so much for your effort.
You're welcome and glad to hear that!
This glued me to a screen till the last seconds.
Thanks Dave.
I’ll definitely like to see React at the front end interacting with this api.
Also,
How to handle uploading such files to a mongodb or cloudnary service? After sometime.
Meaning save temporarily to the save then move the files to cloudnary and store image url returned.
BTW, thanks, you’re such a blessing to us learners
Thank you, Raymond! 🙏 I appreciate the requests!
I just want to say thank you for sharing your knowledge .... I was here looking for a way to show progress of your file upload while it's uploading but this was still nice to watch as always you explain topics in a very clear way that anyone can understand!
very well tutorial, i used this code in my own project and it worked very well thanks a lot ❤
Hello Dave, Your react tutorials has been a blessing to me... Please was this project ever done in react ?
Hey Dave, it would be great if you could make a react frontend form to upload xlsx files (or any other file) like in this video with backend. By the way your react, javascript, node js, css, tailwind courses are top notch, understood all the concepts.
Thank you and thanks for the request!
This is a nice application of using middleware, thank you!
I think the grammar thing was actually good since it gives the user a very human-like and easy to read feedback.
I have a suggestion for refactoring. In the file size and file extension middlewares it is easier to get the sizes and extensions with a filter applied to the Object.values array. In fact, we don't need the keys as far as I can tell, and the loop can be replaced by the filter Array method.
Thank you! And that refactor sounds great!! Excellent comment! 💯🙏🚀
You save my project, thanks!!
Progress over perfection❤
finally a good tutorial on file uploading
Thank you, John! 💯
Great Content! Did you ever make the React File Upload front end video? I am looking to learn how to integrate that.
i like how you clearly explain; you got a new subscriber ✌️
Thank you for the kind words 🙏
Another great video Dave, Thanks!
You're welcome! 💯
i very much enjoyed following along and will be applying my new knowledge to my personal projects. Thank you for this excellent content, Dave.
P.S. It would be excellent if you could do this using react. I believe you mentioned to let you know in the video.
You have an amazing content, I believe there will be full node and backend development long video soon 😎😉👍👍👍
Thank you! 🙏 I do have a Node.js full course here: ruclips.net/video/f2EqECiTBL8/видео.html
@@DaveGrayTeachesCode wow , yes I bookmarked it as well
Happy to see the return of vanilla JS 💪😁 (I don't know why but I always like to get the most out of native tools)
anyway, we may use for-of loop to shrink this code
Object.keys(files).foreach(key => {
files[key].something
})
to this:
for(let file of files){
file.something
}
Thanks Dave
Thanks Ahmad! Yes, complete preference for choice there. Sometimes I use Object.keys() and sometimes for...of. I should probably consistently choose one only 😃
@@DaveGrayTeachesCode I use the first thing comes to my mind and can't be consistent even on the same project 🤦♂
anyway, I enjoy finding alternatives it keeps my brain active (if any 😁)
I'll be so glad if you prepare a video about streams, process, buffers in nodejs, sir :))
Dave,
I want to add my compliments to the many you already have!
Your instructions are crystal clear and allowed me to implement your solution into my project with very few updates as changing the repository path for uploaded files and saving the metadata to my database.
I just want to ask you if you have a tutorial on retrieving the files from the server to allow users to open their files.
Thank you very much!
Thank you for the kind words! I do not have a tutorial specific to downloading files. However, after learning about Node.js with Express, you should be able to implement the response.download method documented here: expressjs.com/en/5x/api.html#res.download
Thank you so much. i have been looking video on file upload
If you would make a react video on it, then please do try to make little change to backend code as well for duplicate name files. We should try to name incoming files something different so they may not get overwritten
Thank you!
You can add that option if you wish. Check if the file exists on the server and rename the upload before saving if it does.
I think that message (with "is" and "are" ternaries, etc) is gorgeous. Sometimes I'm too lazy to do that and I feel guilty about that.
yes plz make it as a MERN project. love ur videos . keep it up 👌
Thank you! 💯
Thanks Dave! Loved it. It would be nice to have a video on uploading photos to a data base like Mongo.
Thank you and great request! 💯
I love this tutorial! How would we modify this if we wanted to store the files in a database like postgreSQL?
Thanks for creating this video it really help
Glad it helped!
thank you, this is great , perfect timing, I just happen to need this for my current project. Can you not use axios for this or did you just choose fetch randomly for this example? Can you possibly point me in the right direction on what I would need to research if I wanted to implement a crop photo option before upload or maybe it would be after? It would be to use the image for a profile photo but allow the client to crop it so the most important part of the image is displayed in the bubble.
If allowing the client to crop, I would look for a client-side solution - maybe on npmjs.com. I just used fetch, but you could use Axios or other API layer options.
This is a great tutorial,
And therefore I'm a new subscriber :)
Thank you, Dave!
Having said that, you've mentioned few times along the video that you might share of the client side code for uploading files with React as well.
Did you end up doing so?
And if not, will you, please?
Yes please make tutorial uploading image from react to node express server and store the images in drive using fs 🙏
Thank you for the request! 💯
Best video in yt I have ever seen.
Can u please make a separate video about Multer middleware stored in database like SQL, noSQL with MVC pattern?
your video is far better then Udemy paid course.
Appreciate your hard work 🙏
Thank you for the kind words! And great request! I want to do that, too 💯🚀
@@DaveGrayTeachesCode thanks a lot sir I have just done🙏
Thank you very much you help me so much with this video
Glad I could help!
I bought paid courses and this guy channel is better. So crazy 😂😂😂😂😂
Thank you for the kind words!
perfectly explained
Thank you very much! It is really helpful!
Glad to hear it! 🚀
Thanks Dave.
Thank you for your video, Dave! Can you also make the video about the download file with express? Please.
Thank you for the request! 🙏
loved your video❤
Thank you!
Great course! It helped me so much. I have a question, how do you do to paste code from nowhere?
You cannot paste code from nowhere. During a tutorial, I might have another VS Code instance open off screen that I copy something from.
Hey Dave,
awesome tutorial , can you please tell me how I can change the path of saved files meaning if I want to save somewhere else and divide them into different folders like image files separated from doc files.
In that case, you would need to look at the file extension and create the save path based on that information. Notice how I used path.join() to create the paths. If you aren't too familiar with Node.js, starting with my Node.js course would really help out: ruclips.net/video/f2EqECiTBL8/видео.html
thanks for best content
can you show the same using react as frontend ...Thanks
Hi Dave Grey for the next video i would like you to cretae a video that show the way to generate report to PDF and Excel when the user send a request to backend (Express). this content will be very useful for many people (that include me :) )
Thank you for the request! It won't be next, but I'll add it to my request list.
Thanks for the tutorial!
Btw what extension or setting are you using for highlighting syntax? I noticed that in your editor the opening and closing brackets are connected with a line (not just highlighted) which would be awesome.
I explain how to add the lines here: ruclips.net/user/shortsMDaxWffMjrQ
Really good tutorial, thanks! Based on this, is it possible to integrate a progress bar in the frontend?
Last I looked into creating an accurate progress bar, fetch did not support it - but the older XMLHttpRequest did. There may be some npm packages that make it easier. I created a progress bar for image upload in this tutorial: ruclips.net/video/jEjo9UytpIc/видео.html
@@DaveGrayTeachesCode Yes, thank you. I modified the sendFiles function a little bit, ...
const sendFiles_xhr = async() => {
//Object
const myFiles = document.getElementById('myFiles').files //all files user selected
const formData = new FormData()
//Bind file data to the form
Object.keys(myFiles).forEach(key =>{
formData.append(myFiles.item(key).name, myFiles.item(key))
})
//Send to backend alternative
var xhr = new XMLHttpRequest();
xhr.open('post','localhost:3000/upload',true);
xhr.upload.onprogress = (e) => {
if(e.lengthComputable)
{
var percentage = (e.loaded / e.total) * 100.0;
console.log("Progress in %", percentage.toFixed(0))
}
}
xhr.onerror = (e) => {
console.error("Error! No response from server. This may caused by a network error.")
}
xhr.onload = () => {
console.log('XMLHttpRequest transaction completes successfully');
}
xhr.onreadystatechange = function() { // Call a function when the state changes.
console.log("Ready with status", this.status," ", this.responseText);
if(this.responseText.length==0)
{
console.log("No Response text!")
return;
}
let json = JSON.parse(this.responseText);
console.log("Response message is: ",json?.message);
const h2 = document.querySelector('h2')
h2.textContent = `Status: ${json?.status}`
const h3 = document.querySelector('h3')
h3.textContent = json?.message
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send(formData);
}
Thanks Dave, love your tutorial!
I was trying to use an external script for the javascript but it's not working even after using the same code.
What might be the issue?
I have no idea. I did not use an external script in this tutorial. I do not know anything about the script you are trying to use, and I cannot see your code. No way I could know the answer. Consider joining my Discord where you can share your code and myself and others can answer questions: discord.gg/neKghyefqh
@@DaveGrayTeachesCode alright thanks,I will join the link now
could you please make a video on websocket
Good request!
@@DaveGrayTeachesCode pls also do a react native tutorial and a python tutorial
Dave you can create React JS for this file upload
Thank you for the request! 💯
Note: so when you send one file, then req.files.inputname is a single object. When you send two files from one input, then the form sends as an array of objects. So the .mv function must handle that potential difference as I noticed you didn't. Just a heads up for those who wish to consume the files differently to check each req.files.inputname to determine it's an array or a single object
Thanks Dave what an amazing tutorial 👏
Appreciate if you can extend the tutorial to cover converting images to base64 string type and then save it to database
Thanks again.
You're welcome and that's a great request! In the meantime, this tutorial has some of what you are asking for - the base64 part: ruclips.net/video/jEjo9UytpIc/видео.html
This is some cool asynchronous upload handling script. Creating formdata object and passing into fetch with await wrapped into async function and then taking resolve in json format with optional chaining. That’s really cool, but why express-fileupload and not Multer as an middleware?
Often more than one choice of middleware will meet the requirements you need. All I needed was express-fileupload. I have had other requests for a multer example and can do one this year.
@@DaveGrayTeachesCode I would be definitely interested. All the best.
Hi Dave, do you have a course on Udemy?
I do not. I do plan to release a premium course at some point. I won't put it on Udemy though.
OF course, when I search for the information how to do something. There's have to be Dave Gray video tutorial on how to do it
Thank you for the kind words! 🙏 I'm working on a Typescript series very soon. 🚀
very interesting material, permission to ask, how to upload this file consumed by api gateway? does the api gateway also have to have a multer and a storage folder? thanks
This tutorial uploads a file to an API. It also stores the file on the server. Using multer is another approach that differs from this video.
@@DaveGrayTeachesCode thank you for replying to my comment. i've used multer in my api gateway but i only managed to send the file into the api gateway folder not in the parent API/service I'm calling. do you have turorial for this? Thank you
@@chandrawardhana5884 I do not currently. It sounds like you want to relay the image from your backend API to a 3rd party API. It is possible.
@@DaveGrayTeachesCode more precisely I want to send an excel file to a certain service using the api gateway that I have created. the gateway api is only an intermediary
very useful video
Glad to hear that! 💯
All of the file upload tutorials I've seen other than this one seem to use multer. Do you prefer this method instead of multer?
No preference, but I just used this one at the time.
Great tutorial!! Is it possible to upload files by http post request only from postman or others? I need to upload video and photos files from game engine Unity.
Thank you! 💯 It is not mine, but here is a nice short video on how to do that: ruclips.net/video/S7bwkys6D0E/видео.html
Hey Dave, could you please make a sample tuto for a file upload using GraphQL mutation (file within variables e.g. queryInput: {firstname, lastname, image} ) thanks
Thanks sir
Nice one can you make stripe payment video in node js
Thank you! I should look into that 🚀
how to rename the file before saving it to the our folder ?
How can i use hls in node js ?
Hey thanks for this! Can I upload csv file and convert it to JSON or object?
This tutorial shows how to upload any file type, but it does not show how to process a CSV or convert it to JSON. That would be a good project! 💯
Which theme u r using in vs code?
Could you please tell me?
GitHub theme 🚀
can you please do it with react front end
Thank you for the request!
Hi Dave, I'm a little confused about this section:
Object.keys(myFiles).forEach(key => {
formData.append(myFiles.item(key).name, myFiles.item(key))
})
So I wonder why do you use "myFiles.item(key)" over "myFiles[key]". Is there any difference between them ?
There is a difference. You are referring to the JS in the form of the index.html file. myFiles is a FileList. FileLists have an item() method (MDN: developer.mozilla.org/en-US/docs/Web/API/FileList) so I am calling that method to return a file object. myFiles[key] would be correct if myFiles was a single object, and you wanted to reference the property of the object with that specific key.
Could you please do a file upload with react.
Thanks for the request!
please use react to create the form.
Will do!
Awesome Tutorial +++++++++++++++++++++++++ Thank You
You're welcome, Mohamed! 💯
Hey Dave,
any plans of launching a paid course
I do want to. I hope to start building one later this year. 🚀
@@DaveGrayTeachesCode yes please do so make a project based course which is beyond basics ...I am looking forward to buy something from you if its of great value .
I really appreciate all this free contect thank you for teaching me redux and stuff
What did the semicolon ever do to hurt you? Why don't you show my boy some love );
He was my buddy for years, but I'm trying to break the habit and lose his digits. 😆
Hey Dave,
Great explanations and methods. I’ve been trying to create a React app and do some pre-processing there.
Scenario 1:
- I don’t need to store the file, but I need to process csv data. So I validate the file extension, headers, etc. in React and then push the data to the API once the file and data checks out.
- my struggle with this is providing loading status for multiple files. I use a state array, but doesn’t always re-render the component for some reason until another state change later.
Scenario 2:
- uploading jpg files. This video couldn’t have come at a better time!
- is it better to process the file with express? Or should some preprocessing be done with react?
In both scenarios I am playing with react-dropzone vs standard input field and button. Appreciate and value your thoughts.
Thanks Christopher! 🙏 Let's look at both:
#1: Fetch does not provide a loading status. See what npm packages are available for this if any. The loading statuses I've seen are faked. If you find a solid solution, please share. Join my Discord to share with others, too. Link in header of my channel.
#2: I would process the file after it is received. That doesn't mean with Express, but with whatever npm package you need in the Node.js environment.
@@DaveGrayTeachesCode thanks! I guess the overarching opinion is let the api do the processing work; just use react to quickly validate and send the data and process the response. Correct?
Also, I wasn’t meaning that I was doing loading status with fetch. Sorry for that confusion. I am ok with async/await. The question is probably better directed on the react tutorial where you talk about managing state and how arrays are handled on state changes. I’ll go back and rewatch.
@@cgolebio correct!
How about a tutorial on express.js file upload without using packages like multer or express file upload.
Like this one: ruclips.net/video/jEjo9UytpIc/видео.html
take love
Thank you! 🙏
♥
👍👍👍👍👍👍👍👍👍👍👍👍
Great tutorial but the entire time I was screaming GET TO THE POINT
thank u wise man
Thank you very much! It is really helpful! Hi Dave, I'm a little confused about how to change and setting the url "localhost:3500" by enviorment setting in index.html
this section:
const response=await fetch('localhost:3500/upload',{
method:'POST',
body:formData
})
Thank you very much!
You would not use an environment variable in an html file. In your Node.js files, you can refer to environment variables with process.env.VARIABLE_NAME_GOES_HERE - I cover this and much more in my Node.js for Beginners course here: ruclips.net/video/f2EqECiTBL8/видео.html