Uploading Files to a UcompOSArtifactProxy Instance

In a major UcompOS Portal Application I am building, I place UcompOS Artifact instances that represent file volumes on the UcompOS Portal. Over this past weekend, I found myself with the need to enable the user to right-click on the file volume artifacts (revealing their context menus) and choose an “Upload Files” option with the goal of providing the user a way to upload files directly to the root directory of the particular file volume.

My initial approach to this was to attach a Context Menu to the artifact instances with an “Upload Files” option.  I then created an event listener to listen for the UcompOSArtifactProxy.MENU_ITEM_SELECT event dispatched by the UcompOSArtifactProxy instance.

Once this event is dispatched, I reasoned I could then create a FileReferenceList instance and then call its browse() method and go from there.

However, when I attempted this, I was reminded of an important detail when an error was thrown once I called the FileReference.browse() method.

Just like the launching of AIR applications as well as the entry into Full Screen Mode, the opening of the file browse dialogue by the Flash Player must succeed a user-triggered mouse event.

In the context of the UcompOS Continuum, the entity where the mouse event occurs is the UcompOS Portal.  This is a completely separate entity from the code that is calling the FileReference.browse() method.

In my implementation, I have a Flash application that is running as a background application that sets up the aforementioned UcompOS Artifact instances that represent file volumes.

So when the user right clicks on the artifact and selects the Context Menu item, they are actually operating on the UcompOS Portal itself.

An SDKEvent is then dispatched to the background application and then what follows is the call to FileReferenceList.browse().

However, as far as the Flash Player is concerned, in that scenario, the call to FileReferenceList.browse() does NOT proceed a user-triggered mouse event because the mouse event occurs in a totally different scope.

So I have engineered a new process into the UcompOS Portal to enable the goals I described above.

I think the use case I am speaking to here is one that has good merit to be repeated by many developers – i.e. a widget that you can upload files to.  I can envision many scenarios where this could be useful such as file conversion utilities for one.

The model I have developed involves creating an uploadFiles property on the UcompOSArtifactProxy‘s data Object property.

The value of this uploadFiles property must be the same String value as the label placed on a Context Menu item that is attached to the artifact.

What will happen in this case, when the user selects the context menu option on the artifact on the UcompOS Portal, the file browse dialogue will open, and the user will be able to select multiple files.

After the user selects the files, what happens next is very important.

The UcompOS Portal will dispatch to the UcompOSArtifactProxy instance an SDKEvent for each attached file.

The SDKEvent‘s data property will have two properties: fileName:String and fileData:ByteArray, i.e. the name of the file and the contents of the file as a ByteArray.

From here you can do whatever you need to do with this information including upload the file to a remote server, do some sort of conversion, or anything else your specific use case requires.

Below, is a very simple code-based example of how you can create an Artifact and the user can change the artifact’s icon representation by uploading a new image to it.

The application is a UcompOS Flash application loaded into the UcompOS Portal as a background application.

package
{
	import flash.display.Sprite;
	import com.ucompass.ucompos.sdk.proxycomponents.UcompOSArtifactProxy;
	import com.ucompass.ucompos.sdk.SDKClient;
	import com.ucompass.ucompos.sdk.events.SDKEvent;
	import flash.events.Event;
 
	public class Main extends Sprite
	{
 
		private static const UPLOAD_LABEL:String = "Upload a new artifact image";
 
		public function Main()
		{
			// Instantiate the UcompOS SDK
			SDKClient.getInstance(this);
 
			// Create a UcompOS Artifact Proxy instance
			var artifact:UcompOSArtifactProxy = new UcompOSArtifactProxy();
 
			// Listen for uploaded files
			artifact.addEventListener(UcompOSArtifactProxy.UPLOAD_FILE,uploadHandler);
 
			// Initialize the artifact using a pre-defined image
			artifact.add("RIGHT CLICK ON ME!",null,"http://desktop.ucompass.com/UploadToArtifact/cloud-48x48.png",100,100,true,true,{uploadFiles:UPLOAD_LABEL});
 
			// Establish the context menu on the artifact with an Upload option
			artifact.setContextMenu(new XML(""));
		}
 
		private function uploadHandler(event:SDKEvent):void
		{
			var artifact:UcompOSArtifactProxy = event.target as UcompOSArtifactProxy;
 
			// Replace the artifact image with the content of the uploaded file
			artifact.setImage(event.data.fileData);
 
			// Show the name of the uploaded file as the label on the artifact
			artifact.setLabel(event.data.fileName);
		}
 
	}
 
}

Also, here is a link to a movie that shows the simple application in action.