File Upload using Fetch API - JavaScript Tutorial
HTML-код
- Опубликовано: 9 июн 2022
- 👉 Source code: openjavascript.info/2022/06/0...
⚡ Looking for high-performance, affordable web hosting for your website or app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to upload a file to a server using JavaScript's Fetch API (POST or PUT request). The file and other form data are sent as part of a FormData object.
#javascript #webdevelopment #tutorial #fetch #fetchapi #fetchapi #httprequest #formdata #ajax #asynchronous
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.net/b3dMek
Back-End Developer Professional Certificate: imp.i384100.net/gbYorg
iOS Developer Professional Certificate: imp.i384100.net/Jr7qj2
Meta Android Developer Professional Certificate: imp.i384100.net/oeYnGo
Meta Database Engineer Professional Certificate: imp.i384100.net/BX7KGB
Website: openjavascript.info
Twitter: / openjavascript
Thanks for watching!
👉 Here's the source code: openjavascript.info/2022/06/08/how-to-upload-a-file-using-the-fetch-api/
Such an easy video to follow! I learned so much!!! Thank you!!!!!! :D
That's great to hear!
I have an implementation close to this one using a form-data object to an input file we need to send to a REST api which accepts FormData, the problem is in iOS, form some reason when I post to the api in iOS safari the body is set empty and the api fails. Is there a workaround for safari in iOS in order to post form-data objects?
Excellent tutorial. I have one question. What would happen if the sever has a x-api-key set up? Don't you need to it to add it in the header when you make the POST request?
Yes, in that case you'd want to set it as a header in a headers property in the options object (second argument position when calling Fetch) as follows:
headers: {
"X-Auth-Token": "token-value",
}
is the formData.append using streams , fs module and internal buffers ? I don't get it
thanks
You're welcome! Thanks for reaching out.
0o0 nice continue your make videos
Thanks, there's more to come 😉
@@OpenJavaScript 🙂☺
@@OpenJavaScript I really like your approach in explanation. Do you have industry experience? Or already working as a developer?
@@melchizedek79 Working as a developer and also creating educational content like this.
I actually have a strange and windy path to web development as I was originally a university lecturer in a different field for a while. Really enjoyed the teaching and programming aspects, so when that came to an end, became a web developer and, as you can see, now I'm teaching that :)
How can I do this by using content-tyoe = application/json, and sending the image base64 to be converted later on ?
For the request you should add a headers property to the options object (second position in Fetch request):
headers: {
"Content-type": "application/json",
}
For the reading to base64 you'll want to use the FileReader (tutorial: ruclips.net/video/u2VTtAXq1iA/видео.html)
I have a question, I have seen some videos, where they use Ajax to make a uploaded progressive bar. Fecth has something like that? Fetch have a method to get the info while is uploading?
Great question!
I actually wanted to make a video about this. But unfortunately you can't track upload progress using the Fetch API!
So for now, the native solution is using the XMLHttpRequest object:
ruclips.net/video/9biknk9SecY/видео.html&t
Or, for a promise-based solution, using the Axios third-party library (which uses XMLHttpRequest under the hood):
ruclips.net/video/nC3ntJUQrAM/видео.html
As soon as it is possible with Fetch API, I will make a video :)
@@OpenJavaScript Thanks, in general which is better?
@@darkkinggamesyt6463 I prefer XMLHttpRequest because it doesn't require importing anything.
But Axios more straightforward promise-based syntax if that's more important to you.
Nice video! I'm working with Django and I get this error ""415 (Unsupported Media Type)"" I already google as much as i can and tried different code but without success. Any advice please!
From the error it looks like your server is rejecting the data for some reason.
Sometimes, this is to do with the 'Content-Type' header. Sometimes, there can be a problem if your payload is a FormData object and you set it manually, so if you have one, try removing it.
If it isn't working without, try adding one by including the following property on the options object, adjusting for the file contents:
headers: {
'Content-Type': 'multipart/formdata'
}
Another header you could try:
'application/octet-stream'
Or, if you are sending a raw File object, the MIME type that corresponds to the File you are sending.
I have a Question regarding where the files are saved are they saved in the directory from the fetch or where exactly are they getting saved when uploaded to the server?
Good question!
According to the httpbin source code documentation, it should just echo the data you send it back to you. So it should only be held in memory as long as your request is being handled without being stored anywhere permanently.
However, to be on the safe side, I would still not send any sensitive data as it is ultimately a third-party server.
Pretty cool explanation, lil too much for my taste, but then where I can actually upload to images to? I only know about ipfs lmao
You can upload the image to any server that will accept an image as an upload.
For example, you could set up a POST endpoint using Node.js + Express and save the file locally or from there post it to a database or cloud solution.
Will consider doing a tutorial on this in the near future, as this is an interesting question!
I am getting 405 error. Essentially, the I am being denied to send a post request. Could it be because i am using vscode liver-sever?. Also, I want to upload image to an Upload folder I created. Will the fetch api work?
A 405 error is probably not live-server related (though it wouldn't hurt to try without). More likely you are making a request to an endpoint that doesn't support that method (e.g. GET, POST).
Concerning the file upload, yes you can! But you'll also need to write the code to handle to saving of the file on the server-side (e.g. using Node.js).
Here's a tutorial on working with the FS module in Node.js: ruclips.net/video/dtTnWxfH19U/видео.html
how to submit text data and file data using javascript fetch
You can use the FormData object like in this video.
Make sure the text and file input have a "name" attribute. Then they'll be included in the new FormData object you create when passing the form element into it.
The payload you send is then this object.
How can I send an array of object containing image and text input using formdata. I have a node js backend api for book app, each books can have several authors. How do I pass this dynamic data to my backend.
[{name: "First author name ", image: "First author image file here "},
{name: "Second author name", image: "Second author image file here }]
I would probably 'stringify' the image to base64 format. Then call JSON.stringify() on the object and send it as a pure string OR embed the string in a Blob of type application/json.
To stringify the image, you can use the FileReader, which I covered in this tutorial: ruclips.net/video/u2VTtAXq1iA/видео.html
@@OpenJavaScript jpeg or png
@@olawumisegun5898 I woulf probably go with the stringify solution that I mentioned in the previous comment (edited it while you were replying I think)
@@OpenJavaScript OK
The video isn't clear enough... I mean not well explained
Thanks for the feedback.
Is there a particular part or aspect that you found I didn't explain well? I'm always looking to improve the tutorials!
@@OpenJavaScript finally gotten it....
Thanks for the support 🫡
@@opeyemialatishe1944Great that you found a solution!