Sending a form using the FormData object - JavaScript Tutorial
HTML-код
- Опубликовано: 1 окт 2024
- 👉 Source code: openjavascript...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjava...
⚡ 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.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript
Thanks for watching!
👉 Source code: openjavascript.info/2022/04/26/post-form-data-using-javascripts-fetch-api/
Superb! Just what i was looking for!😊
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!
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.
Superb, and noobs friendly!
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.
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/
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.
Thank you very much for me is very useful and it´s very god to know new ways to program.
Thank you! I'm glad you enjoyed the video :)
is formdata still used or there is something better?
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 (ruclips.net/video/7BbL2PZ5394/видео.html).
@@OpenJavaScript thank you so much for replay
Great job 🎉🎉..You explained it in a very easy way.. thank you..❤
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.
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
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!
@@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?
@@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 :)
Lol this is very advanced.. let me keep scrolling to my learning level 😢
can we send multiple images ?
use multer please to demonstrate how we can crop each image and send to to server using multer
I wasn't able to get for (item of blah) to work
How was the server made or was it nodejs?
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/
When i send the form with images it gives me this error unsupported media
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...
@@OpenJavaScript when i send it it give me missing content-type boundary
thank you stranger on the net ! that was very useful :)
very nice, thank you!
Really clear - thanks!
thank you very much
THANK YOU
GOOD!!!!!1
Thanks!
Great explanation . Can show the server side code as well ?
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: ruclips.net/video/TZvMLWFVVhE/видео.html