JSFiddle - React, Tailwind, and code Playground

by Harish K

HTML

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css'>

<div class="upload_div_child">
    
    <div class="upload_div_child_body">

        <div class="upload_div_child_body_attachments">
            <div class="upload_div_child_body_attachments_image">
                <input type="file" form="feed-post" accept="image/x-png,image/gif,image/jpeg" id="image" onchange="previewFile()" name="image" class="upload_div_child_body_attachments_file_image"/>
                <input type="hidden" form="feed-post" name="image_cropped" id="image_cropped" />
                <i class="fa fa-image upload_div_child_body_attachments_image_icon"></i>
            </div>

        </div>
        
        <br/>
        
        <div class="upload_div_child_cropped_image"></div>
        
        <video width="100%" height="280" id="video-preview-div" style="display:none;" controls>
          <source src="mov_bbb.mp4" id="video_here">
        </video>
        
    </div>
    
</div>



<!-- Upload Page --------------------------------------------------------------------------------->
<div class="upload_div_image_crop_slide_up">
    <div class="upload_div_image_crop_slide_up_header">
        <i class="fas fa-times upload_div_image_crop_slide_up_header_cross "></i>
        <span class="upload_div_image_crop_slide_up_header_span">Crop Image</span>
        <i class="fas fa-check upload_div_image_crop_slide_up_header_tick salvar"></i>
    </div>
    <div class="upload_div_image_crop_slide_up_body">
        <div class="img-container" id="some"><img id="image_cropped_preview" /></div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.js'></script>

CSS

/* Upload Div Slide Up --------------------------------------------------------------------------------------------------------------------------------------*/
.upload_div_image_crop_slide_up {
    top: 100%;
    z-index: 10;
    text-align: center;
    height: 100%;
    position: fixed;
    padding-top: 0%;
    background: #060818;
    width: 100%;
    border-top: 0.1px solid white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.upload_div_image_crop_slide_up_header {
    padding: 2%
}
.upload_div_image_crop_slide_up_header_span {
    font-size: 24px;
    font-weight: 700;
    /*text-decoration: underline;*/
}
.upload_div_image_crop_slide_up_body {
    padding: 0 10px 0 0;
    text-align: left;
    overflow: scroll;
    height: 100%;
}
.cropper-container {
    max-height: 4000px;
}
.upload_div_image_crop_slide_up_header_cross {
    float: left;
    padding: 5px 15px;
    font-size: 22px;
    color: #dd0000;
}
.upload_div_image_crop_slide_up_header_tick {
    float: right;
    padding: 5px 15px;
    font-size: 22px;
    color: #3399ff;
}
.upload_div_child_cropped_image {
    text-align:center;
    /*height:400px;*/
}

JavaScript

var recorte = $('.img-container > img');
recorte.cropper({
  movable: false,
  zoomable: false,
  rotatable: false,
  scalable: false
});

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
   $('img').show(); 
   recorte.cropper('replace',reader.result);
   console.log("test");
  }
  if (file) {
      console.log("test2");
    reader.readAsDataURL(file);
    console.log("test3");
  } else {
      console.log("test4");
   recorte.cropper('replace','');
   console.log("test5");
  }
  
  $("#misc_overlay").css("display","block");
  $(".upload_div_image_crop_slide_up").animate({ top: "30%"}, 300);

}

$('.salvar').click(function(){
	temp = recorte.cropper('getCroppedCanvas').toDataURL();	
    $(".upload_div_child_cropped_image").prepend('<img src="' + temp  + '" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:90%; height:auto;padding:5%;" />')
	$("#image_cropped").val(temp);
	$(".upload_div_image_crop_slide_up").animate({ top: "100%"}, 300);
	$("#misc_overlay, .upload_div_child_body_attachments").css("display","none");
});

$(".upload_div_image_crop_slide_up_header_cross").click(function(){
    $(".upload_div_image_crop_slide_up").animate({ top: "100%"}, 300);
    $("#misc_overlay").css("display","none");
});