Blueimp - fileupload. upload many stored images

I'll show you another way to send the input to the server, and in this way we will control that it is the last selected element, you can keep the property name="file" that you had previously:

$('#upload-input').on('change', function () {
       //files tendrá todos los elementos que sean seleccionados, o el único que se seleccione
    var files = $(this).get(0).files;

        var formData = new FormData();
              //si se seleccionaron varios elementos file sera el ultimo que se selecciono
        var file = files[files.length-1];
        formData.append('file', file, file.name);


        $.ajax({
            url: '/_uploader/gallery/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                //este xhr es por si quieres llenar alguna barra de progreso
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100); // esta variable contiene por que % esta la subida
                        if (percentComplete === 100) {
                            // aquí pones que ocurrirá cuando el % sea 100%
                        }
                    }
                }, false);
                return xhr;
            }
        }).done(function (data) {
            //aquí declaras lo que ocurrirá cuando se termine de subir el fichero
        });

});

  

Note: remember that if you are using your input to upload only images, input you can include the accept property to define which types of upload images, for example accept="image/png, .jpeg, .jpg, image/gif"

     

    

Keep in mind that with what you implement previously at the time the selection is made, auto-followed the request is made and sent to the server, if you want to separate it, you would have to put the function $.ajax() in a function apart, and call it when you want it sent.

  

Try differently since the idea is to make it work with the library since I use a bundle for symfony and work together.

probe as follows in this code where you only send one image and it does not repeat. but take the first image and not the last one.

before submit in add. I put the input file disable with fileupload ...

$('#photo_news').fileupload({
            url: '/_uploader/gallery/upload',
            type: 'POST',
            multipart: true,
            dataType: 'json',
            autoUpload: false,
            singleFileUploads: true,
            replaceFileInput: false,
            maxNumberOfFiles: 1,

            add: function(e, data){

                $("#photo_news").fileupload('disable');

                $("#form_news").submit(function(e){

                    e.preventDefault();

                    data.formData = $("#form_news").serializeArray();
                    data.submit();


                });

            },
            done: function(e, data) {

                if(data){
                    window.location.reload();
                }

            },

            error: function(e, data){

                console.log(data);

            }

        });