Sending a form using the FormData object - JavaScript Tutorial

Подписаться 10 тыс.

Просмотров 38 тыс.

50% 1

👉 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

Опубликовано:

21 сен 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@OpenJavaScript Год назад

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

@mildmildfire 10 месяцев назад

Superb! Just what i was looking for!😊

@MegaJohn144 10 месяцев назад

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!

@dailydose8197 3 месяца назад

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

@kartikeyrana3736 Год назад

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

@Khalid-sr4zo 2 месяца назад

very nice, thank you!

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

@nguyenviet908 2 месяца назад

thank you very much

@DubPlayer1 4 месяца назад

THANK YOU

@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 :)

@modernNeanderthal800 10 месяцев назад

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

@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 :)

@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/

@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/

@nevestunga955 Год назад

GOOD!!!!!1

@OpenJavaScript Год назад

Thanks!

@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 (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7BbL2PZ5394.html).

@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

@modernNeanderthal800 10 месяцев назад

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.

@patshalaaa 7 месяцев назад

can we send multiple images ?

@patshalaaa 7 месяцев назад

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

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TZvMLWFVVhE.html