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 be working on making that happen if anyone needs it..

Answer 1

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 2

Other way to do this:

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

Regards

Answer 3

Based on Jonathon Bolster's second answer, I wrote this simpler snippet to restrict upload to the last selected file:

uploader.bind('FilesAdded', function(up, files) {
    while (up.files.length > 1) {
        up.removeFile(up.files[0]);
    }
});

Answer 4

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

Answer 5

Why not just

    if (files.length > 1) uploader.splice(1, files.length - 1);

Answer 6

Try this. It works fine for me.

uploader.bind('FilesAdded', function(up, files) {

if(uploader.files.length > 1)
{
    uploader.removeFile(uploader.files[0]);
    uploader.refresh();// must refresh for flash runtime
}

. . . resto

Idea is to test num files in current uploader object. If length is greater than 1, then just use method uploader.removeFile. Notice that argument is files[0] which is not a file id, but complete file object.

({id:"p17bqh1v4dp42gdf1gan75p16tp3", name:"gnome-globe.png", size:48456, loaded:0, percent:0, status:1})

Best regards!

Answer 7

now you can disable multi-selection by setting multi_selection option to false

just like this

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash',
    browse_button : 'button_id',
    multi_selection:false,  //disable multi-selection
...

official doc is here : http://www.plupload.com/documentation.php

Answer 8

    FilesAdded: function(up, files) {
        up.files.splice(0,up.files.length-1);
    },
    multi_selection: false,

use up.files, just files. files will always contain single item what we select from file browser. up.files is the actual list which we need to shrink to last selected file.

Answer 9

Allow only one file to be uploaded:

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});

Allow one file to be selected at once:

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(i){up.removeFile(file); return;}
    });
});

Allow one file to upload at once:

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});
uploader.bind('FileUploaded', function(up, file,response) {
    up.removeFile(file);
});

Answer 10

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 11

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 12

Remove unnecessary files directly before uploading:

$('uploadfiles').onclick = function()
            {
                while (uploader.files.length > 1)
                {
                        uploader.removeFile(uploader.files[0]);
                }

                uploader.start();
                return false;
            };

Answer 13

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;

});