This is a migrated thread and some comments may be shown as answers.

Get the number of files with MultipleFiles mode

1 Answer 225 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Daniel Plomp
Top achievements
Rank 2
Daniel Plomp asked on 18 Nov 2013, 11:38 AM
Hi,

I use the RadAsyncUpload control to let visitors select one or more files.
I only want my upload / save button to be enabled whenever:

1. There are files available and actually uploaded
2. When NO upload is currently active

Is there a way to check how many files are actually uploaded and still uploading?
If I remove a file, or add a file I need to have some sort of client-side counter.

Not sure how to achieve.

Any ideas, samples?

Thanks,
Daniel

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 19 Nov 2013, 05:38 AM
Hi Daniel,

You can make use of the client events of RadAsyncUpload to achieve your scenario. Please have a look into the sample code I tried to disable the Save button based on your conditions.

ASPX:
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" TargetFolder="~/Images/Img/"
    MultipleFileSelection="Automatic" UploadedFilesRendering="BelowFileInput" OnClientFilesUploaded="OnClientFilesUploaded"
    OnClientFilesSelected="OnClientFilesSelected" OnClientFileUploading="OnClientFileUploading"
    OnClientFileUploadRemoved="OnClientFileUploadRemoved">
</telerik:RadAsyncUpload>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Save" Enabled="false">
</telerik:RadButton>

JavaScript:
<script type="text/javascript">
    var count = 0;
    function OnClientFilesSelected(sender, args) {
        // Disable the button when files are selected and upload is about to start.
        count = args.get_count();
        var radbutton = $find('<%=RadButton1.ClientID %>');
        if (radbutton.get_enabled()) {
            radbutton.set_enabled(false);
        }
    }
 
    function OnClientFilesUploaded(sender, args) {
        //Enable button once all files are uploaded.
        $find('<%=RadButton1.ClientID %>').set_enabled(true);
    }
 
    function OnClientFileUploadRemoved(sender, args) {
        //Disable button if all the client uploaded files are removed.
        if (sender.getUploadedFiles().length < 1) {
            $find('<%=RadButton1.ClientID %>').set_enabled(false);
        }
    }
 
    function OnClientFileUploading(sender, args) {
        // Enable the button when only one file is selected for upload but upload process is cancelled by the user in between And previously client uploaded files are there.
        var row = args.get_row();
        var cancel = $telerik.$(row).find(".ruCancel");
        cancel.on('click', function () {
            if (sender.getUploadedFiles().length > 0 && count == 1) {
                count = 0;
                $find('<%=RadButton1.ClientID %>').set_enabled(true);
            }
        });
    }
</script>

Thanks,
Shinu.
Tags
AsyncUpload
Asked by
Daniel Plomp
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
Share this question
or