JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<div class="file-upload">

    <div id="uploader" onclick="$('#myfile').click()" class="noDrop">
        <span id='click_or'>Click or drag and drop<br>to select an image</span>
        <img id="bg_img" src="https://i.imgur.com/j0KblIu.png">
    </div>

    <input type="file" name="myfile" id="myfile" accept="image/*" class="noDrop">
    <input type="text" name="url" id="url" placeholder=" ... or paste URL to image"
      onkeypress='validate(event)' autocomplete="off">
    <span class="file_name"></span>

    <button type="button" id="cancel_file">Cancel</button>
    <button type="button" id="cancel_url">Cancel</button>

    <button type="submit" name='upload_file' id="upload_file">Upload</button>
    <button type="submit" name='crop_file' id="crop_file">Crop</button>

    <button type="submit" name='upload_url' id="upload_url">Upload</button>
    <button type="submit" name='crop_url' id="crop_url">Crop</button>

    <span class="url_name"></span>

    </div>

CSS

#uploader {
  position: relative;
  width: 250px; 
  height: 250px;
  line-height: 250px;
  background: transparent; 
  border: 2px dashed #e8e8e8;
  cursor: pointer;
  color: #777;
  font-family: 'Arial';
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px white;
  -webkit-transition: text-shadow 0.1s linear;
    -moz-transition: text-shadow 0.1s linear;
    -ms-transition: text-shadow 0.1s linear;
    -o-transition: text-shadow 0.1s linear;
    transition: text-shadow 0.1s linear;
  overflow-x: hidden; 
  overflow-y: hidden; 
  opacity: 1;
}
#uploader:hover {
  color: #999;}
#myfile {display: none;}
#click_or {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#bg_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-color: #eee;
}
#uploader.disabled_ {
  cursor: default;
}
img.disabled_ {
  object-fit:contain;
  image-rendering: pixelated;
}
#cancel_file, #cancel_url 
  {display: none;}

.file_name {
  font-family: 'Arial';
  font-weight: bold;
  font-size: 13px;
  color:#555;
}

button[type='submit'] {
  display: none;
}

JavaScript

$(document).bind('drop dragover', function (e) {
      e.preventDefault();
    });

    // Adding filename under preview //////////////////////////
    jQuery(function($) {
    $('input[type="file"]').change(function() {
      if ($(this).val()) {
        error = false;

        var filename = $(this).val();
        filename = filename.replace(/.*[\/\\]/, '');

        $(this).closest('.file-upload').find('.file_name').html(filename);

        if (error) {
          parent.addClass('error').prepend.after(
          '<div class="alert alert-error">' + error + '</div>');
    }}});
    });////////////////////////////////////////////////////////

    var imageLoader = document.getElementById('myfile');
      imageLoader.addEventListener('change', handleImage, false);

    // Select or drag and drop //
    function handleImage(e) {
      var reader = new FileReader();
      reader.onload = function (event) {
          $('#uploader').removeAttr('onclick').addClass('disabled_');
          $('#bg_img').addClass('disabled_').attr('src', event.target.result);
          $('#click_or').hide();
          $('#url').hide();
          $('.file_name').show();

          $('#cancel_file').show();
          $('#upload_file').show();
          $('#crop_file').show();
      }
      reader.readAsDataURL(e.target.files[0]);}

      $('#cancel_file').click(function(e){
          $('#myfile').val("");
          $('#uploader').attr('onclick', "$('#myfile').click()")
            .removeClass('disabled_');
          $('#bg_img').removeClass('disabled_')
            .attr('src', "https://i.imgur.com/j0KblIu.png");
          $('#click_or').show();
          $('#url').show();
          $('.file_name').hide();

          $('#cancel_file').hide();
          $('#upload_file').hide();
          $('#crop_file').hide();
      });

      // Paste URL //
      $("#url").bind('paste keyup', function(event) {
        var _this = this;
        setTimeout( function() {
          var text =...