JSFiddle - React, Tailwind, and code Playground

by filepicker

HTML

<script src="//api.filepicker.io/v0/filepicker.js"></script>
<input type="filepicker-dragdrop"
data-fp-button-text="Pick a file"
data-fp-drag-text="Or even drop something here"
data-fp-drag-class="dragElement"
data-fp-mimetypes="text/plain"
data-fp-option-modal="true"
name="dragDrop"
id="dragDrop"/>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button {
    margin: 30px 0 30px 10px;
    display: inline-block;
    padding: 4px 10px 4px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer
    background-color: #05C;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: white;
    background-color: #0074CC;
    background-image: -moz-linear-gradient(top, #08C, #05C);
    background-image: -ms-linear-gradient(top, #08C, #05C);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#05C));
    background-image: -webkit-linear-gradient(top, #08C, #05C);
    background-image: -o-linear-gradient(top, #08C, #05C);
    background-image: linear-gradient(top, #08C, #05C);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
    border-color: #05C #05C #003580;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

JavaScript

filepicker.setKey("GET_A_FILEPICKER_APIKEY_AT_FILEPICKER.IO");

document.getElementById('dragDrop').onchange = function() {
    console.log(document.getElementById('dragDrop').value);
    
    //pardon the jquery
    $(".dragElement span").click();
}