Plupload - Restrict to only one file

Question

I don\'t see an option in the plupload API docs on restricting the number of files uploaded, to any number, even 1.

Doc fail? or Feature fail? If it doesn\'t exist I\'ll

Answer 1

I realize this has been answered, but a solution I went with was to just use the QueueChanged callback:

QueueChanged: function(uploader) {
    // Called when queue is changed by adding or removing files
    //log('[QueueChanged]');
    if(uploader.files.length > 1) {
        uploader.files.splice(0, (parseInt(uploader.files.length) - 1));
    }
}

With this code, it only keeps the last selected file (in case the reason they chose again was because they chose the wrong file).

Answer 2

Other way to do this:

 $(document).ready(function () {
    var uploader = new plupload.Uploader({
        ...
        multi_selection: false,
       ....
     });

Regards

Answer 3

If you want to use a custom uploader, and upload one file at a time, no auto upload and have the last file added become the new file use this.

uploader.bind('FilesAdded', function(up, files) {
    // Clear the HTML
    $('#plupload-files').html('');

    // Plup does not offer before file added event
    if (up.files.length > 1) {
        up.splice(0, up.files.length);
        up.addFile(files[0])
        return;
    }

    // $.each(files, function(){....
}

We splice the whole array because plup already adds all the files to the queue and if you splice the queue like the accepted answer you will actually add one file everytime the user tries to add files, and if they try to add a new file singularly it will keep the old file at pos[0] in the files array,

Then we add the first file of the files that they tried to add. This way there is only ever one file in the queue and it is always the first file in the last group of files they tried to add.

ie.

Drag into plupload 'file1.jpg', 'file2.jpg', 'file3.jpg'

clear the whole queue, add back 'file1.jpg'

Drag into plupload 'file4.jpg', 'file5.jpg', 'file6.jpg'

clear the whole queue, add back 'file4.jpg'

Drag into plupload 'file99.jpg'

clear the whole queue, add back 'file99.jpg'

This allows you to manage custom plups if you only ever want to upload one file at a time. As stated the other answers only work once, or with auto start uploads.

Answer 4

You can use this max_file_count: 5 where 5 is the max number of upload count.

Answer 5

It's a feature fail. I made a wrapper around the jQuery API and this is what I did to make it work for me. My code does some other business logic, but it should give you enough to set started.

Basically, bind to the FilesAdded event and call removeFile on the uploader object (if there are too many files). I think I added the 50ms timeout because it was giving me problems with the file not existing yet.

uploader.bind('FilesAdded', function (up, files) {
    var i = up.files.length,
        maxCountError = false;

    plupload.each(files, function (file) {

        if(uploader.settings.max_file_count && i >= uploader.settings.max_file_count){
            maxCountError = true;
            setTimeout(function(){ up.removeFile(file); }, 50);
        }else{
            // Code to add pending file details, if you want
        }

        i++;
    });

    if(maxCountError){
        // Too many files uploaded, do something
    }

});

max_file_count is something that I add to the pluploader instance when I create it.

---

Edit: I actually had to do two different ways for this. The above will only allow a person to upload a certain number of files (and generate an error otherwise).

This snippet works in a similar way - but will remove existing files and only upload the most recent:

uploader.bind('FilesAdded', function (up, files) {
    var fileCount = up.files.length,
        i = 0,
        ids = $.map(up.files, function (item) { return item.id; });

    for (i = 0; i < fileCount; i++) {
        uploader.removeFile(uploader.getFile(ids[i]));
    }

    // Do something with file details
});

Answer 6

After trying each of the solutions, I came up with the simplest of all -- which seems to work.

I'm using the core api and I have multi_selection set to false. Then, after the first file is selected (added) the second line of code, which I inserted into the FilesAdded event, hides the browse link. I don't think this can be done with the jquery widgets and I also have found that unless the upload link covers where the browse link is, it remains alive.

uploader.bind('FilesAdded', function(up, files) {
//line below hides button
document.getElementById("browse").style.display = "none";

var html = '';
plupload.each(files, function(file) {
html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
});
document.getElementById('filelist').innerHTML += html;

});