Manage multiple AsyncUpload on same page

[Maieutiche]

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

 

[Hristo Valyavicharski]

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

[Maieutiche]

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

[Hristo Valyavicharski]

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