CODEWITHSUNDEEP
javascriptuploadplupload
Fábio Linhares
Fábio Linhares

Reputation: 107

Plupload multiple queues and number of uploaded files restricted

So, i have been for hours looking the web for a solution for this problem, i tried many things that didn't work. Can anybody tell me how to allow Plupload to accept multiple queues while at the same time i restrict the number of files a user may upload ?

Upvotes: 1

Views: 1188

Answers (1)

jbl
jbl

Reputation: 15413

You may use a separate object to globally monitor FilesAdded event in each queue, through a custom event :

For example, with two divs and a global limit of 5 files :

<div id="container1"></div>
<div id="container2"></div>

It would lead to the following script :

<script language="javascript">
$(document).ready
(
function(){
// monitoring object
var uploadersMonitor =
    {
        uploaders : [], // uploader objects will be store in this array
        maxFiles : 5,  // no more than 5 files globally
        registerUploader : function (upldr){
            if(uploadersMonitor.uploaders.indexOf(upldr)==-1){
                uploadersMonitor.uploaders.push(upldr);
                }
            },
        computeTotalFilesNumber : function(){
            var sum=0;
            for(var i = 0; i<uploadersMonitor.uploaders.length; i++){
                sum+=uploadersMonitor.uploaders[i].files.length;
            }
            return sum;
        },
        processFilesAdded : function(upldr){
            var total = uploadersMonitor.computeTotalFilesNumber();
            if(total> uploadersMonitor.maxFiles)
            {
             alert('No more than '+uploadersMonitor.maxFiles+'total')
                     // remove excess files
             upldr.splice(upldr.files.length-(total-uploadersMonitor.maxFiles)); 
            }
        }
    }

$(document).on("uploaderFilesAdded",
    function(e,upldr){
        uploadersMonitor.registerUploader(upldr);
        uploadersMonitor.processFilesAdded(upldr);
        }
);

function initUploader(item){
    $(item).pluploadQueue({
            runtimes: 'html5,flash,gears,silverlight,browserplus',
            url: '/upload.php',
            max_file_size: '10mb',
                        init: {
                             FilesAdded : function (upldr,files){
                                $(document).trigger("uploaderFilesAdded",upldr);
                                }
                }
        });                 
};

initUploader($('#container1'));
initUploader($('#container2'));
});
</script>

Note that you may also need to handle the Destroy event on the uploaders to unregister destroyed uploaders in the monitoring object

Upvotes: 1

Related Questions