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>

Dirty-flow · Accepted Answer · 2012-11-09 13:31:01Z

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 9, 2012 at 13:31

Dirty-flow

2,30011 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

static Over a year ago

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 Over a year ago

is it better to set the $("#testUploadButton").off("click") before the new $("#testUploadButton").on("click", function() { ... } ?

VahidNaderi Over a year ago

Your solution does not seem to be the RIGHT answer, but it did the trick for me thanks alot.

carey walker Over a year ago

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. api.jquery.com/one This would result is the following change: $("#testUploadButton").one("click", function() {

Onshop Over a year ago

Great solution. I put it before my click handler so that only the most recently selected file is uploaded.

Joesel Duazo · Accepted Answer · 2020-03-25 11:42:59Z

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 · Accepted Answer · 2022-09-14 07:42:23Z

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/

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related