JSFiddle - React, Tailwind, and code Playground

by samu_eyes

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",
  previewCanvas:true,
  add: function(e, data) {
    data.context = $('<p class="file">')
      .append($('<a target="_blank">').text(data.files[0].name))
      .appendTo(document.body);
    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);
  }
});