How to reload file selected in <input type="file">

Viewed 772

I'm working on a tool that loads SVG files and converts them to JSON.

The form looks like this:

<div>
    <input type="file" id="filepicker" accept="image/svg+xml,.svg">
    <button type="button" id="load-file">Load file</button>
</div>

Loading:

function loadFile () {
    var filepicker = $('#filepicker')[0];
    if (!filepicker.files.length) return;
    var reader = new window.FileReader();
    var file = filepicker.files[0];
    reader.onload = function (e) {
        var txt = e.target.result;
        processSVG(txt);
    };
    reader.readAsText(file)
}

$('#load-file').on('click', loadFile);
$('#filepicker').on('change', loadFile);

This works by automatically loading a file the user selected. But I'd like to have the Load button refresh the file, i.e. load it again from disk. The use case is that you have the SVG file open in Inkscape and save it, then click the Load button and it would show in the browser.

For some reason, clicking the Load button does not reload the file reliably - I had it work a few times, but other times it just refuses to do anything, as if the file was cached. Is this possible, and if so, how?

(I'm aware this may not be possible on Windows with their file locks, that's okay. I need it to work on Linux and Mac)

0 Answers
Related