0

I have an upload input. With the following I am creating the preview when I select some files to upload. But I need a reverse, be able to click on a preview to remove it but I am not sure how to approach it.

var imagesPreview = function(input, placeToInsertImagePreview) {
  if (input.files) {
    var filesAmount = input.files.length;
    for (i = 0; i < filesAmount; i++) {
      var reader = new FileReader();
      reader.onload = function(event) {
        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass("img-fluid").wrap('<div class="col crop_img"></div>');
      }
      reader.readAsDataURL(input.files[i]);
    }
  }
};

$('#usp-files').on('change', function() {
  imagesPreview(this, 'div.gallery');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
img {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  display: block;
  margin-right: 5px;
  float: left;
}
</style>
<div class="usp-input-wrap"> 
    <div class="input-group mb-3">
        <div class="custom-file">
            <input name="usp-files[]" id="usp-files" type="file" maxlength="999999" data-required="false" placeholder="Upload your images here" class="usp-input usp-input-files my_images select-file multiple custom-file-input" multiple="multiple">
            <label for="usp-files" class="usp-label usp-label-files custom-file-label">Upload your images</label>
        </div>
    </div>
</div>
<div class="gallery row"></div>
rob.m
  • 9,843
  • 19
  • 73
  • 162
  • 1
    https://stackoverflow.com/questions/32062876/removing-file-from-multiple-files-uploader-on-button-click-when-using-html5-file - The file list of HTML5 file input is readonly, so when trying to remove a file from it you won't be allowed. What you need to do is maintain a separate array list (JSON array as per the example). – Ctznkane525 Jun 28 '18 at 01:10
  • @Ctznkane525 oh wow, that also has the drop in bit. Thanks! Mark it as a duplicate if you wish or I'll remove it – rob.m Jun 28 '18 at 01:12

0 Answers0