I'm posting a quick writeup on using an Adobe Flex UI to upload a file using a .NET based post handler. For whatever reason, most of the available documentation out there is a little spotty on this topic. The article is written from the perspective of an individual with a considerable amount of ASP.NET subject matter expertise, but very little practical experience with Flex / Flash development.
The short version of this is that: The Flex upload client lets us specify a url that will process the upload. That url can be a php page, jsp page, ASP.NET page, etc. In our example we're going to use an ASP.NET page handler. Our ASP.NET worker page is really just a page stub with a code behind that pulls the submitted file out of the ASP.NET Request.Files collection and saves it to a path on the server.
The more detailed version with the relevant sections of code: We'll start by taking a look at the Flex UI client for all of this. It's surprising simple. Basically it's a few UI elements, some event handlers, and a parameter or two that will need to be set. It's very similar in concept to doing a file upload with an html based form with a file browser control on it. The only secret sauce in the example below is that I've restricted the upload types to images only, and I also limit the maximum file upload to 5MB. Most of the real heavy lifting is done with our post handler.
Here's the entire .mxml file:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
// Includes
import mx.controls.Alert;
// Members
private var fileRef:FileReference;
private var fileFilter:FileFilter;
private var maxSize = 5120000;
private const FILE_UPLOAD_URL:String = "http://youserver.com/PostHandler.aspx";
private function init():void {
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
// create a FileFilter to limit file types
this.fileFilter = new FileFilter("Images", "*.png;*.jpg;*.gif;*.bmp");
}
private function browseAndUpload():void {
fileRef.browse([this.fileFilter]);
message.text = "";
}
private function fileRef_select(evt:Event):void {
try {
if (fileRef.size > maxSize)
{
Alert.show("File size cannot exceed 5MB", "File Selection Error");
}
else
{
message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
}
} catch (err:Error) {
message.text = "ERROR: zero-byte file";
}
}
private function fileRef_progress(evt:ProgressEvent):void {
progressBar.visible = true;
}
private function fileRef_complete(evt:Event):void {
message.text += " (complete)";
progressBar.visible = false;
}
]]>
</mx:Script>
<mx:NumberFormatter id="numberFormatter" />
<mx:Button label="Upload file"
click="browseAndUpload();" x="80" y="108"/>
<mx:Label id="message" x="80" y="138"/>
<mx:ProgressBar id="progressBar"
indeterminate="true"
visible="false" x="174" y="108"/>
</mx:Application>
Now that you've seen our flex client, lets move on to the worker page we're going to build in ASP.NET. There are tons of example out there on how to process an ASP.NET file upload upon postback (i.e. using the .NET model of doing things). This example is a little bit different in that it's not a postback, but rather a form submission to a completely separate page. Which is kind of a throwback to the old classic ASP days. Just to be 100% explicit about this, your worker page URL has to match what was specified in our Flex client (in our case that's http://youserver.com/PostHandler.aspx)
Our ASP.NET "worker" page is really just a webform that snags the file out of the Request.Files collected of HttpPostedFiles.
Take a look at the code (which I've just throw into the Page_Load Event):
protected void Page_Load(object sender, EventArgs e)
{
// Page should only respond to posted files
if (Request.Files.Keys.Count > 0)
{
foreach (string key in Request.Files.Keys)
{
// Block Level Variables
HttpPostedFile postedFile = Request.Files[key];
// FYI: Upload path is being pulled from application variable previously set in global.asax
string filePath = string.Format("{0}\\{1}", Application["UploadPath"].ToString(), System.IO.Path.GetFileName(postedFile.FileName));
// Save To Web Server
postedFile.SaveAs(filePath);
Response.Write("file uploaded");
}
}
else
{
throw new ApplicationException("No Files posted");
}
}
And there you have it. The only thing you really need to watch out for is to make sure you are attempting to write your file to a folder on the server that the IIS_WPG group has access to. And lasty, In my case I ultimately fleshed out the logic in the worker page to do a few more things beyond just handling the upload (store an index for the file in a database, etc.).
OFC Tech (blog)
Neighborhood Shield Drive