Home / AJAX

HOW TO Use the AsyncFileUpload Control

RSS
Modified on 2009/12/21 22:06 by Chris Muench Categorized as Uncategorized

AsyncFileUpload Demonstration



AsyncFileUpload Description

AsyncFileUpload is an ASP.NET AJAX Control that allows you asynchronously upload files to server. The file uploading results can be checked both in the server and client sides.

You can save the uploaded file by calling the SaveAs() method in a handler for the server UploadedComplete event.

NO VIDEO FOUND

AsyncFileUpload Client Code Sample




AsyncFileUpload Client Properties

AsyncFileUpload Sever Code Sample

    <script type="text/javascript">
        function fillCell(row, cellNumber, text) {
            var cell = row.insertCell(cellNumber);
            cell.innerHTML = text;
            cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
        }
        function addToClientTable(name, text) {
            var table = document.getElementById("<%= clientSide.ClientID %>");
            var row = table.insertRow(0);
            fillCell(row, 0, name);
            fillCell(row, 1, text);
        }
        
        function uploadError(sender, args) {
            addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>");
        }
        function uploadComplete(sender, args) {
            var contentType = args.get_contentType();
            var text = args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += ", '" + contentType + "'";
            }
            addToClientTable(args.get_fileName(), text);
        }
    </script>

<div class="demoarea"> <div class="demoheading">AsyncFileUpload Demonstration</div> Click '<i>Select File</i>' for asynchronous uploading. <br /><br /> <ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError" OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"/>&nbsp; <asp:Label runat="server" ID="myThrobber" style="display:none;" > <img align="absmiddle" alt="" src="uploading.gif" /> </asp:Label> <div><strong>The latest Server-side event:</strong></div> <asp:Label runat="server" Text="&nbsp;" ID="uploadResult" /> <br /><br /> <div><strong>Client-side events:</strong></div> <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;" runat="server" cellpadding="3" id="clientSide" /> </div>

AsyncFileUpload Server Properties

The properties in italics are optional.

<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
     OnClientUploadComplete="uploadComplete" runat="server"
     ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
     UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"
/> 

Events

  • UploadedComplete - Fired on the server side when the file successfully uploaded
  • UploadedFileError - Fired on the server side when the uloaded file is corrupted

Properties

  • CompleteBackColor - The control's background color on upload complete. Default value - 'Lime'.
  • ContentType - Gets the MIME content type of a file sent by a client.
  • ErrorBackColor - The control's background color on upload error. Default value - 'Red'.
  • FileContent - Gets a Stream object that points to an uploaded file to prepare for reading the contents of the file.
  • FileName - Gets the name of a file on a client to upload using the control.
  • HasFile - Gets a bool value indicating whether the control contains a file.
  • OnClientUploadComplete - The name of a javascript function executed in the client-side after the file successfully uploaded
  • OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed
  • OnClientUploadStarted - The name of a javascript function executed in the client-side on the file uploading started
  • PostedFile - Gets a HttpPostedFile object that provides access to the uploaded file.
  • ThrobberID - ID of control that is shown while the file is uploading.
  • UploaderStyle - The control's appearance style (Traditional, Modern). Default value - 'Traditional'.
  • UploadingBackColor - The control's background color when uploading is in progress. Default value - 'White'.
  • Width - The control's width (Unit). Default value - '355px'.

Methods

  • SaveAs(string filename) - Saves the contents of an uploaded file.

AsyncFileUpload Additional Code Samples