Solved

Flex 3 Upload a Bytearray as a JPEG upload to a server via HTTP Post

Posted on 2009-07-11
4
9,676 Views
Last Modified: 2013-11-11
I have a Flex application that allows users to build simple slides, a la Powerpoint, by entering text, uploading images and selecting from a clip art library. At the end of the process, I'm writing the contents of the canvas object to a ByteArray and would like to upload it to an ASP.net webserver. I have scripts on the server that accept user uploads via FileReference, for uploading backgrounds and images, but am running into a wall trying to upload the final image. What I need is something like what happens with the filereference class, but with internal data, rather than the user picking a file. What would be ideal would be direct access to the data and filename vars in place of the browse() method, but that's not supported that I can see.

I have somewhat of a hack working (code below), where I base64 encode the bytearray and send it as the value of a POST var. I can handle this on the ASP end, but I'm thinking there's probably a cleaner way to do this built into flex that I'm missing. I need to send several other variables along with the image, so doing a binary transfer won't really work.

Is there something I'm missing or a simpler way to do this?
//write the canvas to a bitmap

var finalBitmap:BitmapData = new BitmapData(MainCanvas.width,MainCanvas.height);

finalBitmap.draw(MainCanvas);

				

// write the bitmap to a bytearray

var jpgEncoder:JPEGEncoder = new JPEGEncoder();

var imgArray:ByteArray = jpgEncoder.encode(finalBitmap);

				

trace("Arr len: " + imgArray.length);

				

// encode the array for web transfer

var imgEncoder:Base64Encoder = new Base64Encoder();

imgArray.position = 0;

imgEncoder.encodeBytes(imgArray);

				

// set up the variables for the POST

var uploadVars:URLVariables = new URLVariables();

uploadVars.user_name = "Test+File";

uploadVars.final_file = imgEncoder.flush();
 

// prep the request

imgUploadRequest = new URLRequest(FILE_UPLOAD_URL);

imgUploadRequest.method = URLRequestMethod.POST;

imgUploadRequest.data = uploadVars;

				

// and send it, setting up listeners for results. TODO -- Add a timeout listener

imgUploader = new URLLoader();

imgUploader.dataFormat = URLLoaderDataFormat.VARIABLES;

imgUploader.addEventListener(ProgressEvent.PROGRESS, UploadFinal_progress);

imgUploader.addEventListener(Event.COMPLETE, UploadFinal_complete);

 //imgUploader.addEventListener(IOErrorEvent.IO_ERROR, UploadFinal_Error); imgUploader.load(imgUploadRequest);

Open in new window

0
Comment
Question by:Baxter68
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
Jones911 earned 500 total points
Comment Utility
You can use a form post to accomplish this.  I can't find a ASP example but there is a php example:  http://blog.kukiel.net/2009/03/sending-binary-from-flash-10-to-php.html
0
 

Author Comment

by:Baxter68
Comment Utility
That may be the best way to do it. That sample is doing exactly my current code does. Base64encode the bytearray and send it as a post var along with others.

I was thinking there might be a "cleaner" way to do it, like a built-in flash object I was missing, but that might be the way to go, thanks!
0
 
LVL 19

Expert Comment

by:Jones911
Comment Utility
You could very well setup WebOrb for .NET and send it over AMF but that may be too much work and this solution might be easier.  Here is the link to webOrb anyway:  http://www.themidnightcoders.com/products/weborb-for-net/overview.html
0
 

Author Closing Comment

by:Baxter68
Comment Utility
Thanks for that, I think I'll stick to the passing as base64 text way. The WebOrb is a good tip, I'll have to look at that for future stuff. Thanks for the assistance!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now