AsyncFileUpload problem

Article
2010-11-06

Question

_{Saturday, November 6, 2010 7:53 AM}

I have downloaded a perfectly working example of an AsyncFileUpload, here's the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo : AsyncFileUpload Control</title>

    <script type="text/javascript" language="javascript">
    
        function uploadError(sender,args)
        {
          document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }
        
        function StartUpload(sender,args)
        {
            document.getElementById('lblStatus').innerText = 'Uploading...';
        }
        
        function UploadComplete(sender,args)
        {
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            var text = ""  + filename + "      |      " + args.get_length() + " bytes";
            document.getElementById('lblStatus').innerText = text;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server" />
    <div>
    
        <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" 
        OnClientUploadError="uploadError" 
        OnClientUploadStarted="StartUpload"
        OnClientUploadComplete="UploadComplete"
        CompleteBackColor="Lime" UploaderStyle="Modern" 
        ErrorBackColor="Red" 
        ThrobberID="Throbber" 
        UploadingBackColor="#66CCFF" />

        
        <asp:Label ID="Throbber" runat="server" Style="display: none">
            <img src="Images/indicator.gif" align="absmiddle" alt="loading" />
        </asp:Label>
        <br />
        <br />
        <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
    </div>
    </form>
</body>
</html>

using System;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        if (AsyncFileUpload1.HasFile)
        {
            string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
            AsyncFileUpload1.SaveAs(strPath);
        }
    }
}

I tried to merge it with my website, with a MasterPage, and ended with this code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="AddArticle.aspx.cs" Inherits="AddArticle" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" language="javascript">

    function uploadError(sender, args) {
        document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
    }

    function StartUpload(sender, args) {
        document.getElementById('lblStatus').innerText = 'Uploading...';
    }

    function UploadComplete(sender, args) {
        var filename = args.get_fileName();
        var contentType = args.get_contentType();
        var text = "" + filename + "      |      " + args.get_length() + " bytes";
        document.getElementById('lblStatus').innerText = text;
    }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:ScriptManager ID="sm1" runat="server" />
    <div>
    
        <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" 
        OnClientUploadError="uploadError" 
        OnClientUploadStarted="StartUpload"
        OnClientUploadComplete="UploadComplete"
        CompleteBackColor="Lime" UploaderStyle="Modern" 
        ErrorBackColor="Red" 
        ThrobberID="Throbber" 
        UploadingBackColor="#66CCFF" />

        
        <asp:Label ID="Throbber" runat="server" Style="display: none">
            <img src="Images/indicator.gif" align="absmiddle" alt="loading" />
        </asp:Label>
        <br />
        <br />
        <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
    </div>
</asp:Content>

using System;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;

public partial class AddArticle : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        if (AsyncFileUpload1.HasFile)
        {
            string strPath = MapPath("~/NewsImages/") + Path.GetFileName(e.filename);
            AsyncFileUpload1.SaveAs(strPath);
        }
    }
}

In the downloaded example it's working perfectly, with indicator image showing and "Uploading..." label shows, lime background when done and all perfect.

In my code, when I choose a file, I instantly get a red background in the textbox, with no "Uploading..." label, or indicator image or anything, just instantly red background.

Plus it shows always this path: "C:\fakepath\the chosen file name]"

this happens in both example and my website, but why is it fakepath?

And what's the problem with the instant red background?

All replies (7)

_{Saturday, November 6, 2010 5:00 PM ✅Answered}

Please set the AsyncFileUpload control's ClientID="AutoID"

Here's the complete working code

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ScriptManager ID="sm1" runat="server" />
<script type="text/javascript" language="javascript">
    function uploadError(sender, args) {
        alert(args.get_errorMessage());
          document.getElementById('<%=lblStatus.ClientID%>').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";   
        }   
           
        function StartUpload(sender,args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = 'Uploading...';   
        }   
           
        function UploadComplete(sender,args) {  
            var filename = args.get_fileName();   
            var contentType = args.get_contentType();   
            var text = ""  + filename + "      |      " + args.get_length() + " bytes";
            document.getElementById('<%=lblStatus.ClientID%>').innerText = text;   
        }   
