Image Upload with preview and Delete option - Javascript / Jquery

Question

I have code below that runs perfectly and uploads multiple images.

This is the html and jQuery code:

<div class="field" align="left">
            <span>
                <h3>Upload your images</h3>
                <input type="file" id="files" name="files[]" multiple />
            </span>
        </div>

The script is as below:

<style>
    input[type="file"] {

     display:block;
    }
    .imageThumb {
     max-height: 75px;
     border: 2px solid;
     margin: 10px 10px 0 0;
     padding: 1px;
     }
    </style>
    <script type="text/javascript">
    $(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;
                    $("<img></img>",{
                        class : "imageThumb",
                        src : e.target.result,
                        title : file.name
                    }).insertAfter("#files");
               });
               fileReader.readAsDataURL(f);
           }
      });
     } else { alert("Your browser doesn't support to File API") }
    });

    </script>

The code adds multiple images and shows previews of the images too. But now I want that when a user clicks on some button, lets say delete on every image uploaded, it should be removed. Not hidden.

Any help to this will be appreciated!

I would recommend to try this one. http://hayageek.com/docs/jquery-upload-file.php — claudios, May 13 '16 at 09:01
try out this jquery pluggin : https://blueimp.github.io/jQuery-File-Upload/ — Rolwin Crasta, May 13 '16 at 09:03

PinkTurtle · Accepted Answer · 2020-03-07T11:29:19.127

59

Try adding this : .click(function(){$(this).remove();});. It will remove the image by clicking it.

EDIT Improved version included.

EDIT 2 Since people keep asking, please see this answer on manually deleting a file from a FileList (spoiler: it's not possible...).

$(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();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

edited Mar 07 '20 at 11:29

answered May 13 '16 at 12:18

PinkTurtle

6,942
3
25
44

Thank you soo much....worked like charm....it solved my issue....thank you once again... – Jijo Nair May 14 '16 at 01:21
5

when i submit..it shows only one file...even i upload multiple... @PinkTurtle – Jijo Nair May 14 '16 at 04:07
1

What server side language are you using ? If PHP try writing `var_dump($_POST["files"])` or `var_dump($_GET["files"])` to inspect your var contents. – PinkTurtle May 14 '16 at 14:05
I tried...M using PHP with laravel...i found only one image data being received at the server side. – Jijo Nair May 14 '16 at 14:45
26

This will only remove the image preview and not the image selected! – Nov 05 '16 at 15:42
@JijoNair Have you solved the problem? I need to do same thing and I use Laravel. When I submit only last selected file/ files submited. Even if I remove the files it is also submitted.Have you found any solution? – IshaS Apr 20 '17 at 06:42
@IshaS yes it does remove the images that I dont want even after selecting and opting to remove them later. Can you please post your error here through your console? – Jijo Nair Apr 20 '17 at 07:38
@IshaS and try dd using laravel and find how many files have been submitted. and to remove the name from the label after removing an Image , you have to place a custom label. That would help you out – Jijo Nair Apr 20 '17 at 07:40
@JijoNair Thanks for the reply. I didn't get any error. Images display and remove work well. The problem is when I browse and select several images and remove one of them and submit. It is uploaded with removed image. – IshaS Apr 20 '17 at 08:00
@JijoNair Other scenario is First I browse image then display it.Again I browse and select other image.Then display two images.When I submit it upload only one image. – IshaS Apr 20 '17 at 08:02
@PinkTurtle Great work indeed. How to restrict it to just one image ? I want to upload only image not many. Thanks – Israr Khan Oct 27 '17 at 05:43
@IsrarKhan Identify your image with an ID (like `myImg`) and use `$("#myImg").click(function(){$(this).remove();});` – PinkTurtle Oct 28 '17 at 15:46
@PinkTurtle Sir, you deserve a medal. Thank you so much! – John Spax Dec 01 '17 at 15:33
The issue is the same image can upload multiple times. How could you avoid that ? – asela daskon May 20 '18 at 13:59
@PinkTurtle why same image is not uploading after delete it please reply. – Manish Goswami Sep 21 '19 at 05:20
3

@PinkTurtle Can somebody share full code of preview and removing image, not just hide image but remove? – Milos Jun 08 '20 at 10:19
1

@Milos can you find something for this issue. I am facing the same problem. when I click on the remove image from the preview, not from the actual input field. – atta afridi Jul 23 '20 at 12:32

score 0 · Answer 2 · edited Mar 03 '17 at 21:45

0

Use this for remove files values and file preview

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

edited Mar 03 '17 at 21:45

CDspace

2,639
18
30
36

answered Mar 03 '17 at 21:41

Mr. Gaurang Rathod

25
2

8

this will remove all files not only the one that you try to remove ! – Atimene Nazim Nov 20 '17 at 08:51
the above code remove all selected file or images. not working. – atta afridi Jul 23 '20 at 12:25
1

how do we remove file from the input file filed? – Amir Khan Apr 24 '21 at 06:38

Image Upload with preview and Delete option - Javascript / Jquery

2 Answers2

Linked