File Upload using Fetch API - JavaScript Tutorial

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. ⚡

[aileenchan]

Such an easy video to follow! I learned so much!!! Thank :D

[JeyaAnnanathan]

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?

[JulioMarquez-tx]

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?

[darkkinggamesyt]

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?

[exe.mdnght]

is the formData.append using streams , fs module and internal buffers ? I don't get it

[skizzerop]

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?

[Cubas]

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!

[olawumisegun]

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 }]

[jk_batham]

how to submit text data and file data using javascript fetch

[koi]

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

[babachicken]

How can I do this by using content-tyoe = application/json, and sending the image base64 to be converted later on ?

[_nigerianprince]

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?

[opeyemialatishe]

The video isn't clear enough... I mean not well explained