Wednesday 09 Jul 2008   
Add Comment

Upload And Download Tutorial

ColdFusion Tutorial #5

This tutorial demonstrates uploading a file to Flex / ColdFusion and then downloading a modified version of that file. It allows you to upload and resize an image and download the resulting image.

Image.mxml

In line 22 I define a file type filter of *.jpg. Create a file reference and define the event listeners. This pops open a file browsing box which will allow you to select a file to upload.

You can set the height and width of the resulting image then click upload. There is more to look out for, for example if the user clicks cancel rather than saving the result the files never get deleted off the server.

Next I call the coldfusion method to use cfimage to resize the image.
On return flex creates a new file reference pointing to the new resized file.

 
 


image.cfm

The data is sent to this cfm page where I use cffile to write the file to disk.
Next I call the coldfusion method to use cfimage to resize the image.

 
 


MyImage.cfc

When the file is sent back to the user flex then tell coldfusion to delete the files from the server.

There is more to look out for, for example if the user clicks cancel rather than saving the result the files never get deleted off the server.

 
 


Demo

See this code running!


Download

Download this code as a zip!


Comments

Hi, Thanks all for tuts and times :)
I have this error with MyImage.cfc :
http://screencast.com/t/zJWcKtGc
Upload work great but after nothing.
Thanks again
I.
IlanB @ Tuesday 29 Apr 2008 - 09:22:15 AM

Make sure you have the "image" and "upload" directories created in the same directory as the cfc.
Paul @ Tuesday 29 Apr 2008 - 12:51:06 PM

Click button to add a comment


Author

Paul Kukiel


Published

Thursday 17 Apr 2008

Tags

cfabort  cfargument  cfcomponent  cffile  cffunction  cfimage  cfinvoke  cfinvokeargument  cfreturn  cfset  mx:Application  mx:Button  mx:Form  mx:FormItem  mx:Label  mx:method  mx:NumericStepper  mx:RemoteObject  mx:Script  mx:Text  mx:TitleWindow