Image not getting empty when cancel is clicked on file input?

Question

Im using Croppie plugin for this crop image function. Input text field becomes empty and the image is not getting empty when a user clicks the cancel on file input. I want to remove the image too when a user clicks the cancel button on file input. DEMO

HTML

<form action="test-image.php" id="form" method="post">
  <input type="file" id="upload" value="Choose a file">
  <div id="upload-demo"></div>
  <input type="hidden" id="imagebase64" name="imagebase64">
  <a href="#" class="upload-result">Send</a>
</form>

JS

$(document).ready(function() {
  var $uploadCrop;

  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $uploadCrop.croppie('bind', {
          url: e.target.result
        });
        $('.upload-demo').addClass('ready');
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  $uploadCrop = $('#upload-demo').croppie({
    viewport: {
      width: 200,
      height: 200,
      type: 'circle'
    },
    boundary: {
      width: 300,
      height: 300
    }
  });
  $('#upload').on('change', function() {
    readFile(this);
  });
  $('.upload-result').on('click', function(ev) {
    $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'original'
    }).then(function(resp) {
      $('#imagebase64').val(resp);
      $('#form').submit();
    });
  });   
});

Answer 1

Well, this might be a typical scenario, as you cannot bind click event to cancel button of file-upload as the result of the file dialog is not exposed to the browser . So what I would suggest is, write an onchange event to file upload element and check if its value is empty . If yes, then reset the croppie instance after destroying it. Here's the updated code and working Fiddle .

HTML

<form action="test-image.php" id="form" method="post">
  <input type="file" id="upload" value="Choose a file" onchange="clearImage(this)" />
  <div id="upload-demo"></div>
  <input type="hidden" id="imagebase64" name="imagebase64">
  <a href="#" class="upload-result">Send</a>
</form>

JS

var $uploadCrop;
var opts = {
  viewport: {
    width: 200,
    height: 200,
    type: 'circle'
  },
  boundary: {
    width: 300,
    height: 300
  }
};

//change function.    
function clearImage(ctrl) {
  if ($(ctrl).val() == "") {
    $('#upload-demo').croppie('destroy');
    $uploadCrop=$('#upload-demo').croppie(opts);
  }
}

$(document).ready(function() {
  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $uploadCrop.croppie('bind', {
          url: e.target.result
        });
        $('.upload-demo').addClass('ready');
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $uploadCrop = $('#upload-demo').croppie(opts);

  $('#upload').on('change', function() {
    readFile(this);
  });
  $('.upload-result').on('click', function(ev) {
    $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'original'
    }).then(function(resp) {
      $('#imagebase64').val(resp);
      $('#form').submit();
    });
  });

});

Answer 2

I realize that this post already has an answer selected but there is a much easier way to detect if the user cancels the file select dialog window.

In your onchange function you can use the FileReader constructor with a simple if statement to catch whether or not the user has selected a file. Basically, the FileReader constructor lets your web application read the contents of the file the user selects using File or Blob objects.

All you have to do is call a simple if statement to check whether the file uploaded could be read by the FileReader . In this case if the user hits the cancel button on the file select dialog window, the file cannot be read.

Below is an example of how you can implement this. Although the example below is in JS it can be used inside a jQuery function just fine.

input.onchange = function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.readAsDataURL(file);

    if(reader) {
        // A FILE WAS SELECTED.
    } else {
        // THE USER CANCELLED THE FILE SELECTION.
    }
}

You can read more about the FileReader Constructor to learn more about its functionality and browser support.

This was the simplest solution to this issue that I could find. I hope it helps anyone else having this issue.

Answer 3

THis would help you

 $( document ).ready(function() { var $uploadCrop; function readFile(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $uploadCrop.croppie('bind', { url: e.target.result }); $('.upload-demo').addClass('ready'); } reader.readAsDataURL(input.files[0]); } } $uploadCrop = $('#upload-demo').croppie({ viewport: { width: 200, height: 200, type: 'circle' }, boundary: { width: 300, height: 300 } }); $('#upload').on('change', function () { readFile(this); }); $('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'original' }).then(function (resp) { $('#imagebase64').val(resp); $('#form').submit(); }); }); $('.reset').on('click', function(){ $('input').val(''); $('.cr-viewport').html(''); $('.cr-image').attr('src',''); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="test-image.php" id="form" method="post"> <input type="file" id="upload" value="Choose a file"> <div id="upload-demo"></div> <input type="hidden" id="imagebase64" name="imagebase64"> <a href="#" class="upload-result">Send</a> </form> <a class="reset">cancel</a>