JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css">
<input type="file" />
<img class="crop"  />
<button  type="submit" >Upload</button>
<img  id="img" src="#"  />

JavaScript

var cropCoords,
    file,
    uploadSize = 360,
    previewSize = 500;

$("input[type=file]").on("change", function(){
    file = this.files[0];
    readFile(file, {
        width: previewSize,
        height: previewSize
    }).done(function(imgDataUrl, origImage) {
        $("input, img, button").toggle();
        initJCrop(imgDataUrl);
    }).fail(function(msg) {
        alert(msg);
    });
});

$("button[type=submit]").on("click", function(){
    $(this).text("Uploading...").prop("disabled", true);

    readFile(file, {
        width: uploadSize,
        height: uploadSize,
        crop: cropCoords
    }).done(function(imgDataURI) {
        var data = new FormData();
        var blobFile = dataURItoBlob(imgDataURI);
        data.append('file', blobFile);
        
        
      
    });
});

/*****************************
show local image and init JCrop
*****************************/
var initJCrop = function(imgDataUrl){
    var img = $("img.crop").attr("src", imgDataUrl);
    
    var storeCoords = function(c) {
        cropCoords = c;
    };
    
    var w = img.width();
    var h = img.height();
    var s = uploadSize;
    img.Jcrop({
        onChange: storeCoords,
        onSelect: storeCoords,
        aspectRatio: 1,
        setSelect: [(w - s) / 2, (h - s) / 2, (w - s) / 2 + s, (h - s) / 2 + s]
    });
};

/*****************************
Read the File Object
*****************************/
var readFile = function(file, options) {
    var dfd = new $.Deferred();
    var allowedTypes = ["image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/bmp"];
    if ($.inArray(file.type, allowedTypes) !== -1) {
        //define FileReader object
        var reader = new FileReader();
        var that = this;

        //init reader onload event handlers
        reader.onload = function(e) {
            var image = $('<img/>')
                .load(function() {
                    //when image is fully loaded
                    var newimageurl =...