Save imageSnapshot to Server

Question

Hello all.
I am trying to make a little component that allows a user to take a picture using their webcamera and then save it to a server.  I have the application so far allowing the user to take a picture and its creating a bitmap.  I then have another button "Save" that then converts this bitmap into a Snapshot which i want to then upload but am having troubles doing this.  I can save it to the users desktop computer no problem.  Just cant upload =[
My code is looking like this
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" >
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.JPEGEncoder;
            import mx.graphics.ImageSnapshot;
            [Bindable] public var bitmap:Bitmap;
            public function takeSnapshot():void
                var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                bitmap= new Bitmap(snapshot);
                img.source=bitmap;
            //Web Cam Stuff
            private function videoDisplay_creationComplete():void {
                var camera:Camera = Camera.getCamera();
                if (camera) {
                    videoDisplay.attachCamera(camera);
                } else {   
            private function saveImageToFileSystem():void
                var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
                var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(img, 0, jPEGEncoder);
                var fileReference:FileReference = new FileReference();
                fileReference.save(imageSnapshot.data, "img123.jpg");
        ]]>
    </fx:Script>
    <mx:VideoDisplay id="videoDisplay"
                     creationComplete="videoDisplay_creationComplete()"
                     width="320" height="240" autoPlay="true" x="15" y="28"/>
    <mx:Image id="img" x="343" y="28"/>
    <s:Button id="button" label="Take Screenshot" click="takeSnapshot()" x="15" y="276"/>
    <s:Button click="saveImageToFileSystem()" label="Save Image" x="135" y="276"/>
    <s:Label x="54" y="348" text="Label"  useHandCursor="true" buttonMode="true" mouseChildren="false"/>
</s:Application>
If anyone could help that would be great.  I want to use a PHP backend if possible

Answer 1

Hi and thanks for the reply.
I have made some good progress on this.  I now have the application taking a bitmap screenshot, allowing the user to save this image to their desktop computer and then allow them to search their desktop computer for a file to upload.  I have done this using the file reference as you suggested.
My only problem however is that i dont want the user to have to save the image onto their computer and then find it to upload it using the .browser() function.
Is there anyway possible to pass a file to that browse direct?
My code is this -
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" >
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.JPEGEncoder;
            import mx.graphics.ImageSnapshot;
            [Bindable] public var bitmap:Bitmap;
            public function takeSnapshot():void
                var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                bitmap= new Bitmap(snapshot);
                img.source=bitmap;
            //Web Cam Stuff
            private function videoDisplay_creationComplete():void {
                var camera:Camera = Camera.getCamera();
                if (camera) {
                    videoDisplay.attachCamera(camera);
                } else {   
            private function saveImageToFileSystem():void
                var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
                var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(img, 0, jPEGEncoder);
                var fileReference:FileReference = new FileReference();
                fileReference.save(imageSnapshot.data, "img123.jpg");
            //Upload Stuff
            import mx.controls.Alert;
            private var fileRef:FileReference;
            private const FILE_UPLOAD_URL:String = "http://www.******/upload.php";
            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
            private function browseAndUpload():void {
                fileRef.browse();
            private function fileRef_select(evt:Event):void {
                fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
            private function fileRef_complete(evt:Event):void {
                Alert.show("Image has been uploaded", "Success");
        ]]>
    </fx:Script>
    <mx:VideoDisplay id="videoDisplay"
                     creationComplete="videoDisplay_creationComplete()"
                     width="320" height="240" autoPlay="true" x="15" y="28"/>
    <mx:Image id="img" x="343" y="28"/>
    <s:Button id="button" label="Take Screenshot" click="takeSnapshot(),init()" x="15" y="276"/>
    <s:Button click="saveImageToFileSystem()" label="Save Image" x="135" y="276"/>
    <s:Button x="229" y="276" label="Upload" click="browseAndUpload()"/>
</s:Application>
If you look at it the process is - Take Screenshot, which create the bitmap, Save Image which converts it into Snapshot and then lets the user save it to their computer, Upload which lets the computer browse their desktop to search for an image to upload.
However i want to merge steps two and three together, so that the user Takes a Screenshot, which saves it as a bitmap, this can be repeated many times as it is now, but then whent hey are happy with the image, they should just click Upload, which will save the image as a SnapShot and then upload it directly, without them needing to save it and then find it again using the .browse()
So my question really is,
     Is it possible to pass a file into the browse straightway ?  Mainly passing a snapShot thru ?
Just so you know my php code looks like this
<?php
$tempFile = $_FILES['Filedata']['tmp_name'];
$fileName = $_FILES['Filedata']['name'];
$fileSize = $_FILES['Filedata']['size'];
$name = $_GET['extraVar'];
$argh = $name.'.doc';
move_uploaded_file($tempFile, "./" . $argh);
?>
Thanks !