How to handle cancel event of input type file?

Question

I am trying to display preview of selected images. Everything works fine, except when I select file then I can see number of selected files as well as preview of selected files, but when I click on choose file button second time and if I don't select any file click cancel then in that case this removes the selected files(i.e instead of selected files count I see no files chosen as files are gets removed) which I don't want. So if user clicks cancel it means he want previous selection only.

Here is my code.

<a>
    <input type="file" name="data[animal][animal_photographs][]" 
            onchange="PreviewImages('stray');" multiple="multiple"
            id="preview_images_stray" accept="image/*">
</a>

Js:

function PreviewImages(type) 
{
    if(document.getElementById("append_preview_div"))
    {
        while (document.getElementById("append_preview_div")) {
            document.getElementById("append_preview_div").remove();
        }
    }

    // get all choosen images
    var files = document.getElementById("preview_images_"+type).files;

    if (files.length > 5) 
    {
        alert("You can upload maximum 5 images.");
        document.getElementById("preview_images_"+type).value = null;

        if(document.getElementById("append_preview_div"))
        {
            while (document.getElementById("append_preview_div")) {
                document.getElementById("append_preview_div").remove();
            }
        }
        return false;
    }

    for(var i = 0; i < files.length; i++)
    {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(document
                    .getElementById("preview_images_"+type)
                    .files[i]);

        fileReader.onload = function (fileReadEvent) 
        {
            var newDiv = document.createElement("DIV");
            newDiv.setAttribute("class", 'col-md-2');
            newDiv.setAttribute("id", 'append_preview_div');

            var newImage = document.createElement("IMG");
            newImage.setAttribute("id", "preview-img-"+type);
            newImage.setAttribute("src", fileReadEvent.target.result);

            newDiv.appendChild(newImage);

            document.getElementById('append_preview_images_'+type).appendChild(newDiv);
            document.getElementById('append_preview_images_'+type).style.display = 'block';
        };
    }
};

Possible duplicate of [How to detect when cancel is clicked on file input?](https://stackoverflow.com/questions/4628544/how-to-detect-when-cancel-is-clicked-on-file-input) — Mav, Oct 29 '18 at 12:31

score 0 · Answer 1 · answered Oct 29 '18 at 12:58

0

It happen's on Chrome only and in firefox work good. It's for browser you couldn't fix it.you could use javascript plugin like DrpZone.

answered Oct 29 '18 at 12:58

shaghayegh sheykholeslami

310
1
11

How to handle cancel event of input type file?

1 Answers1