Manage multiple AsyncUpload on same page

4 posts, 0 answers
  1. Maieutiche
    Maieutiche avatar
    4 posts
    Member since:
    Oct 2008

    Posted 11 Aug 2015 Link to this post

    Scenario:

    • "page with modal window for upload multiple file";
    • in modal window there are two async controls:
      • One for browser with Drag&Drop enabled;
      • One for browser with NO Drag&Drop;
      • Each control is show/hide by jquery/CSS

    We want:

    • to clear all uploaded/uploading file when user clic on "X" or close button of modal window (open/closed by jquery): but.. how we can find ALL asyncupload controls on the page without using (open/close/function to manage drag/drop are on a file .js !):

    var upload1 = $find("<%= RadUpload1.ClientID %>");
    var upload2 = $find("<%= RadUpload2.ClientID %>");

    • to disable "Submit" button if there is an uploading file

     

  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 12 Aug 2015 Link to this post

    Hi Maieutiche,

    There is no event for the Cancel and Remove buttons. That's why you can use jQuery to attach new event handlers when any of these buttons is clicked:
    http://www.telerik.com/forums/how-to-trap-when-user-clicks-on-cancel-button

    Here is how you can get reference of all AsyncUploads on the page without using ClientID:

    <script type="text/javascript">
        var uploads = [];
     
        function pageLoad() {
            $('div.RadAsyncUpload').each(function (index, value) {
                var id = $(value).attr('id');
                uploads.push($find(id));
            });
        }
    </script>


    Regards,
    Hristo Valyavicharski
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maieutiche
    Maieutiche avatar
    4 posts
    Member since:
    Oct 2008

    Posted 12 Aug 2015 in reply to Hristo Valyavicharski Link to this post

    Hi, your script help me, but ​i'm not able to use client side function on founded object, "function is unavaileble" for all

     

    $(function () {
        var dlg = $(".dialog.fileupload").dialog({
            appendTo: "form",
            autoOpen: false,
            closeOnEscape: false,
            modal: true,
            width: 750,
            height: 450,
            minHeight: 200,
            minWidth: 300,
            close: function (type, data) {
                if (uploadInProgress()) {
                    $telerik.$('.RadAsyncUpload').each(function (index, value) {
                        var id = $(value).attr('id');
                        var upload = $.find(id);
                        if (upload != null) {
                            var inputs = upload.getFileInputs();
                            for (i = inputs.length - 1; i >= 0; i--) {
                               upload.clearFileInputAt(i);
                               upload.deleteFileInputAt(i);
                            }
                        }
                    });
                }
                $(this).find("input[type='text']").val('');
                $(this).find("input[type='checkbox']").prop('checked', false);
            }
        });
     function uploadInProgress() {
        var $=$telerik.$;
        var uploadingRows = $(".RadAsyncUpload").find(".ruUploadProgress");
        //iterates and checks is there any file uploads that are successfully completed or failed and if yes - pop-up an alert box and prevent page submitting
        for (var i = 0; i < uploadingRows.length; i++) {
            if (!$(uploadingRows[i]).hasClass("ruUploadCancelled") && !$(uploadingRows[i]).hasClass("ruUploadFailure") && !$(uploadingRows[i]).hasClass("ruUploadSuccess")) {
                return true;
            }
        }
     
            return false;
        }
    }

    i get an error on:

    var inputs = upload.getFileInputs();

     

    I'm using last release of AsyncUpload

  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 13 Aug 2015 Link to this post

    As far as I see you are using jQuery's $.find:
    var upload = $.find(id);

    which returns html element. You must use Ajax $find method in order to get the RadAsyncUpload client object and use its Client Side API.

    Regards,
    Hristo Valyavicharski
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top