JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="drop" class="drop-area ui-widget-header">
    <div class="drop-area-label">Drop image here</div>
</div>
<br />
<form id="upload">
    <input type="file" name="file" id="file" multiple="true" accepts="image/*" />
    <ul class="gallery-image-list" id="uploads">
        <!-- The file uploads will be shown here -->
    </ul>
</form>
<div id="listTable"></div>

CSS

#uploads {
      display:block;
      position:relative;
  } 

  #uploads li {
      list-style:none;
  }

  #drop {
      width: 90%;
      height: 100px;
      padding: 0.5em;
      float: left;
      margin: 10px;
      border: 8px dotted grey;
  }

  #drop.hover {
      border: 8px dotted green;
  }

  #drop.err {
      border: 8px dotted orangered;
  }

JavaScript

var display = $("#uploads");
var droppable = $("#drop")[0];
$.ajaxSetup({
    context: display,
    contentType:"application/json",
    dataType:"json",
    beforeSend: function (jqxhr, settings) {
        var file = JSON.parse(decodeURIComponent(settings.data.split(/json=/)[1]));
        var progress = $("<progress />", {
                "class": "file-" + (!!$("progress").length ? $("progress").length : "0"),
                "min": 0,
                "max": 0,
                "value": 0,
            "data-name": file.name
        });
        this.append(progress, file.name + "<br />");
        jqxhr.name = progress.attr("class");
    }
});

var processFiles = function processFiles(event) {
    event.preventDefault();
    var files = event.target.files || event.dataTransfer.files;
    var images = $.map(files, function (file, i) {
        var reader = new FileReader();
        var dfd = new $.Deferred();
        reader.onload = function (e) {
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        return dfd.then(function (data) {
            return $.ajax({
                type: "POST",
                url: "/echo/json/",
                data: {
                    json: JSON.stringify({
                            "file": data,
                            "name": this.name,
                            "size": this.size,
                            "type": this.type
                    })
                },
                dataType: "json",
                xhr: function () {
                    var uploads = this.context;
                    var progress = this.context.find("progress:last");
                    var xhrUpload = $.ajaxSettings.xhr();
                    if (xhrUpload.upload) {
                        xhrUpload.upload.onprogress = function (evt) {
                            progress.attr({
                                    "max":...