JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

<input id="f" type="file">

JavaScript

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var fs = null; // Cache filesystem for later.

function onChange(e) {
    e.stopPropagation();
    e.preventDefault();

    var entries = $(this)[0].webkitEntries;
    if (entries.length === 1) {
        var entry = entries[0]

        // Copy the entry into our local filesystem.
        entry.copyTo(fs.root, null, function(copiedEntry) {
            
            $('input#f').after('<img src="' + copiedEntry.toURL() + '"/>');
        }, function(e) {
            console.log('Error', e)
        });
    }
    else {
        console.error('only 1 file at a time can be submitted');
    }
}

$('input[type="file"]').on('change', onChange);

window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1204, function(fileSystem) {
    fs = fileSystem;
}, function(e) {
    console.log('Error', e);
});