Showing an image after upload

In many cases, we upload images, so I want to show how to display the uploaded image right there in the flash form. Right now, we can only load jpgs.

In the simplest case, the file name of the picture will be the same when it gets uploaded. So in order to show it, when only need the original file name.

ColdFusion

In many cases, we upload images, so I want to show how to display the uploaded image right there in the flash form. Right now, we can only load jpgs.

In the simplest case, the file name of the picture will be the same when it gets uploaded. So in order to show it, when only need the original file name.

Besides the file upload controls, we have a couple of additional controls:

then, in the onComplete function, we set the picture to the newly uploaded file:


//some shorcuts to our controls
var fileNameField = fileNameField;
var myform = myform;

uploadListener.onComplete = function(){
	//show the picture

	myform.picture = fileNameField.text;
}

fileNameField is the text field where we showed the name of the file to be uploaded. We assume that this field hasn’t changed since the user pressed upload and the upload was completed. We can prevent it from changing by disabling the choose button until the file has uploaded successfully or some other event (error, cancel, etc) happens.

I personally almost never use the filename that the user gives me because they usually contain spaces. So I change the file name when it gets uploaded. But that means that the form will not know what the new name is, and therefore it won’t be able to show it. To get around that, we can set the filename before hand, say the item id, or similar, and then pass that by query string to the upload action page. In that way, we can assume that the action page gave that filename to the uploaded file. You can view an example of that in the source download.

A live example
Download the source