reset input field after multiple image upload

Question

html:

<form action="{{ path("image_gallery",{"id":id}) }}" method="post" enctype="multipart/form-data" >
                <label for="files">Select multiple files: </label>

                <input name="images[]" id="files" type="file" multiple/>
                <input type="submit" name="submit" id="upload" value="submit" class="btn btn-fit-height green-soft" style="margin-top:10px" disabled />
            </form>
            <output id="result" style="display: -webkit-box;" />

jquery:

<script>        
            $('#files').change(function () {
                var input = this;
                var limit = 6;
                var alreadyuploadedimage = '{{imagecount}}';
                var allowedimage = limit - alreadyuploadedimage;
                if (allowedimage == 0) {
                    this.value = '';
                    $('#msg').text("You can upload maximum 6 images and you have already uploaded 6 images.");
                    $(".requiredFieldsError").show();
                    $('#upload').attr('disabled', true);
                }
                if (allowedimage < parseInt(input.files.length)) {
                    this.value = '';
                    $('#msg').text("You can upload maximum 6 images and you have already uploaded " + alreadyuploadedimage + " images.please upload remaining images");
                    $(".requiredFieldsError").show();
                    $('#upload').attr('disabled', true);
                }

                if (parseInt(input.files.length) > 6) {
                    this.value = '';
                    $('#msg').text("Please upload maximum 6 images");
                    $(".requiredFieldsError").show();
                    $('#upload').attr('disabled', true);

                }
                for (i = 0; i < input.files.length; i++)
                {
                    var ext = input.files[i].name.match(/\.(.+)$/)[1];
                    switch (ext) {
                        case 'jpg':
                        case 'jpeg':
                        case 'png':
                        case 'gif':
                        case 'JPG':
                        case 'JPEG':
                        case 'PNG':
                        case 'GIF':
                            $('#upload').attr('disabled', false);
                            $(".requiredFieldsError").hide();
                            break;
                        default:
                            this.value = '';
                            $('#msg').text("Please upload image with valid format");
                            $(".requiredFieldsError").show();
                            $('#upload').attr('disabled', true);
                            //alert('This is not an allowed file type.');

                    }
                }
            });
            //Check File API support
            if (window.File && window.FileList && window.FileReader)
            {
                var filesInput = document.getElementById("files");

                filesInput.addEventListener("change", function (event) {

                    var files = event.target.files; //FileList object
                    var output = document.getElementById("result");

                    for (var i = 0; i < files.length; i++)
                    {
                        var file = files[i];

                        //Only pics
                        if (!file.type.match('image'))
                            continue;

                        var picReader = new FileReader();

                        picReader.addEventListener("load", function (event) {

                            var picFile = event.target;

                            var div = document.createElement("div");

                            div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                                    "title='" + picFile.name + "'/>";

                            output.insertBefore(div, null);

                        });

                        //Read the image
                        picReader.readAsDataURL(file);
                    }

                });
            }
            else
            {
                console.log("Your browser does not support File API");
            }

    </script>

once I have upload image (maximum allowed 6). and reload page again the file input is not cleared and it is upload again .how to clear file input after upload files ? can any one help me for that?

Answer 1

Try adding:

<input name="images[]" id="files" value="" type="file" multiple/>

it will set the input to be empty by default every time is loaded.