Using Fetch to Upload Files

Making AJAX Requests with Fetch was added in ES6 and is an easy way to fetch data from the server.
However, sometimes you want to upload a file to the server along with other text data.
This video covers how to extract a file from your HTML form and send it to the server along with the other data.

[oah]

i have been coding JS forever now and I just love watching your videos. The way you explain stuff is so logical. Man this channel is hugely under-rated. You deserve 1M subs.

[patryk]

Love the way you present your knowledge about programming, you explain everything so great and the way you do it has such a nice calming effect, you make the whole learning process much easier for people like me who get easily frustrated, Thank you!

[danieliniguezv]

dude seriously amazing job. so clear. thank you so much. tons of appreciation!

[swapnildoshi]

I am using rails for back end & react for front end and this worked for me

[mikeshilovski]

hey, thank you for all the videos it's really helpful!

[hakami]

That was a succinct explanation. Now I need to learn how to handle the receiving part. Any suggestions?

[dadomultimediamusic]

Thank you for your great explanation, I was expecting to see the part of the script that is receiving the request from the server side, and also how it was located the image file. Thank you so much. One more thing. To use Fetch is similar that to use Ajax ? (from Ajax --> Php File on the server) and the php script will do the rest of the job, placing the file in a folder and sending a response to Ajax ? Greetings.

[jenstornell]

Great tutorial! I solved my missing pieces. Great that you mention $_FILES. I was trying to use without success before. Also $_POST now works instead of for the post data. Very weird because all my other fetch calls I need to get them. All my fetch requests are built pretty much the same way.

[SR-zsdk]

Hi Steve, thanks for the tutorial, I have one question though. What if the request object is something like the following

let fd = new FormData();
fd.append('logo', uploadLogo, "testname");

reqObj = {
"clientid": clientId, //string
"companyname": companyName, //string
"contractdate": startDate, //"2018-06-17"
"contractenddate": endDate, //"2018-06-17"
"contactnumber": contactNumber, //string
"contactperson": contactPerson, //string
"logo": //how do I pass the file object in this?
}

[exe.mdnght]

I really don't get it, so the client javascript is sending a request to the operating system to read the file and then write to that form object ? Is this using streams and buffers or the whole thing is getting into RAM ??!

[raizen]

Just a question why does some website’s file inputs when I select a file it loads. it goes to a processing state for like 2-3seconds and then it previews the image after submitting. some website’s file input does not. Like on the video does it have any difference?

[muhddanish]

hello, may i know how to use the saved variables on other javascript file?

[HellesMammuthBS]

That was a great explanation! Thank you for that!
I am also interested in how to save the uploaded
file onto my (node) server! How can i do that?

[KenzoArts]

Hi Steve, thanks for the tutorial. I got a question, is there a way of restricting user to choose only files that exist already on the server ?

[vudathabhavishya]

Can I use the same code when I want to save file in shared path?

[dadomultimediamusic]

One more question: What is the purpose using "No-Cors" Mode ?

[hridoydas]

if I need only jpg formate to be upload what i do

[marcziel]

setting `mode: "no-cors"` makes the response useless in javascript code.

[gabrr]

FileList is not an array, but an object instead

[tudorhulban]

the font is hardly readable on 5.2 inch phone