Ajax Upload and Clear Pending Uploads

[James Daresta]

I am trying to to use the AsyncUpload so that when a user chooses a file to upload via ajax it is sent to the server and put into a collection object with existing attachments associated with my form. Using a sample from the demos and documentation I have it doing, this, but I have an issue that when it uploads I want to clear the pending upload screen. Essentially I want to clear the UploadedFiles items when it does the ajax routine. However no matter what I do it won't work. I get an enumeration error when I use the clear method. Any help on this would be appreciated. Again all I want is when the upload file is selected an ajax call posts it back, it's added to a collection and then upload control is cleared so they can add more.

ASP.NET

<telerik:RadAsyncUpload ID="rulAttachments" runat="server" RenderMode="Lightweight" AutoAddFileInputs="false" Localization-Select="" MaxFileSize="5000000" OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="rulAttachments_FileUploaded" ></telerik:RadAsyncUpload>

 

Javascript

function OnClientClickingUpload(sender) {
    //sender.set_autoPostBack(false);
    $telerik.$(".ruFileInput").click();
}

(function (global, undefined) {
    var demo = {};

    function OnClientFilesUploaded(sender, args) {
        $find(demo.ajaxManagerID).ajaxRequest();
    }

    function serverID(name, id) {
        demo[name] = id;
    }

    global.serverID = serverID;

    global.OnClientFilesUploaded = OnClientFilesUploaded;
})(window);

//<![CDATA[
serverID("ajaxManagerID", "<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
    //]]>

 

C#

protected void rulAttachments_FileUploaded(object sender, FileUploadedEventArgs e)
 {
     if (rulAttachments.UploadedFiles.Count > 0)
     {
         byte[] content;
             using (Stream str = e.File.InputStream)
             {
                 content = new byte[str.Length];
                 str.Read(content, 0, content.Length);
             }
             SelectedInventoryRequest.Attachments.Add(new BLL.FileAttachment { Id = "", Description = e.File.FileName, FileData = content, NewFile = true, FilePath = ConfigurationManager.AppSettings["DocumentumInProcessPath" + ConfigurationManager.AppSettings["CurrentRegion"]] + "/" + SelectedInventoryRequest.InventoryRequestID.ToString() });

         rulAttachments.UploadedFiles.RemoveAt(0);

         BindAttachments();
     }
 }

 

 

[Marin Bratanov]

Hi James,

Can you confirm the upload control is added as an UpdatedControl in the RadAjaxManager setting where the ajax manager itself is the initiator?

When the file is uploaded and you POST the page, and handle the file in the FileUploaded event, the row on the client-side will be cleared automatically without you having to do something explicitly.

You can find below a simple snippet that works as expected, and a short video is available at the end of my post.

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rulAttachments" />
                <telerik:AjaxUpdatedControl ControlID="Label1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<asp:Label Text="" ID="Label1" runat="server" />
<telerik:RadAsyncUpload ID="rulAttachments" runat="server" RenderMode="Lightweight" AutoAddFileInputs="false" Localization-Select="" MaxFileSize="5000000" OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="rulAttachments_FileUploaded"></telerik:RadAsyncUpload>

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script>
        function OnClientFilesUploaded(sender, args) {
            $find("<%=RadAjaxManager.GetCurrent(Page).ClientID%>").ajaxRequest();
    }
    </script>
</telerik:RadCodeBlock>

protected void rulAttachments_FileUploaded(object sender, FileUploadedEventArgs e)
{
    if (rulAttachments.UploadedFiles.Count > 0)
    {
        byte[] content;
        using (Stream str = e.File.InputStream)
        {
            content = new byte[str.Length];
            str.Read(content, 0, content.Length);
        }
        //SelectedInventoryRequest.Attachments.Add(new BLL.FileAttachment { Id = "", Description = e.File.FileName, FileData = content, NewFile = true, FilePath = ConfigurationManager.AppSettings["DocumentumInProcessPath" + ConfigurationManager.AppSettings["CurrentRegion"]] + "/" + SelectedInventoryRequest.InventoryRequestID.ToString() });

        //rulAttachments.UploadedFiles.RemoveAt(0);
        Label1.Text = DateTime.Now.ToString();

        //BindAttachments();
    }
}

Regards,

 

Marin Bratanov
Progress Telerik

[James Daresta]

I think it is the not having it as the UpdatedControl. I am using the proxy so would I need to add it server side and if so in page load or what other event step?

[Marin Bratanov]

Yes, you need to add the setting programmatically in Page_Load:https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/how-to/add-ajaxsettings-programmatically.

--Marin

[James Daresta]

That solved it. Thank you.