Saving Javascript FormData() Object on client side

Question

I have a html page which contains a form element with some text and file input elements.
This from is submitted with an ajax call to the server using a method suggested here: How can I upload files asynchronously?
As you may see in the referenced page from the above link, the FormData() object is used as a container for inputed data and I have done the job successfully.
But now we want to create a new page that have these html elements, save the text and file inputs on client side (Cookie or Local Strorage or . . .) and do the ajax submit later on another page.
I wasn`t able to save new FormData() in either cookie or local storage; what got saved is a small string:"[object FormData]" instead of entered file and strings.
I also tried using JSON.stringify() with no success; it just returned an empty JSON("{}").
(the code is using jQuery selector)

var postData = new FormData($(form)[0]);
// var sPostedData = JSON.stringify(postData); // returns: "{}"
var myStorage = window.localStorage; // returns: "[object FormData]"
myStorage.setItem("contentOrder", postData);

Please help, how should I save this object on my client-side?

localStorage only stores strings. Also you can't populate a file input with script. You need to re-think this process flow...especially if working with larger files since localStorage also has size limits — charlietfl
– charlietfl, Commented May 1, 2018 at 12:15
We have a shop web site and we what to add ability for customers to buy before login. I want to keep the user inputs until he logged in and then do the submit. — Ehsan Abidi
– Ehsan Abidi, Commented May 1, 2018 at 12:37
Could do the upload and store in session or temp file then do something else with it once logged in — charlietfl
– charlietfl, Commented May 1, 2018 at 12:40

nutic · Accepted Answer · 2018-05-01 12:38:27Z

1

To get the file from form data use formData.get('file') where file is the name of an input. The returned object will be of type Blob (see how to get its content).

The complete example can be found in this fiddle: https://jsfiddle.net/skm5m467/1/

answered May 1, 2018 at 12:38

nutic

4572 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Saving Javascript FormData() Object on client side

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related