JSFiddle - React, Tailwind, and code Playground

by filepicker

HTML

<script src="//api.filepicker.io/v1/filepicker.js"></script>
<div id="exampleDropPane" style="width: 100px; border: 1px solid black">HI<br/>HI
</div>

JavaScript

filepicker.makeDropPane($('#exampleDropPane')[0], {
    multiple: true,
    dragEnter: function() {
        $("#exampleDropPane").html("Drop to upload").css({
            'backgroundColor': "#E0E0E0",
            'border': "1px solid #000"
        });
    },
    dragLeave: function() {
        $("#exampleDropPane").html("Drop files here").css({
            'backgroundColor': "#F6F6F6",
            'border': "1px dashed #666"
        });
    },
    onSuccess: function(fpfiles) {
        $("#exampleDropPane").text("Done, see result below");
        $("#localDropResult").text(JSON.stringify(fpfiles));
    },
    onError: function(type, message) {
        $("#localDropResult").text('('+type+') '+ message);
    },
    onProgress: function(percentage) {
        $("#exampleDropPane").text("Uploading ("+percentage+"%)");
    }
});