control number of files with multi-file selection

[SamVanity]

Is there a way to control how many a user can select when using the multi-file selection feature for 2011.2.915?

1) limit the number of file selection in the file open dialogue?
2) preventing files from being uploaded after a set number of successful uploads?
3) hiding the selection control once a set number of files are uploaded successfully?

And is there a way to control what upload module to be used? e.g. I want to use Silverlight as much as possible.

Thanks in advance for any idea.

[Peter Filipov]

Hello Sam,

Up to your questions:

1). When multiple selection is on, it is not possible to limit the number of uploaded files.

2). It is not possible to prevent files to be uploaded, after a certain number of files have been uploaded.

3). Please review the MaxFileInputsCount property.


Best wishes,
Peter Filipov
the Telerik team

[Kevin]

Hello, it is possible to limit the number of files on a multiple file upload.
I set a max through a global config and assign it to a hidden field so i can access the value through JS.
This method is on the File Uploaded event.

function checkMaxNumFiles(sender, eventArgs) 
{
    var MaxFileUploads = $get('HiddenMaxFileUploads').value;
    var Language = $get('hiddenLanguage').value;
 
        if (eventArgs.get_count() > MaxFileUploads) {
            eventArgs.set_cancel('true');
            if (Language == "English") {
                alert("Please only select a maximum of " + MaxFileUploads + " files");
            }
            else if (Language == "French") {
                alert("Veuillez sélectionner qu'un maximum de " + MaxFileUploads + " dossiers");
            }
 
        }
}

[SamVanity]

Thanks Kevin for your info.

I set MaxFileInputsCount from server to 3, and confirmed on the client side using get_maxFileCount that it is indeed set to 3. However, with Firefox 6.0.2, Chrome and IE9, using the latest version (2011.2.920), it allowed me to upload 5 files (the select file fields started decreasing after I uploaded the third file).

It is not working as expected. Please consider this a bug report.

[Kevin]

Hi Sam, that property doesnt work for multi file upload. Simply use javascript to check the selected number of files against a constant. The following code should fix your problem assuming you just want to cancel the upload if a user selects more than a set number of files.

// eventArgs.get_count()  gets the total number of files selected by the user
// 3 can be swapped for any value or pass this value in to have be dynamic like my previous post
 if (eventArgs.get_count() > 3) {

            // eventArgs.set_cancel('true') cancels the upload and no files are sent to the server
            eventArgs.set_cancel('true');

// alert the user that they have selected too many files
alert("Please only select a maximum of 3 files");
}

Hope this is a little more clear.

[Peter Filipov]

Hi Sam,

I have tested your scenario and it works fine. Please review the following video. A working sample project that reproduce the issue will be helpful.

Could please try with our official latest release Q2.2011 Service Pack 1?

Kind regards,
Peter Filipov
the Telerik team

[Koen]

hi ,
I am also looking for a way to restrict the number of files (or amount of data) to be uploaded when multiple files selection is enabled. The solution you gave seems not to be working, as the eventargs  onclientfileuploaded doesn't contain the method get_count.

Im wondering you did manage to get it working?

regards Koen

[Kevin]

If you have the latest or previous version of the controls it should be working for you. What version of the control do you have?

[Koen]

im using radcontrols asp.net ajax Q1 2011 SP1.
edit: i just updated to 2011.2.915.0 still not working

i used that javascript that is bound to OnClientFileUploaded, so after the first file uploaded it breaks.

var MaxFileUploads = 7;
           function checkMaxNumFiles(sender, eventArgs) {

               if (eventArgs.get_count() > MaxFileUploads) {
                   eventArgs.set_cancel('true');

                   alert("Please only select a maximum of " + MaxFileUploads + " files");
               }
           }

but that does mean http://www.telerik.com/help/aspnet-ajax/asyncupload-onclientfileuploaded.html is not correct or complete.
set_cancel() also not included in this documentation. When i debug in chrome i can see that eventargs contains the methods that are displayed on this page.

[Kevin]

i run that code currently in ie7 and everything works 100%

What exactly doesnt work for you? Also, dont count on any Telerik documentation to be up to date it is their one down fall.

[Koen]

The problem is the object eventargs doesnt know the methods get_count or set_cancel

i tested it in IE 9 , same error.
For testing purposes i made a new webpage with only the upload control in it, and the script function, still same error.
I added two pictures, one with the error given in chrome and  one picture from IE with the methods showing.

I am using a trial version at the moment because im an intern at a company who uses telerik controls but i cant imagine that would be interfering with specific functions.

[Kevin]

i am using the 2011.2.712.40 version of the controls, it could be something they messed up in the SP.
I attatched a screenshot of my eventargs.

Maybe the Telerik team can get involved here as to why the SP doesnt seem to have these methods anymore. If this is the case then i wont be able to update my controls.

[Peter Filipov]

Hi Koen,

Please attach the "checkMaxNumFiles" method as an event handler of the OnClientFilesSelected client-side event.

Regards,
Peter Filipov
the Telerik team

[Koen]

thanks for the tip, Peter

I got it working now with some javascript but it still leaves me with a weird issue. this is the javascript now
checkMaxNumfiles is the eventhandler for OnClientFilesSelected 

var MaxFileUploads = 4;

var upload = $find("<%= RadAsyncUpload1.ClientID %>");



            function checkMaxNumFiles(sender, eventArgs) {

 

                if ((eventArgs.get_count()+upload.getUploadedFiles().length) > MaxFileUploads) {

                    eventArgs.set_cancel('true');              

                    alert(message);

                    

                }              

                }

 

        function removefileinput() {

            upload.deleteFileInputAt(upload.getUploadedFiles().length + 1);



        }

The issue that presents itself now occurs when the user exceeds the number of files he may upload, after all that an extra empty fileuploadinput row is included. I dont want and dont need this extra fileinput row.
 I can remove the row with the script removefileinput but i cant find a proper event to bind it to. I cant put it in the removefile client event, since the row hasnt put in yet.
its probably because a file gets cancelled that a new empty input file is created

[Peter Filipov]

Hello Koen,

Thank for reporting that issue. We are going to try to fix it for the next major release - Q3.2011.
Until then, please review the following code how to work around the issue.

<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" OnClientAdded="onClientAdded" OnClientFilesSelected="onClientFilesSelected" MultipleFileSelection="Automatic">
</telerik:RadAsyncUpload>

<script type="text/javascript" language="javascript">
    var isCanceled = false;
    function onClientFilesSelected(sender, args) {
        if (args.get_count() > 4) {
            args.set_cancel(true);
            isCanceled = true;
        }
    }

    function onClientAdded(sender, args) {
        if (isCanceled && sender._uploadedFiles.length > 0) {
            $telerik.$(args.get_row()).remove();
            isCanceled = false;
        }

    }
</script>

Best wishes,
Peter Filipov
the Telerik team

[Koen]

thanks for your response
made some ugly code of mine unnecessary

Koen Staal