JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.lpology.com/code/ajaxuploader/SimpleAjaxUploader.js"></script>
<ol style="float: right; font-weight: bold">
<li>Scroll to the bottom</li>
<li>Hover the [+] button</li>
<li>Scroll to the top</li>
<li>I am now an <del>airplane</del> <add>file input</add></li>
</ol>
<ul>
<li class="li">
<img class="img" src="http://www.nioutaik.fr/images/loltrucs/lolcat/cat7.jpg" />
</li>
<li class="li">
<img class="img" src="http://obeythekitty.com/wp-content/uploads/2015/01/lolcat_airplane.jpg" />
</li>
<li class="li">
<img class="img" src="http://forum.sfr.fr/t5/image/serverpage/image-id/7040i98E4F4CBD4FBA111?v=mpbl-1" />
</li>
<li class="li">
<div id="upload-btn" class="img" style="height: 100px; font-size: 90px; text-align: center; border: 1px solid #1A1A1A; cursor: pointer">+</div>
</li>
</ul>
CSS
ul {
width: 200px;
height: 290px;
overflow-x: hidden;
}
li.li {
list-style-type: none;
padding: 5px;
}
li.li .img {
width: 150px;
height: auto;
}
JavaScript
var uploader = new ss.SimpleUpload({
button: 'upload-btn', // HTML element used as upload button
url: '/PathTo/UploadHandler', // URL of server-side upload handler
name: 'uploadfile' // Parameter name of the uploaded file
});