Upload Files with Fetch - JavaScript Tutorial

In this video we'll be taking a look at how to upload files using the Fetch API - this works by using the FormData object within JavaScript.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[@user-se1in4lz6x]

best and simplest upload js script forever.

[@HugoGuzmanC]

Thank you for sharing your knowledge!

[@dcode-software]

Yeah no worries mate

[@VictorSantos-yb8ir]

Thank you very much, you helped me a lot

[@romimaximus]

Very well explained

[@dcode-software]

Cheers mate!

[@kashanahmad8014]

thanks mate! You solved one heck of a headache for me!

[@nigelpallatt]

HTTP/1.1 405 Method Not allowed ???

[@ManpreetSingh-cv4it]

Hey, i am getting the same issue, were you able to resolve it?

[@reidliberato8917]

this is so simple i actually feel like its cheating. Thanks for this

[@vishnuvardhan8686]

Hello! When I follow the same image not copied or saved or uploaded into destination folder.

[@columbiantoad]

I want to use multiple files in my project. Would I just change the line "formData.append("inpFile", inpFile.files[0])" to "formData.append("inpFile", inpFile.files)"? Then on the PHP file, make a for loop which would go through the files indexes? $File = $_FILES['inpFile']; For example: $FileSize = filesize($File['name'][$i]); // $i = the index of the for loop.

[@raveg9413]

it's not working... I write this code just same as you are and set same directory, but I can't received image file in upload, cause they didn't send.

[@shantanuchhailkar3437]

Thanks man!! This really working and solved my issue in a minute.

[@AshwinSKumar]

How would you create it so that it automatically chooses a certain file type?

[@davidfont2596]

When I press the "upload file" button @6:00 I get "Uncaught ReferenceError: can't access lexical declaration 'formData' before initialization index.html:24EventListener.handleEvent*"

[@gracialonignasiver6302]

This posts images perfectly, but does anyone else get a weird error where no other code will run inside the event besides the actual fetch post?

[@jasonlewis6805]

Great post, clear and to the point. Just what I needed!

[@BillTheChill654]

I copied this code exactly as written and got a 405 error. Any idea what the problem could be?

[@Hamza_n]

Did you figure it out?

[@ikurennyi]

Hello! May I ask you which VS Code them are you using in this video? Looks very nice!

[@dcode-software]

I'm using Roboto Mono as the font and the theme is Min Dark.

[@thebewerter5730]

this helped me a lot, thanks for sharing! cheers!

[@bjarnieinarsson3472]

I would have at least mentioned the most important missing part.. the php file it self.

[@dcode-software]

Unfortunately not because this video is about the front end, using JavaScript. It will work for all server side technologies

[@MichaelShingo]

I get a 500 Internal Server Error when I click submit and it doesn't upload the file to the folder :(

[@MichaelShingo]

No error now that I installed PHP from homebrew and told VScode where the PHP executables are...now still nothing in uploads, looks like my $_FILES array is null

[@divinechukwu505]

Thank You For This

[@goncalomarques7022]

bro i got 405 method not allowed can u give some help

[@goncalomarques7022]

if someone is getting the same problem u just need to open it as a server and not as localhost kzbin.info/www/bejne/pZnOfoV3bJmAeJY see that video use xamp and open 80 port and it should work

[@atouchofa.d.d.5852]

Beautiful man

[@TheIguana3d]

Thanks man for the video!!!!

[@mohamedshahrul1750]

please answer this... how does file is sent to server without converting to base64? how does we send it in binary format? doesn't http only support text? thats why we convert it into base64 string format right? pleaseeee explain me...

[@trusabaka9747]

What about uploading BIG files? Making chunks, etc.?

[@beyondcraziness8847]

I want to upload a file to AWS S3 bucket... Can I pass the URL instead of upload.php file location... If not what else can I do can you please tell me?

[@parabunx]

can we code the upload.php in JS ?? Because i code on shopify and shopify don't accept PHP....

[@user-mo3cw6go7c]

thanks

[@dijiflex]

So if i have the name attribute on on the input tag, does it mean i can now avoid using the formdata.append() ?

[@juliolh06]

excelente

[@okancingoz]

How can i use that upload file path in javascript?

[@caprioficial]

thanks to you!

[@Cubas1111]

Nice video! I'm working with Django and I get this error ""415 (Unsupported Media Type)"" I already googled as much as i can and tried different code but without success. Any advice please (?)

[@fredfromearth7263]

OK but then where is it the file on the server? cannot find it. Good question, right?

[@dastgirakhtar9782]

100 working 👏👏👏❤❤

[@joseraimundofernandesfilho7570]

Hello dcode I really liked ur video. May I ask you how can I make the code version of upload.php in nodejs?

[@dcode-software]

You can use Express and Multer :)

[@joseraimundofernandesfilho7570]

​@@dcode-software Hello dcode. I tried with angular + Express and connect-multiparty and its working but the file name is becoming a hash like: 2wrty267yw2.pdf. Do you know how can I fix that?

[@Brunocriacoes]

good job :)

[@paoro814]

will the php file run even with xammp or wampp server?

[@kirito6374]

Which server are you using?

[@sandortudja2087]

It is not working for me. I can check in the chrome developer tool the FormData is there as binary file But the selected picture do not in the uploads directory for some reason. Anyone have any idea what is the reason of this?

[@sandortudja2087]

Ok never mind I figured it out. There was some permission issue when the php file tried to write.

[@louisaldorio7251]

why we must use php again?

[@anthonymorell692]

Has anyone implemented this with django backend? Everything follows along accordingly up until setting up the fetch procedure. I have problems 1.) getting the CSRF token and 2.) keep getting a 302 code. Any advice is greatly appreciated!

[@ConsulthinkProgrammer]

Try an alternative with google apps script kzbin.info/www/bejne/o2S2lGqki7GDhpo

[@woofelator]

I'm getting no errors, and no file is showing up in my uploads folder.

[@ConsulthinkProgrammer]

Try an alternative with apps script kzbin.info/www/bejne/o2S2lGqki7GDhpo

[@sidnaesk295]

Love you :-)

[@mushfiqussalahin6930]

I get 404. if u could guide me what am I doing wrong

[@webdev4786]

perfect

[@mohammedalzamil7191]

awesome

[@AdriiPing]

Mine is getting error 400 : body must contain a valid content

[@dcode-software]

Try making sure your content type is correct

[@bikramchettri9405]

Can you teach how to validate files using javascript?

[@dcode-software]

I'll be doing a video soon on the File API :)

[@bikramchettri9405]

@@dcode-software Thank buddy.