Sending a form using the FormData object - JavaScript Tutorial

👉 Source code: openjavascript.info/2022/04/2...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjavascript.info
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
Using the FormData object constructor in JavaScript, you can easily prepare and send a payload containing data from a form without needing to select form items individually or set POST request headers manually.
#javascript #formdata #frontend #webdevelopment #javascript_tutorial
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡ 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

[@OpenJavaScript]

Thanks for watching! 👉 Source code: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/

[@mildmildfire]

Superb! Just what i was looking for!😊

[@MegaJohn144]

I was only looking for a way to debug my FormData object. You showed not only that but how to formulate a request and receive a response. This is a great help, as I am not that familiar with JavaScript.

[@louleg23]

Really clear - thanks!

[@Pomyluna99]

Thanks for that bit about how if a form field lacks the name attribute the FormData object won't include it. Couldn't solve that little mystery, much appreciated!

[@OpenJavaScript]

Yes, that's a bit of a gotcha when you start using this method. Easy to a omit a name attribute and wonder what went wrong.

[@kartikeyrana3736]

thank you stranger on the net ! that was very useful :)

[@dailydose8197]

Great job 🎉🎉..You explained it in a very easy way.. thank you..❤

[@Khalid-sr4zo]

very nice, thank you!

[@nguyenviet908]

thank you very much

[@tiagoborges5108]

Thank you very much for me is very useful and it´s very god to know new ways to program.

[@OpenJavaScript]

Thank you! I'm glad you enjoyed the video :)

[@DubPlayer1]

THANK YOU

[@yofi2614]

Great tutorial man, wonderfull to watch, If I may one question, Where exactly in the code you insert the user file? it seems like in row number 44 in "file.files[0]", you just get the location of where to store the file in the object formData..but inserting the file itself that the user gave

[@OpenJavaScript]

The file is selected by the user via the input element in the HTML form. On line 43 I select this element. And on line 44 I am appending the file that exists there to the FormData object I created on 41. A user-selected file on a file input is available on the files property in array format (even when there is only one file). So for a single file, this is at position 0 in the array. Hope that helps!

[@yofi2614]

@@OpenJavaScript Oh! now I got it, thanks for the quick response BTW , so, when a user upload a file, its automatically being stored in a object called "files", and what you have done in row 44 is only accessing to this specific file location by "file.files[0]", so when you append it to the formData, its like saying, create key: image and give it the data that is stored at file.files[0] (cause here youll find the file that the user uploaded,) RIGHT?

[@OpenJavaScript]

@@yofi2614 Exactly! It's stored on file.files in filelist format (similar to array) so you can access it by its index in that filelist. Always index position 0 for a single file :)

[@modernNeanderthal800]

I wasn't able to get for (item of blah) to work

[@nevestunga955]

GOOD!!!!!1

[@OpenJavaScript]

Thanks!

[@learnershub7935]

Hello sir I was stuck in changing the object into FormData. I created the object of FormData and append the key values. but the formdata object is empty. would you like to guide me? I have also searched from many resources but still the error is not resolved.

[@OpenJavaScript]

A really common reason this can happen is that there is no "name" attribute set on input elements in the form. Only elements with this attriubte will appear in a FormData object if you create it by passing a form element into it like I do this this tutorial. You may also want to check your code against that posted for in the related blog post for this tutorial, which has a live working example: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/

[@modernNeanderthal800]

Set a variable to [...formData]. In the latest version of node, node 18.x.x. is on my machine and formData wasn't iterable. I had to set it to a variable `let formValues = [...formData];` wish I understood it better. Okay on to the next thing. Gg yall, comment.

[@sg-ck2oh]

How was the server made or was it nodejs?

[@OpenJavaScript]

It isn't a server I created. It's a live test server for creating HTTP requests that mirrors the information you send it in the response (so you can see what the server sees). Here's the homepage: httpbin.org/

[@spoiler3537]

Great explanation . Can show the server side code as well ?

[@OpenJavaScript]

I'll keep it in mind to show more server-side code in future, but this server in particular is a live public test server that I do not control. But it is often useful because it mirrors what you send it back and viewers can make the same requests I am without any CORS error. However, if you are interested in learn more about handling uploads server-side, you might find my more recent tutorial on handling file uploads in Node.js useful: kzbin.info/www/bejne/iovZfn-Ne7uJnqc

[@m3hdim3hdi]

is formdata still used or there is something better?

[@OpenJavaScript]

The FormData constructor is still used. It's a native tool for the job and a really good way to parse form data. Your other alternative is, if your data is okay in pure string format, send to the server as URL parameters (kzbin.info/www/bejne/bXPFfWWGj5pmb5Y).

[@m3hdim3hdi]

@@OpenJavaScript thank you so much for replay

[@user-eo9kc5fs7o]

When i send the form with images it gives me this error unsupported media

[@OpenJavaScript]

In that case, you may want to try embedding the file in a Blob object before appending it to the FormData object then: const blob = new Blob([yourFile], { type: mimeType }); A Blob (binary large object) is a universally recognized way to store and transfer files of any type, so hopefully this solves your problem...

[@user-eo9kc5fs7o]

@@OpenJavaScript when i send it it give me missing content-type boundary

[@patshalaaa]

can we send multiple images ?

[@patshalaaa]

use multer please to demonstrate how we can crop each image and send to to server using multer

[@newworld4252]

Lol this is very advanced.. let me keep scrolling to my learning level 😢