FileUploaded event not firing when using manual upload and custom handler

2 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Oct 2013

    Posted 17 Dec 2013 Link to this post

    Hello

    I'm building a photo cropper that loads an editor via html5 filereader.  The editor is loaded via a radAsyncUploader set to manual upload.  When the user finishes cropping they click upload, and the radAsyncUploader hits my custom handler.

    That all is working fine -  however, I can't for the life of me get the server side FileUploaded event to work.  Here's my control markup:

    <div class="buttons">
        <div>
            <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileDropped="RadAsyncUpload1_FileDropped" OnClientFileSelected="RadAsyncUpload1_FileSelected"
                OnClientFilesSelected="" HideFileInput="True" Width="221px" HttpHandlerUrl="~/CustomHandlers/CropImage.ashx" ManualUpload="True"
                OnClientFileUploaded="RadAsyncUpload1_FileUploaded" OnClientFileUploading="RadAsyncUpload1_FileUploading" EnableInlineProgress="True"
                DisableChunkUpload="True" CssClass="radButton" DropZones="#generated" OnClientFileUploadRemoved="RadAsyncUpload1_FileUploadRemoved"
                Skin="Default"></telerik:RadAsyncUpload>
        </div>
        <div >
            <input ID="UploadButton" class="upload-file" type="button" value="Upload"  onclick="startUpload()"/></div>
        <div style="clear: both">
        </div>
    Server side I have this:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadAsyncUpload1.PostbackTriggers = new string[] { "UploadButton" };
    }
     
    protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
    {
        //nothing yet!
    }
    I have tried subscribing to FileUploaded in Page_Load, as well as triggering a postpack in the client-side RadAsyncUpload1_FileUploaded
    handler.  Nothing so far has worked.  Appreciate any help on this!

    update:  I modified a sample project you guys provided showing implementation.  The event fired when using a custom handler as soon as the upload button was clicked.  However, the handler fires as soon as the file is selected.  I therefore changed manual upload to true and added an upload button click event handler to start the upload.  In this setup, the handler runs when the upload button is clicked (this is what I need to happen), but the fileUploaded event never fires.

    here's the page code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
     
     
     
    </head>
    <body>
        <form runat="server">
     
            <script type="text/javascript">
                
                
             
            </script>
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
     
            <telerik:RadAsyncUpload ID="radAsyncUpload" runat="server" EnableInlineProgress="true" OnFileUploaded="RadAsyncUpload1_FileUploaded"
                 MaxFileInputsCount="1" OnClientFileUploaded="onClientFileUploaded" OnClientFileUploadRemoved="onClientFileUploadRemoved"
                 PostbackTriggers="radUpload" HttpHandlerUrl="~/CustomHandler.ashx" DisableChunkUpload="True" ManualUpload="True" OnClientFilesSelected="onClientFileSelected" />
     
            <telerik:RadButton ID="radUpload" runat="server" Text="Upload" Enabled="false" CausesValidation="false" OnClientClicked="radUpload_Clicked" />
     
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">
                    function onClientFileUploaded(sender, args) {
                        var radUpload = $find("<%=radUpload.ClientID %>");
     
                  radUpload.set_enabled(true);
              }
                    function onClientFileUploadRemoved(sender, args) {
                        var radUpload = $find("<%=radUpload.ClientID %>");
     
                  radUpload.set_enabled(false);
              }
                    function onClientFileSelected(sender, args) {
                        var radUpload = $find("<%=radUpload.ClientID %>");
     
                  radUpload.set_enabled(true);
              }
                function radUpload_Clicked(sender,args)
                {
                    var upload = $find('<%=radAsyncUpload.ClientID%>');
                    upload.startUpload();
                }
              </script>
            </telerik:RadScriptBlock>
     
     
     
     
     
     
        </form>
    </body>
    </html>




    Thanks,
    Michael
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Dec 2013 Link to this post

    Hello Michael,

    Having the current logic that you implemented it is expected that the OnFileUploaded event does not fire. This is due to the fact that the file needs to be uploaded on the first place in order for the server-side event to fire. In your scenario however, you perform both postback with the button (whose id is radUpload) and at the same time start uploading the file (you set the ManualUpload to true) which is causing the issue in your case. One approach that you can use is to to set the ManualUpload property to false and implement the needed logic in the OnFileUploaded event.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top