default value with a twist

Question

From reading Stack and the web I gather you can't prepopulate this option for security reasons. However I have a number of page forms that users need to fill in. By keeping other variables as session variales I can get the pages to remember their previous entries and redisplay them when that page is called back, text boxes, buttons etc. I haven't worked out how to do the same with the filename input form component. Any ideas if there is a workaround?

Answer 1

You will need to do the logic server side to display a thumb of the uploaded image if an image has already been uploaded and provide an option to upload a new one, at which point you would displaying an empty file input. Something like...

if(sessioncontains("uploaded")) {
    out << "<img src=\"" + (sessionget("uploaded")->thumb) + "\"/>";
    out << "<label>Upload a new image</label>";
} else {
    out << "<label>Upload an image</label>";
}
out << "<input type=\"file\"/>";

Edit so you want to save the value of the fields before they are submitted, you could just post them off to the server behind the scenes. How can I upload files asynchronously?. Or you could serialize them to window.localStorage as a data URL (beware of storage limits).

Javascript...

function retrieveFiles() {
    var files = [];
    var json = window.localStorage.getItem("files");
    if(json.length) {
        try {
            files = JSON.parse(json);
        } catch(ex) {
            console.err("There was an error", files, window.localStorage);
        }
    }
    return files;
}

function storeFiles(files) {
    window.localStorage.setItem("files", JSON.stringify(files));
}

$(function() {

    var arr = retrieveFiles();

    $("#file").on("change", function() {
        var files = $(this).prop("files");
        var reader = new FileReader();
        reader.onload = function(e) {
            arr.push(e.target.result);
            storeFiles(arr);
        }
        for(var i = 0; i < files.length; ++i) {
            reader.readAsDataURL(files[i]);
        }
    });

    $("form").on("submit", function() {
        // Post files array arr by AJAX
    });

});

HTML...

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" multiple/>
    <button type="submit">Submit</button>
</form>