1

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?

10 Rep
  • 2,217
  • 7
  • 19
  • 33
Ehsan Abidi
  • 911
  • 9
  • 24
  • 4
    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 May 01 '18 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 May 01 '18 at 12:37
  • 1
    Could do the upload and store in session or temp file then do something else with it once logged in – charlietfl May 01 '18 at 12:40

1 Answers1

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/

nutic
  • 457
  • 2
  • 12