JSFiddle - React, Tailwind, and code Playground

by Yuriy

HTML

<div id="el" class="js-fileapi-wrapper">
    <input type="file" multiple />
</div>

<div id="log"></div>

CSS

</style>
<script>
var FileAPI = { debug: true, flashUrl: 'http://mailru.github.io/FileAPI/FileAPI.flash.swf' };
</script>
<script src="http://mailru.github.io/FileAPI/dist/FileAPI.min.js"></script>
<style>

JavaScript

FileAPI.event.on(el, 'change', function (evt){
    var files = FileAPI.getFiles(evt);
    
    console.log(files);
    log.innerHTML = '';
    
    FileAPI.getInfo(files[0], function (err, info){
        console.log('FileAPI.getInfo:', err, info);
    });
    
    FileAPI.upload({
        url: 'http://rubaxa.org/FileAPI/server/ctrl.php',
        files: { data: files },
        filecomplete: function (err, xhr, file){
            log.innerHTML += file.name+'...uploaded<br/>';
        }
    });
});