This post is in response to support issue Q241526=ASPxUpload Client Side Filename. Obtaining the client-side filename is a capability directly supported by the ASPxUploadControl. The relevant event is ASPxUploadControl.FileUploadComplete, and the event argument containing the original file content is DevExpress.Web.ASPxUploadControl.FileUploadCompleteEventArgs, the sup-property UploadedFile (see Figure 1).
Here is the setup for a basic use of the ASPxUploadControl. The ASPX is contained in Listing 1 and the code-behind (this time in VB) is in Listing 2.
1. Place an ASPxUploadControl on a web page
2. Define a value for the ClientInstanceName; I used uploader.
3. Set the ASPxUploadControl.AutoPostBack property to False
4. Add the ClientSideEvent Click and define as follows:
<ClientSideEvents Click="function(s, e) {
uploader.UploadFile();
}" />
5. Add an ASPxButton and set the text to upload
6. Implement the code-behind handler for the ASPxUploadControl.FileUploadComplete event using the properties window event tab
7. Implement the code-behind as shown in Listing 2
In the solution the original file name is stored in the event log—which is a form of auditing—and the original file extension is obtained. A FileStream is created and the bytes are written to a mapped folder on the server, in this case Data.
Variations on this theme are easily implemented. You could stored the file in a database. You could log the original filename in a database. You have the option of displaying the content. See my blog entry Using the ASPxUploadControl and Displaying Image Thumbnails for an example that uploads images and creates thumbnail versions for viewing.
Happy Holidays!
Figure 1: The UploadedFile property contains the client-side file information.
Figure 2: The original filename is stored in the event log as shown here.
Listing 1: The ASPX for the solution.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.v9.2, Version=9.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxUploadControl" tagprefix="dxuc" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v9.2, Version=9.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dxe" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxuc:ASPxUploadControl ID="ASPxUploadControl1" runat="server" Height="27px"
Width="208px" ClientInstanceName="uploader">
</dxuc:ASPxUploadControl>
<br />
<dxe:ASPxButton ID="ASPxButton1" runat="server" Text="Upload" AutoPostBack="False">
<ClientSideEvents Click="function(s, e) {
uploader.UploadFile();
}" />
</dxe:ASPxButton>
</div>
</form>
</body>
</html>
Listing 2: The code-behind for the solution.
Imports System.Diagnostics
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub ASPxUploadControl1_FileUploadComplete(ByVal sender As Object, _
ByVal e As DevExpress.Web.ASPxUploadControl.FileUploadCompleteEventArgs) _
Handles ASPxUploadControl1.FileUploadComplete
EventLog.WriteEntry("Application", String.Format("Uploaded: {0}", e.UploadedFile.FileName))
Dim ext As String = Path.GetExtension(e.UploadedFile.FileName)
Using stream As FileStream = New FileStream( _
Server.MapPath("~\Data\") + "uploadedfile" + ext, FileMode.CreateNew)
stream.Write(e.UploadedFile.FileBytes, 0, e.UploadedFile.FileBytes.Length)
End Using
End Sub
End Class