How to upload a file only once with blueimp file upload plugin?

Question

I'm using the bluimp jQuery-File-Upload-plugin . It's no problem to select some files and upload them, but when I want to upload another files without refreshing the page, the first ones are getting uploaded again. My question is how can I "unset" files after they are uploaded. Here is my sourcecode

Javascript:

$('#MappeFile').fileupload({
        dataType : 'json',
        autoUpload : false,
        maxNumberOfFiles : undefined,
        maxFileSize : 6000000,
        minFileSize : undefined,
        acceptFileTypes : /.+$/i,
        url : "/ajax/UploadFile.php",
        add : function(e, data) {
            $("#testUploadButton").on("click", function() {
                    $('#progress .bar').show();
                    if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                        $('#progress .bar').css({
                            "background" : "url(images/progressbar.gif) no-repeat",
                            "width" : "100%"
                        })
                    } else {
                        $('#progress .bar').css({
                            'background-color' : "#2694E8",
                            'width' : '0%'
                        });
                    }
                data.submit();
            })
        },
        change : function(e, data) {
            $.each(data.files, function(index, file) {
                console.info('Selected file: ' + file.name);
                filesCount++;
            });
        },
        drop: function(e, data) {
            $.each(data.files, function(index, file) {
                console.info('Selected file: ' + file.name);
                filesCount++;
            });
        },
        done : function(e, data) {
            $.each(data.result, function(index, file) {
                vOutput = "<tr>";
                vOutput += "<td>" + file + "</td>";
                vOutput += "<tr>";
                $("#MappeFileListe").append(vOutput);
                filesUploaded++;
                if (filesCount == filesUploaded) {
                    filesUploaded = 0;
                    filesCount=0;
                    $('#progress .bar').hide();
                }
            });
        },
        progressall : function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        }
    });

HTML:

<div id="KundeMappe">
    <form id="MappeFile">
        <input type="file" id="MappeFileSelect" name="files[]" data-url="ajax/UploadFile.php" multiple/>
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
        <input type="button" class="neuButton" value="upload" id="testUploadButton"/>
    </form>
    <table id="MappeFileListe"></table>
</div>

score 22 · Accepted Answer · answered Nov 09 '12 at 13:31

22

I found the answer myself - It's enough to unbind the click event of the button after upload:

add : function(e, data) {
            $("#testUploadButton").on("click", function() {
                    $('#progress .bar').show();
                    if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                        $('#progress .bar').css({
                            "background" : "url(images/progressbar.gif) no-repeat",
                            "width" : "100%"
                        })
                    } else {
                        $('#progress .bar').css({
                            'background-color' : "#2694E8",
                            'width' : '0%'
                        });
                    }
                data.submit();
                $("#testUploadButton").off("click")
            })
        },

answered Nov 09 '12 at 13:31

Dirty-flow

2,306
11
30
49

1

I have the same problem. But with your solution it just suppress all the other requests, still allocating memory. How to restrict the number of files, to avoid adding the selected files to the upload queue? Setting `maxNumberOfFiles: 1` doesn't work for me. – static May 02 '13 at 19:16
1

is it better to set the `$("#testUploadButton").off("click")` before the new `$("#testUploadButton").on("click", function() { ... }` ? – static May 03 '13 at 02:40
3

Your solution does not seem to be the RIGHT answer, but it did the trick for me thanks alot. – VahidNaderi Jun 17 '13 at 11:48
5

The reason why there are multiple file uploads happening is because each time fileupload() is called a new click event is being added to the testUploadButton. As this answer shows, removing the click event from the button resolves this problem. There is a jquery function one() which will bind the click event to the button and then unbind the click after after the first invocation. http://api.jquery.com/one/ This would result is the following change: $("#testUploadButton").one("click", function() { – carey walker Nov 28 '14 at 09:24
Great solution. I put it before my click handler so that only the most recently selected file is uploaded. – Onshop Dec 10 '18 at 17:07

score 2 · Answer 2 · answered Mar 25 '20 at 11:42

I had a similar problem where previously uploaded files were included in the next upload. You can try following solution below:

On Add Function just add "change" event of the file input element like below:

$('#YourFileUploadElementId').change(function(e) {
     data.files.splice(0); // Clear All Existing Files
});

Full Example Below:

$('#YourFileUploadElementId').fileupload({
    // Some options
    add: function (e, data) {
        $('#YourFileUploadElementId').change(function(e) {
          data.files.splice(0); // Clear All Existing Files
        });
    },
    // Other Events
 });

Note: Just change the YourFileUploadElementId to your file upload element id.

Here is the complete example on jsfiddle.net

http://jsfiddle.net/dustapplication/cjodz2ma/5/

Paritosh · Answer 3 · 2022-09-14T07:42:23.747

The same problem when I faced, I resolved it by using one() in place of on(). The add function can be written as:

add : function(e, data) {
        $("#testUploadButton").one("click", function() {
                $('#progress .bar').show();
                if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                    $('#progress .bar').css({
                        "background" : "url(images/progressbar.gif) no-repeat",
                        "width" : "100%"
                    })
                } else {
                    $('#progress .bar').css({
                        'background-color' : "#2694E8",
                        'width' : '0%'
                    });
                }
            data.submit();
        })
    }

The .one() method is identical to .on(), except that the handler for a given element and event type is unbound after its first invocation.

Here is more about one(): https://api.jquery.com/one/

How to upload a file only once with blueimp file upload plugin?

3 Answers3

Linked