</script>
<div>   
       
        <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server"    
        OnClientUploadError="uploadError"    
        OnClientUploadStarted="StartUpload"  
        OnClientUploadComplete="UploadComplete"  
        CompleteBackColor="Lime" UploaderStyle="Modern"    
        ErrorBackColor="Red" ClientIDMode="AutoID"    
        ThrobberID="Throbber"    
        UploadingBackColor="#66CCFF" 
            onuploadedcomplete="AsyncFileUpload1_UploadedComplete" />   
  
           
        <asp:Label ID="Throbber" runat="server" >   
            <img src="Images/indicator.gif" align="absmiddle" alt="loading" />   
        </asp:Label> 
        <br />
          
        <asp:Button ID="Button1" runat="server" Text="Start Upload" 
            onclick="Button1_Click" />
          
        <br />   
        <br />   
        <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>   
    </div> 
</asp:Content>

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        //System.Threading.Thread.Sleep(5000);   
        if (AsyncFileUpload1.HasFile)   
        {   
            string strPath = MapPath("~/NewsImages/") + Path.GetFileName(e.filename);   
            AsyncFileUpload1.SaveAs(strPath);   
        }  
    }

_{Friday, November 12, 2010 2:57 PM ✅Answered}

<script type="text/javascript" language="javascript">
    function uploadError(sender, args) {
        if (document.getElementById('<%=lblStatus.ClientID%>').innerText.indexOf('must be an Image') == -1)
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Upload error!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
    }

    function StartUpload(sender, args) {
        document.getElementById('<%=lblStatus.ClientID%>').innerText = 'Uploading';
    }

    function UploadComplete(sender, args) {
        var filename = args.get_fileName();
        var contentType = args.get_contentType();
        if (contentType.indexOf('image') == -1) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
            document.getElementById('<%=AsyncFileUpload1.ClientID%>').text.style.backgroundColor = "Red";
        }
        else {
            var text = "" + filename + "      |      " + args.get_length() + " bytes";
            document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
        }
    }
    </script>

Tried this today and worked, thank's for suggestions :)

_{Sunday, November 7, 2010 1:29 PM}

Thank's it worked, but when I upload another file after the first the uploadError function instantly gets called, any ideas?

plus if I want to limit the uploaded file type its javascript thing right?

Edit:

I've done this:

function UploadComplete(sender, args) {

var filename = args.get_fileName();

var contentType = args.get_contentType();

if (contentType.indexOf('image') == -1)

uploadError();

var text = "" + filename + " | " + args.get_length() + " bytes";

document.getElementById('<%=lblStatus.ClientID%>').innerText = text;

}

function UploadComplete(sender, args) {
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            if (contentType.indexOf('image') == -1)
                uploadError();
            var text = "" + filename + "      |      " + args.get_length() + " bytes";
            document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
        }

function uploadError(sender, args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!" , "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

It works perfectly the first time I upload, but then the uploadError function always gets called instantly after i press upload

ideas?

_{Monday, November 8, 2010 7:42 AM}

Your fix is for the first upload only!

I have this code in Javascript, in both, downloaded example and my website:

<script type="text/javascript" language="javascript">
        function uploadError(sender, args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

        function StartUpload(sender, args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = 'Uploading';
        }

        function UploadComplete(sender, args) {
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            if (contentType.indexOf('image') == -1)
                uploadError();
            else {
                var text = "" + filename + "      |      " + args.get_length() + " bytes";
                document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
            }
        }     
</script>

In the example I can upload more than 1 file, and works perfectly everytime, if its not an image I get red background with that message,if its an image its green with file name and size, thats what I want exactly

but on my website its just working first time, then rest times I'm getting the uploadError() function working when I click upload..

_{Monday, November 8, 2010 12:53 PM}

Try this -- It works only for image files else shows an error messgae.

Plus it uploads any number of times you want.

Basically when the file type is not image, it cancels the async postback.

Here's the JS code

<script type="text/javascript" language="javascript">
        function uploadError(sender, args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

        function StartUpload(sender, args) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = 'Uploading';
        }

        function UploadComplete(sender, args) {
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            if (contentType.indexOf('image') != -1) {
                var text = "" + filename + "      |      " + args.get_length() + " bytes";
                document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
                return true;
            }
            else {
                // force uploading cancel
                args.set_cancel(true);
                // set reason of cancel
                args.set_errorMessage("Invalid File Format Selected");
                return false;
            }

           
        }     
</script>

_{Monday, November 8, 2010 2:47 PM}

Same problem works first time, then always red background and must upload image text (uploadError)

_{Tuesday, November 9, 2010 8:35 AM}

Could you please post the complete source code -- aspx as well as code-behind?

I would want to reproduce the same scenario here.

Share via

AsyncFileUpload problem

Question

All replies (7)

Additional resources