JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<script src="https://blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="https://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<input id="fileupload" type="file" name="files[]" data-url="//jquery-file-upload.appspot.com/" multiple>

CSS

.file {
   position: relative;
   background: linear-gradient(to right, lightblue 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition:all 1s ease;
}
 .file.done {
   background: lightgreen;
}
 .file a {
   display: block;
   position: relative;
   padding: 5px;
   color: black;
}

JavaScript

$("#fileupload").fileupload({
  dataType: "json",
  add: function (e, data) {
    //data.context = $('<p class="file">')
    //  .append($('<a target="_blank">').text(data.files[0].name))
    //  .appendTo(document.body);
    data.context = $("<button></button>")
      .text("Upload")
      .appendTo(document.body)
      .click(function () {
        //data.context = $("<p></p>").text("Uploading...").replaceAll($(this))
        data.submit()
      })
    //data.submit();
  },
  progress: function (e, data) {
    var progress = parseInt((data.loaded / data.total) * 100, 10)
    data.context.css("background-position-x", 100 - progress + "%")
  },
  done: function (e, data) {
    data.context
      .addClass("done")
      .find("a")
      .prop("href", data.result.files[0].url)
  },
})