How to save input file type information in sessionStorage?

Question

I have this code for file saving browsing, specifically image..

I'm aware that you can't set file programmatically, you have to go to folder popups in order to select file for security reason. So my problem is, I want the file to be saved in sessionStorage so that when the users reload the page, they don't need to reselect the image.

I'm doing this approach..

var fileInput = document.getElementById('file');
sessionStorage.input = JSON.stringify(fileInput);

But when I reload the page, it's not working anymore with..

formData.append(fileInput.files[0].name, sessionStorage.input);

I tried to do console.log(sessionStorage.inputFile) but it only printed '[object File]'

Answer 1

You can use below code to save image data in session storage

var file = element.files[0];
var reader = new FileReader()
reader.onload = function(base64) {
    localStorage["file"] = base64;
}

//Store it in session storage
var img_base64 = localStorage["file"];

var base64_arr = img_base64_data.split(",");
var img_format = base64_arr[0].split(";")[1];
var img_content = base64_arr[1];

var file = new File([img_content], "<file name>", {type: img_format});

// get file as file.files[0] and store it in session storage