0

I succesfully got the preview images to get removed from the viewing area but it doesn't actually remove it from the array. I cannot figure out how to remove it like it was never selected, please help me out!

http://jsfiddle.net/ERZVC/

 var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
        alert("You can only upload a maximum of 5 files");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#files').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();
});

html

<input type="file" id="files" name="image_file_arr[]" multiple>
<br><output id="list"></output>
Gadgetster
  • 473
  • 3
  • 12
  • 33
  • possible duplicate of [Clear an image preview file that was removed from the array with jquery](http://stackoverflow.com/questions/24470379/clear-an-image-preview-file-that-was-removed-from-the-array-with-jquery) – tftd Jul 05 '14 at 16:48

1 Answers1

0

Here is updated fiddle.

The only mistake is you have not decreased counter on removing file.

Thanks.

 var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
        alert("You can only upload a maximum of 5 files");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#files').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();
    count--;
});
Kuldeep Vithlani
  • 613
  • 5
  • 12
  • nice! this works for the preivew, now what if I upload 4 images then remove 2, on submit, will it only upload the 2 images in the preview? – Gadgetster Jun 09 '14 at 05:11
  • For that you have to remove that file from files array on remove button click using splice method of javascript. Here is reference link: http://www.w3schools.com/jsref/jsref_splice.asp . Also you can view your files array using alert(JSON.stringify(files)). put this line after var files = evt.target.files; in your code and you can see list of files uploaded. Thanks – Kuldeep Vithlani Jun 09 '14 at 05:42
  • Can you please show me how to put these two in the code so that after it sees the files, it removes the ones that were click to be removed? – Gadgetster Jun 09 '14 at 16:47
  • can you please help me out with this? I am not sure how to add these codes in – Gadgetster Jun 10 '14 at 00:55