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 = e.target.webkitEntries; // Get all dropped items as FS API entries.
    console.log('entries:', entries);

    [].forEach.call(entries, function(entry) {

        console.log('entry:', entry);
        console.log('url:'+entry.toURL());
        // Copy the entry into our local filesystem.
        entry.copyTo(fs.root, null, function(copiedEntry) {
            console.log('copiedentry',copiedEntry.toURL());
            $('input#f').after('<img src="' + copiedEntry.toURL() + '"/>');
        }, function(e) {
            console.log('Error', e)
        });
        
    });
}

document.querySelector('input[type="file"]').addEventListener('change', onChange);

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