Multiple Image upload with previw and delete , Jquery and Javascript

Question

I have problem here. I have with this code multiple selected and preview image but I need to delete the selected image. For example, I select 5 images to preview and I have a preview but I didn't like one of them I want to delete the selected picture. Here I have just reset when I clicked to remove the image. With old code (I put in comment) I have just hidden image not deleted. I tried to find a solution already here but it's not working.

 $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
      $("#files").on("change", function(e) {
      var files = e.target.files,
          filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
          var f = files[i]
          var fileReader = new FileReader();
          fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
              "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" +                       file.name + "\"/>" +
              "<br/><span class=\"remove\">Remove image</span>" +
              "</span>").insertAfter("#files");

          $(".remove").click(function(){
              $(this).parent(".pip").remove();
              $('#files').val("");
          });

          /*
          $(".remove").click(function(){
              $(this).parent(".pip").remove();
          });*/

      

          });
          fileReader.readAsDataURL(f);
      }
      });
  } else {
      alert("Your browser doesn't support to File API")
  }
  });

input[type="file"] {
    display: block;
}

.imageThumb {
    max-height: 75px;
    border: 2px solid;
    padding: 1px;
    cursor: pointer;
}

.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
}

.remove {
    display: block;
    background: #444;
    border: 1px solid black;
    color: white;
    text-align: center;
    cursor: pointer;
}

        .remove:hover {
            background: white;
            color: black;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="field" align="left">
    <h3>Upload your images</h3>
    <input type="file" id="files" name="files[]" multiple />
</div>

Hope this helps: https://stackoverflow.com/questions/16943605/remove-a-filelist-item-from-a-multiple-inputfile — GhostPengy, Jun 08 '20 at 10:54
@mplungjan It's not rude, because before I put the question here I already checked the similar questions. This code that I put here I understand and It's also some of them part from StackOverflow. So If you can help with this code or you have them all full code for this help and send. I didn't want to be rude, just because before I put the question I check similar questions. A lot of people have the same issue so if you have a solution help because I'm trying and learning every day and I want to understand and learn what I code — Vesko_dev, Jun 08 '20 at 11:36
"Why you deleted YOUR answer"? Why do you think I deleted anyone's answer but my own answer? — mplungjan, Jun 08 '20 at 11:58
This code seems working why you put the code here. ? @Vesko_dev — chandu komati, Jun 08 '20 at 12:04
@chandukomati this code works only to reset all files, not to remove each for each — Milos, Jun 08 '20 at 12:06
@chandukomati Yes if you put just one image, for multiple it's just reset — Vesko_dev, Jun 08 '20 at 12:06
what do u want actually result i'm not getting u r point @Vesko_dev — chandu komati, Jun 08 '20 at 12:08
@chandukomati Here I have multiple select and preview for images. And I want when I clicked on "Remove Image" (below the picture) to delete that picture from a preview. So with this code, you can preview multiple pictures and reset all the pictures. But you can't delete just one of them — Vesko_dev, Jun 08 '20 at 12:13
I did not manage to make a final solution so I removed my suggestions — mplungjan, Jun 08 '20 at 13:11

Savo Pejović · Answer 1 · 2020-06-09T10:15:56.357

First of all, add a single handler for the remove buttons outside the $("#files").on("change" , so handler's logic would run only once. In the new handler you have to find the index of the picture to remove, and then create a DataTransfer with the filtered files. In the end, overwrite input's files with DT's files.

$(document).on('click', '.remove', function(){
            var pips = $('.pip').toArray();
            var $selectedPip = $(this).parent('.pip');
            var index = pips.indexOf($selectedPip[0]);

            var dt = new DataTransfer();
            var files = $("#files")[0].files;

            for (var fileIdx = 0; fileIdx < files.length; fileIdx++) {
                if (fileIdx !== index) {
                dt.items.add(files[fileIdx]);
              }
            }

            $("#files")[0].files = dt.files;

            $selectedPip.remove();
          });

Multiple Image upload with previw and delete , Jquery and Javascript

1 Answers1