RadAsyncUpload OnFileUploaded event not firing

[Andy H]

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?

[Veselin Vasilev]

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.

[Andy H]

Ah ok. Thanks for clearing things up.

[Suraj Shrestha]

Is there a way to automatically postback when file upload is complete?  
It seems quite annoying to me to hit some button for postback.

[Andy H]

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;
}

[wei]

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

[Raqibur]

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>

 

[Plamen]

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

[Peter]

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?

[SANJAY]

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

[Peter]

Yes, however, the dummy button is a hack - there should be a better way. 

[Nencho]

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

 

 

[chaitanya]

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
 

[Nencho]

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

 

 

[chaitanya]

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>

[Nencho]

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

 

 

[access]

Thanks. it works.

[vivek]

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.

[vivek]

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.
07.<html xmlns="http://www.w3.org/1999/xhtml">
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>

[vivek]

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.
07.<html xmlns="http://www.w3.org/1999/xhtml">
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.

[Plamen]

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

[Theo]

I totally agree.... why not add a "simple mode"that saves the file in the target folder as soon as the upload is complete?

[Plamen]

Hello,

Thank you for sharing your feedback - basically there are several easy ways to achieve this functionality that have been used so far and that is why we have left it to the custom case of the client. Yet you can always submit a feature request about the desired functionality here. 

Regards,
Plamen
Telerik by Progress

[Sony]

I am facing a similar issue now.

How would the client JavaScript can cell the serverside method defined for the OnFileUploaded method, OnFileUploaded requires FileUploadedEventArgs attribute. If we implement the AjaxCall using the RadButton click( as given as the hack way), how would we even convert the EventArgs to FileUploadedEventArgs, as RadButton click looks for FileUploadedEventArgs

[Peter Milchev]

Hello Sony,

There is no need for the JavaScript to call any server-side method, it just needs to trigger a postback. 

Once a postback is triggered, the files' information will be automatically handled by the AsyncUpload and it will fire its OnFileUploaded server-side event.

The button click is used as a more convenient way to trigger a postback. If you do not need to have a hidden feedback, you can trigger a full postback using the window.__doPostBack() method or trigger a partial postback via the AjaxManager as demonstrated here:

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

As you can see there, the JavaScript is only triggering the postback (e.g. calling $find(demo.ajaxManagerID).ajaxRequest();) and you do not have anything additional on the server-side, the FileUploaded event will be triggered automatically.

Regards,
Peter Milchev
Progress Telerik