Limit the number of uploads in plupload

Question

My client is using an old classipress version, here's a github repo I found but what he's using is much older. Running the latest Wordpress version. It comes with plupload, some old version, couldn't find the version in the theme. Here's Functions.php, here's plupload. Here's the html of my page, no need to see it, but i'm putting it there because the page is protected so that's the only way to inspect the whole code if you want to.

I want to add the ability to upload multiple pictures at the same time, to do that, I add this to functions.php

add_filter('appthemes_plupload_config', 'enable_plupload_multisel', 10 ,1);
function enable_plupload_multisel($app_plupload_config){
$app_plupload_config['plupload']['multi_selection'] = true;
return $app_plupload_config; }

But I don't know how to stop the user from uploading more than 8 pictures? I tried adding max_files and max_files_count and max_file_count and nothing worked, I even modified the source code of the plugin itself and the js and nothing worked. I want to stop the user from being able to upload more than 8 images.

After I gave up on plupload, I tried doing it using Jquery, again didn't work

 /* prevent form submission if user selects more than 8 pics */
 jQuery('#app-attachment-upload-pickfiles').change(function() {
     if (this.files.length > 8) {
         alert('Uploading more than 8 images is not allowed');
         this.value = '';
     }
 });
 // Prevent submission if limit is exceeded.
 jQuery('#mainform').submit(function() {
     if (this.files.length > 8) {
         jQuery('#app-attachment-upload-pickfiles').hide();
         jQuery('#step1').hide();
         return false;
     } else {
         jQuery('#app-attachment-upload-pickfiles').show();
         jQuery('#step1').show();
     }
 });

Edit

My pluploadjs here. FilesAdded

    attachUploader.bind('FilesAdded', function(up, files) {
        jQuery.each(files, function(i, file) {
            jQuery('#app-attachment-upload-filelist').append(
                '<div id="' + file.id + '" class="app-attachment-upload-progress">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                '</div>');

            window.appFileCount += 1;
            APP_Attachment.hideUploadBtn();
        });

        up.refresh();
        attachUploader.start();
    });

I modified it to look like so

    attachUploader.bind('FilesAdded', function(up, files) {
        var maxfiles = 8;
            if(up.files.length > maxfiles )
             {
                up.splice(maxfiles);
                alert('no more than '+maxfiles + ' file(s)');
             }
            if (up.files.length === maxfiles) {
                $('#app-attachment-upload-filelist').hide("slow"); // provided there is only one #uploader_browse on page
            }
        jQuery.each(files, function(i, file) {
            jQuery('#app-attachment-upload-filelist').append(
                '<div id="' + file.id + '" class="app-attachment-upload-progress">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                '</div>');

            window.appFileCount += 1;
            APP_Attachment.hideUploadBtn();
        });

        up.refresh();

        attachUploader.start();
    });

Is that all? Will it work now? I haven't tested it because it will give errors

Answer 1

I'm not sure but your code should almost work. I think you should manually remove the files from the queue by calling the removeFile method.

Maybe try this code:

    attachUploader.bind('FilesAdded', function(up, files) {
        var maxfiles = 8;

        // remove all new files after the max of files
        jQuery.each(up.files, function(i, file) {
            if(i > maxfiles){
                up.removeFile(file);
            }
        });      
});