JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<input type="file" id="choose" multiple="multiple"   />
<br>
<div id="uploadPreview" >
    <div id="imageUpload"></div>
    <img src="" id="uploadPreview1" />
</div>

JavaScript

$(function () { 
function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxw = 600;
    var maxh = 600;

    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (  h > maxh || w > maxw) {
                alert("Height and width is bigger then over max criteria pls select image max height and width=2024X2024");
            } else {

                $('#uploadPreview').html('<img  id="myImage" src="' + image.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n );
                $('#myImage').Jcrop({
                    onChange: showPreview,
                    onSelect: showPreview,
                    aspectRatio: 1
                });
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}

$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});


function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;
var thumbWidth = 145, thumbHeight = 190;
    $('#uploadPreview1').css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px',
        background: url(image.src)
    });
}

});