2

I have found a code on internet to upload multiple images. While you select the image, it will show the selected image just below as preview, now the problem is what if I selected the wrong image and I want to remove that particular image, also no more than 4 image should be allowed hope you get what I want to say below is the code

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

and jquery for the code is

    $(function() {
    // Multiple images preview in browser
    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);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});
Pankaj Makwana
  • 3,030
  • 6
  • 31
  • 47
Prashant
  • 90
  • 1
  • 12
  • You'll have to change that entire code. Instead of selecting multiple files, you need 4 single file selections to make sure a user cannot upload more than 4 files. Then you'll have to write a function that allowes files to be removed. Say each image has a delete button. That button would simply set the input value of the respective image empty and reload the gallery. – icecub Jul 24 '17 at 08:01

2 Answers2

1

The file list of HTML5 file input is readonly. So it's not possible to remove a single file out from a multiple file selection.

It's perfectly fine to empty a file input by resetting the form. You just can't modify it. So if you use 4 seperate single file selections, it's a simple matter of clearing the one that's being removed by the user:

HTML:

<form>
    <input type="file" name='images[]' class="gallery-photo-add" id='image1' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image2' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image3' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image4' />
</form>
<div class="gallery"></div>

JS:

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(placeToInsertImagePreview) {

        // Empty preview so we can safely rebuild it
        $(placeToInsertImagePreview).empty();

        // Get all files
        var elems = document.getElementsByClassName("gallery-photo-add");

        // Loop through each file and append them to the preview if available
        for (i = 0; i < elems.length; i++) {
            if (elems[i].files.length != 0) {
                var reader = new FileReader();
                var id = $(elems[i]).attr('id');

                reader.onload = (function(id) {
                    return function(e){
                        $($.parseHTML('<img>')).attr({
                            'src' : e.target.result,
                            'data-id' : id
                        }).appendTo(placeToInsertImagePreview);
                    }
                })(id);

                reader.readAsDataURL(elems[i].files[0]);
            }
        }
    };

    // Temporarely wrap a form element around the input to reset it
    window.reset = function(e) {
        e.wrap("<form>").closest('form').get(0).reset();
        e.unwrap();
    }

    $('div.gallery').on('click', 'img', function() {
        var id = $(this).attr("data-id");
        reset($('#'+id));
        $(this).remove();
    });

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

You can test it here: https://jsfiddle.net/81nytqsc/2/

icecub
  • 8,615
  • 6
  • 41
  • 70
0
 $('div.gallery').on('click','img',function(){
 var files= $('#gallery-photo-add).get(0).files;
 for(i=0;i<files.length;i++){
 if(files[i]==$(this).attr('src')){
 files= jQuery.grep(files, function(value) {
return value != files[i];
 }
 }
 }
 $(this).remove();
 });
Osama
  • 2,912
  • 1
  • 12
  • 15
  • That last part won't work. Yes it will prevent the gallery from showing more images. But it will still allow the script to upload more files. He needs single file selections instead, as I said in my comment. – icecub Jul 24 '17 at 08:07
  • While file reader with in the function itself and you return from it at the beginning so I think it will not work if images in the gallery more than 4 – Osama Jul 24 '17 at 08:10
  • 1
    The FileReader will just read the files inside the multiple file input element to show a preview. You can stop the FileReader but that doesn't stop anyone from selecting 10 or a 100 files at once. PHP won't care about it either. Also, you're hiding images. Not removing them. – icecub Jul 24 '17 at 08:13
  • It's a nice idea, but no. Javascript is a client side language. You can't rely on it for security. A simply injection or disabling javascript will bypass this. Single file selections is the way to go. Because he wants the user to be able to remove the files. IE: They won't be uploaded. You can do `$(this).remove();` to remove it from the preview, but that won't remove it from the upload. – icecub Jul 24 '17 at 08:25
  • I think each script need server side validation this is the first step to upload only for the remaining work is with php – Osama Jul 24 '17 at 08:28
  • the remove function works perfectly but it still allows me to upload more than 4 images – Prashant Jul 24 '17 at 08:30
  • @coolmonster No it's not working perfectly. Go ahead. Select an image and remove it with this function. Click upload. The file will still be uploaded. – icecub Jul 24 '17 at 08:31
  • sorry not helpful – Prashant Jul 24 '17 at 09:55
  • See I use my iPhone so I can not check the code I will explain the steps for you (1) when you uploaded the files you will get array of them one index in this array will be with the file name of the image src when you click on it it will removed from files array using if statement and looping with files – Osama Jul 24 '17 at 10:08
  • https://stackoverflow.com/questions/32062876/removing-file-from-multiple-files-uploader-on-button-click-when-using-html5-file https://stackoverflow.com/questions/32176391/how-do-i-add-a-delete-button-function-for-file-upload – Osama Jul 24 '17 at 10:14
  • yes sir, i will let you the problem. consider u have uploaded 2 image image1 and image2 now when u remove image2 by clicking on it then it hidden on front end but image2 value is stored in database not image1 while we removed image2 – Prashant Jul 24 '17 at 11:15
  • Why you consider this you have to show the images in a div before working with database not after and you have to that with jquery then at the end of work you send it to the server either with form post or as ajax request – Osama Jul 24 '17 at 11:24
  • yes sir but it always send the last selected image no matter which image we remove – Prashant Jul 25 '17 at 06:43
  • Now you have to select array of files while some of them may be remove by the user , another situation at the client side you can re-index your file in a way which is suitable for your work. – Osama Jul 25 '17 at 08:06