Upload Files with Fetch - JavaScript Tutorial
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- 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!
![[Full Episode] The Restaurant War Thailand ศึกพ่อค้าซ่าแม่ค้าแซ่บ Episode 1 | 22 ก.ย. 67](http://i.ytimg.com/vi/BuzQ70v-UZQ/mqdefault.jpg)
![[UNCUT] The Loyal Pin ปิ่นภักดิ์ EP.8 (1/4)](http://i.ytimg.com/vi/7OwUsMs0M5s/mqdefault.jpg)
best and simplest upload js script forever.
Thank you for sharing your knowledge!
Yeah no worries mate
Thank you very much, you helped me a lot
thanks mate! You solved one heck of a headache for me!
Very well explained
Cheers mate!
Thanks man!! This really working and solved my issue in a minute.
HTTP/1.1 405 Method Not allowed ???
Hey, i am getting the same issue, were you able to resolve it?
Great post, clear and to the point. Just what I needed!
this is so simple i actually feel like its cheating. Thanks for this
this helped me a lot, thanks for sharing! cheers!
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.
Hello! May I ask you which VS Code them are you using in this video? Looks very nice!
I'm using Roboto Mono as the font and the theme is Min Dark.
I copied this code exactly as written and got a 405 error. Any idea what the problem could be?
Did you figure it out?
How would you create it so that it automatically chooses a certain file type?
Hello! When I follow the same image not copied or saved or uploaded into destination folder.
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.
I would have at least mentioned the most important missing part.. the php file it self.
Unfortunately not because this video is about the front end, using JavaScript. It will work for all server side technologies
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*"
Thanks man for the video!!!!
Thank You For This
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?
Beautiful man
bro i got 405 method not allowed can u give some help
if someone is getting the same problem u just need to open it as a server and not as localhost th-cam.com/video/ohkMRA74MB4/w-d-xo.html see that video use xamp and open 80 port and it should work
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...
What about uploading BIG files? Making chunks, etc.?
I get a 500 Internal Server Error when I click submit and it doesn't upload the file to the folder :(
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
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?
OK but then where is it the file on the server? cannot find it. Good question, right?
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 (?)
can we code the upload.php in JS ?? Because i code on shopify and shopify don't accept PHP....
thanks to you!
Which server are you using?
So if i have the name attribute on on the input tag, does it mean i can now avoid using the formdata.append() ?
excelente
thanks
good job :)
100 working 👏👏👏❤❤
Hello dcode I really liked ur video. May I ask you how can I make the code version of upload.php in nodejs?
You can use Express and Multer :)
@@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?
How can i use that upload file path in javascript?
will the php file run even with xammp or wampp server?
perfect
Love you :-)
why we must use php again?
awesome
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?
Ok never mind I figured it out.
There was some permission issue when the php file tried to write.
I get 404. if u could guide me what am I doing wrong
I'm getting no errors, and no file is showing up in my uploads folder.
Try an alternative with apps script
th-cam.com/video/m3Sc7nVLPP8/w-d-xo.html
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!
Try an alternative with google apps script
th-cam.com/video/m3Sc7nVLPP8/w-d-xo.html
Can you teach how to validate files using javascript?
I'll be doing a video soon on the File API :)
@@dcode-software Thank buddy.
Mine is getting error 400 : body must contain a valid content
Try making sure your content type is correct