JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.1/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.1/croppie.min.js"></script>
<div class="demo-wrap upload-demo">
  <div class="container">
    <div class="grid">
      <div class="col-1-2">
        <strong>Upload Example (with exif orientation compatability)</strong>

        <div class="actions">
          <a class="btn file-btn">
            <span>Upload</span>
            <input type="file" id="upload" value="Choose a file" accept="image/*" />
          </a>
          <button class="upload-result">Result</button>
        </div>
      </div>
      <div class="col-1-2">
        <div class="upload-msg">
          Upload a file to start cropping
        </div>
        <div class="upload-demo-wrap">
          <div id="upload-demo"></div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$uploadCrop = $('#upload-demo').croppie({
  enableExif: true,
  viewport: {
    width: 200,
    height: 200,
    type: 'circle'
  },
  boundary: {
    width: 300,
    height: 300
  }
});
$(document).on("change", "[type=file]", function() {
  var input = this
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $uploadCrop.croppie('bind', {
        url: e.target.result
      });
      $(input).replaceWith($(input).clone())
    }
    reader.readAsDataURL(input.files[0]);
  }
})