Remove multiple input file upload image preview

Question

In my code I can make a preview image and delete image. However I did not delete the file (image) that was selected and only deleted the preview image.

$(function() {
  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) {
          var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class', 'prevImage').appendTo(placeToInsertImagePreview);
          imgElement.wrap('<div class="img-preview"></div>');
          imgElement.parent().append('<i class="remove-image-preview fe fe-x-circle"></i>');
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });
  
  $(document).on('click', '.remove-image-preview', function() {
    $(this).parent('.img-preview').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
  <input type="file" name="fields[postImage][]" id="gallery-photo-add" multiple>

  <div class="gallery row mt-3"></div>
  <!-- this preview image -->

**this answer** https://stackoverflow.com/a/16222877/1475257 — Abdelrahman Gobarah, Feb 03 '20 at 13:43

score 0 · Answer 1 · answered Feb 03 '20 at 13:48

0

You need to clear the value of input

$( "form" ).on('click', '.remove-image-preview', function(){
      $(this).parent('.img-preview').remove();
      $('#gallery-photo-add').val('');
});

answered Feb 03 '20 at 13:48

Seba

1

this delete all image – Hyper Core Feb 03 '20 at 14:16
you can do something like this: self = this; $.each($('#gallery-photo-add')[0].files, function( index, value ) { if ( value.name === $('.asr').closest('.img-preview').find('img').data('name') ) { console.log($(self).closest('.img-preview').find('img')); } }); and on the top add data-name to the img – Seba Feb 03 '20 at 15:19

score 0 · Answer 2 · answered Feb 03 '20 at 13:56

Your remove icon is not visible. I have change icon to span for display purpose and click on "X" you can remove the preview of individual image.

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) {
          var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class', 'prevImage').appendTo(placeToInsertImagePreview);
          imgElement.wrap('<div class="img-preview"></div>');
          imgElement.parent().append('<span class="remove-image-preview">X</span>');
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });

  $(document).on('click', '.remove-image-preview', function() {
    $(this).parent('.img-preview').remove();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
  <input type="file" name="fields[postImage][]" id="gallery-photo-add" multiple>

  <div class="gallery row mt-3"></div>

Remove multiple input file upload image preview

2 Answers2