why when i choose another file and submit, another request with the old file is sent?

Question

Hi i'm using Jquery Upload plugin. I've got this problem:

when i upload the first file this work fine,a single request is sent.

But if i select a second file and i upload it,two request are sent and not one how i expected, the first with the old file and the second with the new one. how i can avoid this behavior?

here's the code:

html:

<form id="upload"   >
Select video to upload:
<input id="fileupload" type="file" name="upl" data-url="php/fileUploader/uploaderVideoHandler.php" >
<input type="submit" value="Upload " name="submit">

javascript:

$(function () {
$('#fileupload').fileupload({
   method:'POST',
    acceptFileTypes: /(\.|\/)(mp4)$/i,
    dataType: 'json',
    maxNumberOfFiles: 1,
    replaceFileInput:false,
    autoUpload:false,
    add: function (e, data) {
        data.context = $('#upload').submit(

            function (e) {  
                            e.preventDefault();

                            data.submit();
            });
    },
    done: function (e, data) {
        data.file
        $('#progress .bar').text('Upload finished.');
    },
       progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
      );
    }
  });
 });

i try to reset data.files with

data.files.pop();

but doesn't work.

Solved: Instead using

 <input type="submit" value="Upload " name="submit">

i used a button

 <button id="up_btn">upload</button>

and i've changed add function to:

    $("#up_btn").off('click').on('click', function () {
        e.preventDefault();
        data.submit();
        return false;
    });

Answer 1

After spending few hour on Jquery File Upload
I came to know that you can upload file in this way in order to have syn file upload
you can check the documentation here

Problem found

While doing data.submit() in add fileupload you are actually re-submiting
the form again n again therefore more than 1 ajax occurs.

Solution

HTML

Select video to upload:
<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>

JS

$(function () {
    'use strict';
    var url = 'server/php/',
    uploadButton = $('<button/>')
    .prop('disabled', true)
    .on('click', function () {
        var $this = $(this),
        data = $this.data();
        $this
        .off('click')
        .on('click', function () {
            $this.remove();
            data.abort();
        });
        data.submit().always(function () {
            $this.remove();
        });
    });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        replaceFileInput:false,
        acceptFileTypes: /(\.|\/)(mp4)$/i,
        maxFileSize: 999000,
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')

            if (!index) {
                node.append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
        if (file.error) {
            node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
        }
    })
});

Final Code will be :-

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fileupload.css">

Select video to upload:
<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-image.js"></script>

<script>
$(function () {
    'use strict';
    var url = 'server/php/',
    uploadButton = $('<button/>')
    .prop('disabled', true)
    .on('click', function () {
        var $this = $(this),
        data = $this.data();
        $this
        .off('click')
        .on('click', function () {
            $this.remove();
            data.abort();
        });
        data.submit().always(function () {
            $this.remove();
        });
    });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        replaceFileInput:false,
        acceptFileTypes: /(\.|\/)(mp4)$/i,
        maxFileSize: 999000,
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')

            if (!index) {
                node.append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
        if (file.error) {
            node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
        }
    })
});
</script>