Get the number of files with MultipleFiles mode

2 posts, 0 answers
  1. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 18 Nov 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top