More Flex surprises : File uploading and downloading

18 01 2008

(Mar 26 08): Note, if you accidentally put the declaration of the FileReference object inside a function, it will cause your uploads and downloads not to work without giving you a reason as to why. Essentially, the FileReference instance needs the scope of the class you are working on. It will not fire events if it only lives inside a function, because obviously when the function ends so does your variable. For example, if the code below declared
private
var fileReference:FileReference; inside the goDownload() function, your downloads wouldn’t work, because the object would disappear once the function ended.

File uploading and downloading. Hmmm. It’s not that it’s hard, it’s just that when you want to access files in the local filesystem whilst testing via Flex Builder, you get the error:

Error #2039: Invalid remote URL protocol. The remote URL protocol must be HTTP or HTTPS.

OK, so wtf? The code is straight out of the Adobe Help and it’s been reinforced by the Programming Flex 2 by Oreilly. Oh, didn’t you know? To make the code work without a HTTP or HTTPS protocol, you have to test within a HTTP protocol – such as localhost, rather than just testing via Flex in the usual file:/// methodology.

The code below will download the local file “a.swf” to the user, popping up a dialog box for them to choose the download location, with the default filename “dlSwf.swf”. The uploading will popup a dialog box to choose the file, then POST the results to the URL you provide. The name of the form object that the file upload comes up as is FileData.Use the params code to send any extra parameters to the upload script. TheMXML code and some PHP code to accept uploads are below. NB: some of this code comes from the Adobe Flex Help files (working with file upload and download).

MXML code:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html>

<mx:Button id=”ul” label=”upload” click=”goUpload(event)” x=”168” y=”34/>

<mx:Button id=”dl” label=”download” click=”goDownload(event)” x=”295” y=”34/>

<mx:Script>

<![CDATA[

private var fileReference:FileReference;

private function goDownload(event:Event):void

{

fileReference = new FileReference( );

fileReference.download(new URLRequest(“a.swf”), “dlSwf.swf”);

}

private function goUpload(event:Event):void

{

fileReference = new FileReference( );

fileReference.browse();

fileReference.addEventListener(Event.SELECT,selectedFile);

}

private function selectedFile(event:Event):void

{

//pass extra parameters if required

var params:URLVariables = new URLVariables();

params.date = new Date();

params.ssid = “94103-1394-2345”;

var request:URLRequest = new URLRequest(“upload.php”);

request.method = URLRequestMethod.POST;

request.data = params;

//upload.php is the script to handle the uploaded file,

//fileUpload is the name of the fileupload form object

fileReference.upload(request,“fileUpload”);

}

]]>

</mx:Script>

</mx:Application>

Uploading PHP code:
move_uploaded_file($_FILES['fileUpload']['tmp_name'], "./temporary/".$_FILES['fileUpload']['name']);

var $date = $_REQUEST['date']; var $ssid = $_REQUEST['ssid'];

Advertisements

Actions

Information

16 responses

5 02 2008
nedkost

Is there a way to perform the file download without the dialog box popping up? I like the FileReference class because it is so easy to use, but if I’m downloading a number of files I would like to simply pass in a configured location rather than have the dialog box pop up for each file.

Thanks!
-Ned

5 03 2008
Justin J. Moses

Hmmm, I’m not sure but somehow I think this wouldn’t be available as it could open the user up to security issues with files downloaded automatically. However, I think an AIR application would have sufficient privileges to do what you want.

28 03 2008
Alan Karp

I’m not uploading. I just want to know the full pathname of the file the user selected. However, all I’m getting from fileRef.name is the name, no path. There doesn’t appear to be a way to get the path. I assumed that was a “security” feature, but now I think I’m doing something wrong.

28 03 2008
Justin J. Moses

Alan,

I think you were right assuming it is a security feature, because I couldn’t see how knowing the path in the user’s filesystem could be considered “safe”, in Adobe Flash Player terms. In regards to Uploads, the essential difference between Flex and HTML is that the Input field of the File upload in the latter is populated with the full path to the file. Is this what you’re trying to emulate?

28 03 2008
Alan Karp

I’m using Flash as the UI, and I’m doing GETs and POSTs to a web server. I had assumed that the server got the same information about the filename that Flash did, but I guess not. I only need the full pathname of the file, not the bits. It sounds like all I need to do is provide my own upload() function on the server. Right?

28 03 2008
Justin J. Moses

Ahhhh, now I understand.

Yep, you’ll need to do your own upload() function. What server technology are you using?

.NET, Java, PHP, Rails?

29 03 2008
Alan Karp
1 04 2008
david lee

i think the filerefence object shouldn’t have the applicatin scope.
as long as it is delcared outside the function it works for me. 🙂

1 04 2008
Justin J. Moses

David,

I agree. I’ve changed the wording in the post above.

Cheers,
Justin

24 05 2008
Juni Sulaiman

Please HELP me !!

How could I get the full file-path in Flex-application ? Until now I used FileReference to do it, but I got only the filename, not the path.

Thank you for your help.

Kind regards,
Juni

24 05 2008
Justin J. Moses

Juni,

Flex will not tell you the user’s filepath. If you want to access the user’s filesystem for more integrated user-applications, you should look at deploying to an AIR application instead. As these are installed by the user, they are given much higher security access than a web application.

My question to you is why do you need the user’s filepath? Is it to replicate HTML file uploading behaviour?

Macromedia/Adobe have come up with their own way of handling web uploads that moves on from the old HTML input type=file approach which showed the user’s full path. Flash Player is serious about security. There would be security concerns in allowing a web application that doesn’t require user’s trust (unlike installing an AIR application) knowledge of their file system.

hope that helps,
justin

5 08 2008
Juni Sulaiman

Thanks for your help. I wanted to open a pdf-file in FlexApplication which directory is from a table in DB and I solved this problem with a FileReceiver in ASP.NET, by calling it in my Flex-Application and it works now fine !

Do you know how to pass more than one parameters to a WebService ? (the code is in Flex/ActionScript and the WebService is in ASP.NET).

23 08 2008
cindy

but, I don’t understand how you get rid of the Error #2039: Invalid remote URL protocol. The remote URL protocol must be HTTP or HTTPS

my fileref.download(…, …); looks just the same as yours, but where do you tell it to ‘use localhost’ so to speak???? in order to avoid this error?

thanks
Cindy

25 08 2008
Justin J. Moses

Cindy,

You will see that error by default when you try to test out downloading/uploading with a new default Flex project. The reason is the project is running from the local filesystem.

To change this, when you setup your Flex project (or when you go to the Project’s properties) you can add a server-side technology – such as PHP or ASP.NET. When you select this option, you need to use a local URL to test to. So you’d add in say http://localhost/MyFlex as your URL, and it would publish your SWF file into a subfolder called “bin-debug” and when you run debugging, it will run under localhost, rather than as a file.

Cheers,
Justin

25 06 2009
vin

Hi there,

I am trying to upload a file from Flex to C# webservices. Is there a way that I can
pass a file object and webservices receives it?

Right now for only file upload I am using seperate handler for uploading.

thanks in advance
vin

1 03 2010
Rosco

Hi,

I know this was posted a while ago but I think the question is still relevant.

I am building an application which needs to upload to Flickr, the thing is my application is not for Adobe AIR its a web app. Can I still upload to Flickr this way? If anyone knows I’d be grateful. I feel like I’ve looked everywhere and can’t even find an example of a Non-AIR application doing the Flickr upload.

Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: