RadAsyncUpload OnFileUploaded event not firing

21 posts, 0 answers
  1. Andy H
    Andy H avatar
    12 posts
    Member since:
    Oct 2009

    Posted 19 Apr 2010 Link to this post

    I've just added the RadAsyncUpload control to a page and I'm trying to get OnFileUploaded event to fire, but can't seem to get it going.

    Here's my aspx code:

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"></telerik:RadAjaxPanel> 
    <telerik:RadScriptManager  ID="ScriptManager1" runat="server" /> 
    <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />                                                           
    <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" OnFileUploaded="fileUploaded" /> 
    <telerik:RadProgressArea runat="server" ID="RadProgressArea1" /> 

    And my code behind:
    protected void fileUploaded(object sender, FileUploadedEventArgs e) 
        System.Diagnostics.Debug.WriteLine(e.File.FileName); 


    Any idea what I'm doing wrong?
  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 20 Apr 2010 Link to this post

    Hello Andy H,

    The event will fire if you submit the page (either with postback or with ajax).

    Best wishes,
    Veskoni
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy H
    Andy H avatar
    12 posts
    Member since:
    Oct 2009

    Posted 20 Apr 2010 Link to this post

    Ah ok. Thanks for clearing things up.
  5. Suraj Shrestha
    Suraj Shrestha avatar
    7 posts
    Member since:
    Sep 2012

    Posted 23 Sep 2010 Link to this post

    Is there a way to automatically postback when file upload is complete?  
    It seems quite annoying to me to hit some button for postback.
  6. Andy H
    Andy H avatar
    12 posts
    Member since:
    Oct 2009

    Posted 24 Sep 2010 Link to this post

    You can trigger a button click from the RadControl. It's clunky but it works.

    aspx:
    <telerik:RadAsyncUpload runat="server" ID="rauUploader" OnClientFileUploaded="fileUploaded" />
    <asp:Button ID="btnDummy" runat="server" onclick="btnDummy_Click" style="display: none;" />
    <script type="text/javascript">
        function fileUploaded(sender, args) {
            document.getElementById("<%= btnDummy.ClientID %>").click();
        }
    </script>

    aspx.cs:
    protected void btnDummy_Click(object sender, EventArgs e)
    {
        // Your code here
    }

    This will cause the RadControl to lose its list of uploaded files. I added some code in the btnDummy_Click to store the docs in my DB. I created a user control (RadAsyncUploaderExtender.ascx) to show these already uploaded files:

    .ascx:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadAsyncUploaderExtender.ascx.cs" Inherits="UserControls_RadAsyncUploaderExtender" %>

    .ascx.cs:
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
        
    public partial class UserControls_RadAsyncUploaderExtender : UserControl
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {
            PopulateControl();
        }
        
        protected void PopulateControl()
        {
            Controls.Clear();
      
            List<MyFile> myFiles = ...;     // Get a list of files from wherever
               
            for (int i = 0; i < myFiles.Count; i++)
            {
                Panel pnl = new Panel();
                pnl.CssClass = "upload_item";
        
                Label lbl = new Label();
                lbl.CssClass = "upload_item_name";
                lbl.Text = myFiles[i].FileName + myFiles[i].Extension;
        
                Button btn = new Button();
                btn.ID = string.Format("btn{0}", i);
                btn.CssClass = "upload_item_remove";
                btn.Text = "Remove";
                  
                // ID in the DB.
                // I used a Session variable and an MD5 hash in cases where I
                // did not want to store files in the DB directly.
                btn.CommandArgument = myFiles[i].ID;
                btn.Click += new EventHandler(btn_Click);
        
                pnl.Controls.Add(lbl);
                pnl.Controls.Add(btn);
        
                Controls.Add(pnl);
            }
        }
        
        void btn_Click(object sender, EventArgs e)
        {
            Button btn = null;
        
            if (sender.GetType() != typeof(Button))
            {
                PopulateControl();
                return;
            }
        
            btn = (Button)sender;
        
            if (string.IsNullOrEmpty(btn.CommandArgument))
            {
                PopulateControl();
                return;
            }
        
            // Get file to be deleted
            int fileID = 0;
            int.TryParse(btn.CommandArgument, out fileID);
            List<MyFile> myFiles = ...;     // Get a list of files from wherever
            MyFile myFile = (from x in myFiles where x.ID == fileID select x).FirstOrDefault();
        
            // Delete MyFile
        
            PopulateControl();
        }
    }


    And the .css:
    .upload_item
    {
        padding-top: 5px;
        padding-bottom: 8px;
    }
     
    .upload_item_name
    {
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 11px;
        padding-left: 18px;
        background-image: url('../images/upload_ok.gif');
        background-repeat: no-repeat;
        background-position: 0px 0px;
        margin-right: 15px;
    }
     
    .upload_item_remove
    {
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 10px;
        color: #333;
        padding-left: 10px;
        background-image: url('../images/upload_remove.gif');
        background-repeat: no-repeat;
        background-color: Transparent;
        background-position: 0px 2px;
        border:0 none;
        cursor: pointer;
        overflow: visible;
    }
  7. wei
    wei avatar
    1 posts
    Member since:
    Dec 2010

    Posted 27 Dec 2010 Link to this post

    Hi All,

    RadAsyncUpload OnFileUploaded working fine for me. But when I use the RadAsyncUpload control in sharepoint webpart (wss3), the FileUploaded event was not fired during postback.

    Does anyone know how to fix it? Thanks in advance!

    Wei
  8. Raqibur
    Raqibur avatar
    1 posts
    Member since:
    Jan 2013

    Posted 02 Jan 2013 Link to this post

    Hi,
    I have used RadAsyncUpload for uploading files. Now what I am trying to do is to check the type of the file on the fly and activate a text box to input ALT if the type is an image. I want this check to be done befor post back. Some help will be very appreciated. I have attached my code here. In my code none of the string attribute (eg. indexOf, Search, Substr) is working, dono why.


    <

     telerik:RadAsyncUpload ID="uploadfilesUpload" runat="server" Skin="Default" TabIndex="7"

     TargetFolder="~/uploadedfiles" Width="500px" TemporaryFolder="~/uploadedfiles" OverwriteExistingFiles="true" OnClientFileSelected="CheckExtension">

     

     </telerik:RadAsyncUpload>

     </td></tr>

     <tr><td>

     <asp:Label ID="Alt_label" runat="server" Text="Please input alternative text for the image" Visible="false"></asp:Label>  

    <asp:TextBox ID="Alt" runat="server" Visible="false" ></asp:TextBox>  <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

     <script type="text/javascript">

    function CheckExtension(sender, args) {

     var input = args.get_fileName();  

    var n = input.indexOf(".");

     var fileExtension = input.substr(n + 1);

     if (fileExtension == "jpg") {

     //code for making label and text box visible will go here

      

    }

      

    }

    </script>

     </telerik:RadScriptBlock>

     

  9. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 07 Jan 2013 Link to this post

    Hello,

    You can try getting the file extension as it is done in this help article.

    Hope this will be helpful.

    Kind regards,
    Plamen
    the Telerik team
    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 their blog feed now.
  10. Peter
    Peter avatar
    98 posts
    Member since:
    Mar 2012

    Posted 10 Aug 2014 in reply to Plamen Link to this post

    I don't understand the problem - why doesn't the event fire as soon as the file is uploaded? Should there be an AutoPostBack property on the control?
  11. SANJAY
    SANJAY avatar
    61 posts
    Member since:
    Jun 2012

    Posted 10 Aug 2014 in reply to Peter Link to this post

    Hi Peter

    The probable reasons could be

    1) There is a possibility that user might be wanting to upload multiple files so the interface could trigger a post back after every file.
    2) The programmer is given liberty to validate other variables on the page and has a control on the post back event

    Regards

    Sanjay
  12. Peter
    Peter avatar
    98 posts
    Member since:
    Mar 2012

    Posted 10 Aug 2014 in reply to SANJAY Link to this post

    Yes, however, the dummy button is a hack - there should be a better way. 
  13. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 13 Aug 2014 Link to this post

    Hello Peter,

    Another possible approach is demonstrated in the following online demo :

    http://demos.telerik.com/aspnet-ajax/imageeditor/examples/imageupload/defaultcs.aspx?product=asyncupload


    You could trigger an ajaxRequest at the OnClientFilesUploaded and thus process the selected files.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. chaitanya
    chaitanya avatar
    5 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 Link to this post

    RadAsyncUpload OnFileUploaded event not firing in ie9 it works in other browser for postback i wrote the OnClientFileUploaded but it also not firing
    can any one please help me
     
  15. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 10 Oct 2014 Link to this post

    Hello Chaitanya,

    Could you please provide us with the implementation of the RadAsyncUpload that you use at your end, in order to try to replicate the described issue locally. In addition, specify the version that you are currently using. Lastly, try to disable the plugins by setting the DisablePlugins property of the RadAsyncUpload to false and let us know the experienced behavior.


    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. chaitanya
    chaitanya avatar
    5 posts
    Member since:
    Oct 2014

    Posted 13 Oct 2014 in reply to Nencho Link to this post

    My Telerik Version is 2012.2.912.40 and i tried DisablePlugin Property there is no change in behaviour 
     <asp:Panel ID="pnlMainContent1" runat="server" Visible="false">

                          <div class="license_upload">

                            <div class="upload_btn">
                                <a href="#" id="lnkPreview1" target="_blank" runat="server">
                                    <img id="imgPreview1" src="images/viewfile.png" alt="" height="350" width="350" runat="server" /></a>
                            </div>

                               <div style="float: left;">

                                   <div class="" style="width: auto; float: right; margin-top: 15px;">
                                <telerik:RadButton ID="btnSubmit1" runat="server" Text="Submit" CssClass="next_btn lnkvldtn" OnClientClicking="clientvalidate1" ValidationGroup="Submit1" OnClick="btnSubmit1_Click" EnableEmbeddedSkins="false" Skin="SamevaBlack">
                                </telerik:RadButton>
                            </div>

                            <div class="upload_btn">
                                <a href="javascript:void(0);" class="next_btn lnkupload1"><span><i class="fa fa-upload"></i></span>&nbsp;   Upload New File</a>
                            </div>
                               
                              </div>

                        </div>
            </asp:Panel>
                       <div id="uploadnew" style="display: none;">
                           
                     <telerik:RadAsyncUpload ID="fileUpload1" runat="server" DisablePlugins="false" DisableChunkUpload="false" EnableInlineProgress="true"
                AutoAddFileInputs="false" HideFileInput="true" Localization-Select="Upload License" Width="200"
                OnClientFileUploaded="onClientFileUploaded" OnClientFileUploadFailed="onUploadFailed1" PostbackTriggers="btnFileUploa1" OnFileUploaded="fileUpload1_FileUploaded"  />
            <telerik:RadButton ID="btnFileUploa1" runat="server" Text="Upload" CssClass="next_btn" ValidationGroup="None" OnClick="btnFileUploa1_Click" EnableEmbeddedSkins="false" Skin="SamevaBlack">
            </telerik:RadButton>
                                               
                           </div>
  17. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 15 Oct 2014 Link to this post

    Hello Andre,

    I have performed some local tests, base on the provided code snippet and the specified version of our product, but I am afraid that I was unable to replicate the described issue. Below you could find a video, demonstrating the behavior at my end.

    http://screencast.com/t/HzGimiIDue

    Please correct me if I had missed something or doing anything wrong.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  18. access
    access avatar
    3 posts
    Member since:
    Sep 2012

    Posted 23 Apr 2015 in reply to Andy H Link to this post

    Thanks. it works.
  19. vivek
    vivek avatar
    3 posts
    Member since:
    Nov 2014

    Posted 28 Jun in reply to Nencho Link to this post

    My below code is working good from past 3 years Window7 Enterprise IE9, IE11 

    <%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="KWebApp.UploadFile" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">     <title></title>     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <script type="text/javascript" lang="javascript">        var startTime;        function OnClientFileSelected(sender) {             startTime = (new Date()).getTime();         }         function OnClientFilesUploaded(sender) {             document.getElementById('divStatus').innerHTML = '<b>Please Wait...</b><img border=0 height=16 width=16 src="Images/ajax-loader.gif"><br /><br />Your file is currently being uploaded and it will appear in the corresponding DRMS workspace when it has completed. Closing this message box will not impact the upload of your file.';             __doPostBack('btnSave', startTime);         }     </script></head><body>     <form id="form1" runat="server">         <div>             <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />             <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" HorizontalAlign="NotSet">                 <div id="pathDiv" style="font-size: 10pt; padding-bottom: 8px;">                     <asp:Label runat="server" ID="lblPath"></asp:Label>                 </div>                 <div id="divStatus"></div>                 <telerik:RadAsyncUpload runat="server"                      ID="AsyncUpload1" ChunkSize="2097152"                      OnClientFileSelected="OnClientFileSelected"                      OnClientFileUploaded="OnClientFilesUploaded"                      MultipleFileSelection="Disabled" MaxFileInputsCount="1">                     <Localization Select="Browse" />                 </telerik:RadAsyncUpload>                 <telerik:RadProgressArea runat="server" ID="RadProgressArea1" ProgressIndicators="TotalProgressBar, TotalProgressPercent, TotalProgress, CurrentFileName, TimeElapsed, TransferSpeed" />                 <asp:Button ID="btnSave" runat="server" Visible="false" Text="Save" />             </telerik:RadAjaxPanel>             <asp:Panel runat="server" ID="pnlDone" Visible="false">                 <div style="font-size: 10pt;">                     Document Successfully Uploaded.<br />                     Please refresh the page to see your uploaded document.                 </div>             </asp:Panel>         </div>     </form></body></html>

     

    It is not working when my firm moved to Windows 10

    I trouble shoot and found that "function OnClientFilesUploaded(sender) " is never triggered.

  20. vivek
    vivek avatar
    3 posts
    Member since:
    Nov 2014

    Posted 28 Jun in reply to vivek Link to this post

    01.<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="KWebApp.UploadFile" %>
    02. 
    03.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    04. 
    05.<!DOCTYPE html>
    06. 
    08.<head runat="server">
    09.    <title></title>
    10.    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    11.    <script type="text/javascript" lang="javascript">
    12.       var startTime;
    13. 
    14.       function OnClientFileSelected(sender) {
    15.            startTime = (new Date()).getTime();
    16.        }
    17. 
    18.        function OnClientFilesUploaded(sender) {
    19.            document.getElementById('divStatus').innerHTML = '<b>Please Wait...</b><img border=0 height=16 width=16 src="Images/ajax-loader.gif"><br /><br />Your file is currently being uploaded and it will appear in the corresponding DRMS workspace when it has completed. Closing this message box will not impact the upload of your file.';
    20.            __doPostBack('btnSave', startTime);
    21.        }
    22.    </script>
    23.</head>
    24.<body>
    25.    <form id="form1" runat="server">
    26.        <div>
    27.            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    28. 
    29.            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" HorizontalAlign="NotSet">
    30. 
    31.                <div id="pathDiv" style="font-size: 10pt; padding-bottom: 8px;">
    32.                    <asp:Label runat="server" ID="lblPath"></asp:Label>
    33.                </div>
    34.                <div id="divStatus"></div>
    35. 
    36.                <telerik:RadAsyncUpload runat="server"
    37.                    ID="AsyncUpload1" ChunkSize="2097152"
    38.                    OnClientFileSelected="OnClientFileSelected"
    39.                    OnClientFileUploaded="OnClientFilesUploaded"
    40.                    MultipleFileSelection="Disabled" MaxFileInputsCount="1">
    41.                    <Localization Select="Browse" />
    42.                </telerik:RadAsyncUpload>
    43.                <telerik:RadProgressArea runat="server" ID="RadProgressArea1" ProgressIndicators="TotalProgressBar, TotalProgressPercent, TotalProgress, CurrentFileName, TimeElapsed, TransferSpeed" />
    44.                <asp:Button ID="btnSave" runat="server" Visible="false" Text="Save" />
    45. 
    46.            </telerik:RadAjaxPanel>
    47.            <asp:Panel runat="server" ID="pnlDone" Visible="false">
    48.                <div style="font-size: 10pt;">
    49.                    Document Successfully Uploaded.<br />
    50.                    Please refresh the page to see your uploaded document.
    51.                </div>
    52.            </asp:Panel>
    53.        </div>
    54.    </form>
    55.</body>
    56.</html>
  21. vivek
    vivek avatar
    3 posts
    Member since:
    Nov 2014

    Posted 28 Jun in reply to Nencho Link to this post

    My below code is working good from past 3 years Window7 Enterprise IE9, IE11 
    01.<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="KWebApp.UploadFile" %>
    02. 
    03.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    04. 
    05.<!DOCTYPE html>
    06. 
    08.<head runat="server">
    09.    <title></title>
    10.    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    11.    <script type="text/javascript" lang="javascript">
    12.       var startTime;
    13. 
    14.       function OnClientFileSelected(sender) {
    15.            startTime = (new Date()).getTime();
    16.        }
    17. 
    18.        function OnClientFilesUploaded(sender) {
    19.            document.getElementById('divStatus').innerHTML = '<b>Please Wait...</b><img border=0 height=16 width=16 src="Images/ajax-loader.gif"><br /><br />Your file is currently being uploaded and it will appear in the corresponding DRMS workspace when it has completed. Closing this message box will not impact the upload of your file.';
    20.            __doPostBack('btnSave', startTime);
    21.        }
    22.    </script>
    23.</head>
    24.<body>
    25.    <form id="form1" runat="server">
    26.        <div>
    27.            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    28. 
    29.            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" HorizontalAlign="NotSet">
    30. 
    31.                <div id="pathDiv" style="font-size: 10pt; padding-bottom: 8px;">
    32.                    <asp:Label runat="server" ID="lblPath"></asp:Label>
    33.                </div>
    34.                <div id="divStatus"></div>
    35. 
    36.                <telerik:RadAsyncUpload runat="server"
    37.                    ID="AsyncUpload1" ChunkSize="2097152"
    38.                    OnClientFileSelected="OnClientFileSelected"
    39.                    OnClientFileUploaded="OnClientFilesUploaded"
    40.                    MultipleFileSelection="Disabled" MaxFileInputsCount="1">
    41.                    <Localization Select="Browse" />
    42.                </telerik:RadAsyncUpload>
    43.                <telerik:RadProgressArea runat="server" ID="RadProgressArea1" ProgressIndicators="TotalProgressBar, TotalProgressPercent, TotalProgress, CurrentFileName, TimeElapsed, TransferSpeed" />
    44.                <asp:Button ID="btnSave" runat="server" Visible="false" Text="Save" />
    45. 
    46.            </telerik:RadAjaxPanel>
    47.            <asp:Panel runat="server" ID="pnlDone" Visible="false">
    48.                <div style="font-size: 10pt;">
    49.                    Document Successfully Uploaded.<br />
    50.                    Please refresh the page to see your uploaded document.
    51.                </div>
    52.            </asp:Panel>
    53.        </div>
    54.    </form>
    55.</body>
    56.</html>
    It is not working when my firm moved to Windows 10
    I trouble shoot and found that "function OnClientFilesUploaded(sender) " is never triggered.
  22. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 01 Jul Link to this post

    Hello,

    I have tested the issue but could not replciate the issue. Would you please elaborate a little bit what version of the control are you using and  if you still observe the issue with only RadAsyncUplaod on the page as for example below:
      <script type="text/javascript" lang="javascript">
                   var startTime;
             
                   function OnClientFileSelected(sender) {
                           alert(2)
                        }
              
                    function OnClientFilesUploaded(sender) {
                    alert(1)
                        }
                </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     
                    <telerik:RadAsyncUpload runat="server"
                        ID="AsyncUpload1" ChunkSize="2097152"
                        OnClientFileSelected="OnClientFileSelected"
                        OnClientFileUploaded="OnClientFilesUploaded"
                        MultipleFileSelection="Disabled" MaxFileInputsCount="1">
                        <Localization Select="Browse" />
                    </telerik:RadAsyncUpload>
     
     
            </div>
        </form>
    </body>


    Regards,
    Plamen
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017