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

Superb! Just what i was looking for!😊

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.

Really clear - thanks!

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.

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

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

very nice, thank you!

THANK YOU

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

thank you very much

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

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

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/

GOOD!!!!!1

@OpenJavaScript

Жыл бұрын

Thanks!

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: kzread.info/dash/bejne/ho6qr66Qdrm8mKg.html

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/

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

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 (kzread.info/dash/bejne/aXaWrpSJipiZaZc.html).

@m3hdim3hdi

Жыл бұрын

@@OpenJavaScript thank you so much for replay

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

can we send multiple images ?

@patshalaaa

6 ай бұрын

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

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.