Using FormData Objects Effectively 

Hey, thank you for the clarification there, my confusion has been vanished 👍👍👍. Im a bit confused earlier..

Thank you

thanks for the clarification, Steve, was stuck at this point... great channel, btw!

Make sure you have a look at the jQuery rehab playlist.

Yes, saw that and have watched a couple already.

Glad to be back.

Almost makes them fun, right?

Yes. The FormData object is how I attach files to the Request object to upload them. - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JtKIcqZdLLM.html

It's not needed. Brain fart. Was thinking about fetch... promises... for await of when doing the conversion.

You can't look through the values inside prototype in the console. You need to loop through the collection returned by the fd.keys method to console.log them.

Thanks for mentioning that.

Brain fart. Was thinking about fetch... promises... for await of when doing the conversion.

Convert your array of objects into a single string using the JSON.stringify( ) method. Then you can pass it to the server as a single formdata field. I have a whole playlist of videos about AJAX/fetch that talk about uploading data and everything you need to know to do this. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7EKebb4VUYQ.html

@@SteveGriffith-Prof3ssorSt3v3 Thank you very much for the response. I'm gonna jump right into that playlist.

You *can* write your fetch calls like that but it is being converted into the Request, Headers, and Body objects. It is rare to build any site where you only have one fetch request. So, by using the proper objects and their methods to add or change values you get a much more manageable codebase. URLSearchParams is really intended to be used for working with the QueryString. I wouldn't pass a FormData object to the URLSearchParams. A FormData object can be passed directly to the fetch( ) method as the value for the body parameter. { method: 'POST', body: formData } The FormData object is capable of handling files too, images or other.

The ev variable holds the event object passed from the Event Listener created with addEventListener(). Every function that is called from an event listener will have the event object automatically passed in. Here is my playlist of videos about Events in JS - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EaRrmOtPYTM.html

@@SteveGriffith-Prof3ssorSt3v3Thanks a lot. Best EventListener tutorial I've seen.

these might help you: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JtKIcqZdLLM.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ubHIayJKhac.html

Closer if I use this: donated.forEach(function(fname) {if(fname === null || fname.trim() === "") { console.log(fname);}} ); Will return only the 5 fields in the form that have empty strings but donated.forEach(function(fname) {if(fname === null || fname.trim() === "") { donated.delete(fname);}} ); doesn't delete them from the formData array .. so close I think.. will try with filter too

Yeah - Finally - I just wasn't getting the dif between an Object/FormData and Array. Since FormData is (correct me as needed) an 'object' type the filter doesn't work on it. Also if I just convert it to a straight array using a 'for' with 'push' my filter on that also did not work as I was looking for. What was needed was to get an array 'from' my FormData object. Then I had an array of array pairs that let me filter out selectively by the 'value' of the key/value pairs. Yeah! That then allowed sending it back to original object/string pairs format(if needed). const gForm = new FormData(document.forms[1]) var gArray = []; for (const gField of gForm.entries()) {gArray.push (`${gField[0]}, ${gField[1]}`)}; yields a straight array ie ["key","value", "key", "value", ..] const aa2array = Array.from(gForm) yields an array of arrays ie [ ["key","value"] ["key","value"] ["key", "value"]...] const aa2filtered = aa2array.filter(([key, value]) => value === '3803'); filters out all but "3803" ie [["post_id","3803"]] const aa5filtered = aa2array.filter(([key, value]) => value !== ""); filtered out "" / empty string values ie only non empty string values [["key","value"]..] const backobject2 = Object.fromEntries(aa5filtered); turned back into object(strings) ie { key:"value", key:"value", key:"value" ..}

You got it. FormData, Object, and Array are different types of Objects and therefore have different properties and methods that are available. The FormData object also has three methods that you could use to get an array. keys( ) - an array of the names values( ) - an array of the values entries( ) - an array of arrays that each holds one name and one value.

FormData object can be used with any web server or server-side programming language.

jsonify? The content of my convertFD2JSON function doesn't have to be in a separate function but it the type of code that you would normally put in its own function so you could reuse it.

Formdata is still used

The file is in the code Gist linked to in the description. I have a play list about server-side NodeJS and another on Express. Here is a tutorial from the NodeJS playlist explaining how it was built - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UMKS6su8HQc.html

@@SteveGriffith-Prof3ssorSt3v3 thank you so much sir

If your FormData object is empty then you missed a step somewhere.

@@SteveGriffith-Prof3ssorSt3v3 sir actually I am trying to add files so when I send the form data object to the server its empty so I tried doing it by sending it as the json request then parsing it in the server as u have told but the req body only contains the string fields of the form but only empty objects for file fields

@@huzaifashaikh6384 To attach the files you have to use POST not GET as the method. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JtKIcqZdLLM.html

The pinned comment addresses this.

@@SteveGriffith-Prof3ssorSt3v3 Oh, didn't notice, sorry about that!(

Just set the variable equal to null.

More about FormData object - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9mhyo1wQGeI.html Uploading files with fetch and FormData - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JtKIcqZdLLM.html

There is a FormData entries( ) method to do that.

@@SteveGriffith-Prof3ssorSt3v3 Wow! I was looking for such method related to FormData , didn't find, may be I will look again ... Thank you so much

. this was suppose to be on the next tuts , hahaha

Except you shouldn't send anything sensitive through querystring with GET. FormData will run with POST.

@@SteveGriffith-Prof3ssorSt3v3 My previous message got deleted for some reason. You can use URLSearchParams in a post body and set the content-type to urlencoded (this probably got my message deleted because the actual content-type has 3 W in it lol). That's actually the default behavior of a when doing a POST request

@@soniablanche5672 yes. And FormData is the Javascript representation of that

@@SteveGriffith-Prof3ssorSt3v3 No, FormData uses the multipart/form-data encoding not urlencoded. From MDN: The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch() or XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

@@soniablanche5672 sorry that is what I was referring to. The multipart/formdata encoding equivalent for a posted form in Javascript

It is its own type

@@SteveGriffith-Prof3ssorSt3v3 Understood. thank you. what is the best way to parse form data on the server? i.e. is there any method on `request` object such as `json()` or `text()` that extracts content of the body when the type is formdata?

@@jimshtepa5423 server side is very different syntax, even with NodeJS