0

I'm trying to make a multi-step form using HTML5 and javascript. What I'm trying to do is for each step, save form data to localStorage and then at the final step, retrieve the data back from localStorage and assign those data to hidden fields. For text data I have no problem doing that but for file input, I cannot save it to localStorage after file input field has been stringtified. I did some more research and came up with constructing a Blob object and then attach that Blob to a hidden file input but people say for security reasons, that is not possible. Any ideas on how I can do this or a different solution? I'm new to this.

Here's what I've tried:

$(document).on("click", ":submit", function(e) {
    var fileData = ($($file).val())
    var stringtified = JSON.stringify(fileData);
    localStorage.setItem('savedFile', stringtified);
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
fatg
  • 519
  • 7
  • 23
  • You can't stringify binary file data. You can however base64 encode it to a string and store that, which the duplicate I marked covers. However note that you cannot put that file data back in to a file input as the browsers security measures prevent programmatic access to the file src. – Rory McCrossan Feb 23 '17 at 07:58
  • @RoryMcCrossan I have just read the duplicate but it looks like that's not what I want. I need a solution to reconstruct a file input from a previous form step. Is it possible to somehow duplicate the file input field data so that I can put that in another form? – fatg Feb 23 '17 at 08:04
  • `I need a solution to reconstruct a file input from a previous form step` Sorry, that's not possible. You could instead send the file as a base64 encoded string in a `` and then re-build it on the server. – Rory McCrossan Feb 23 '17 at 08:07

0 Answers0