Uploading video from iPad to server with AIR for iOS

In this part 2 post following on from Record and play back video with AIR for iOS on iPad I will show you how to take your freshly recorded video and upload it to a web server using PHP.

Assuming you have a MovieClip or some other button labeled ‘uploadbtn’ you first need to add a click event handler to it to trigger the upload.

1
uploadbtn.addEventListener(MouseEvent.CLICK, onUpload);

Now for the click handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function onUpload(e:MouseEvent):void
{
    // create a URLRequest for the PHP file on you server (we'll get to the PHP later)
    var URLrequest:URLRequest = new URLRequest("http://www.yourdomain.com/uploadFile.php");
   
    // videoFile is a File object we created in the last post which references the recorded video
    // attach the various listeners for errors, progress, complete
    videoFile.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadDataComplete);
    videoFile.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    videoFile.addEventListener(IOErrorEvent.IO_ERROR, handleError);
    videoFile.addEventListener(Event.COMPLETE, completeHandler);
   
    // call upload on the File object and pass in the URLRequest
    videoFile.upload(URLrequest);
}

Now we can create the handlers for the attached listeners:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function progressHandler(e:ProgressEvent):void
{
    // just tracing the percentage of progress - you could show it in a progress bar
    trace("Uploading... " + Math.ceil(100 * (e.bytesLoaded / e.bytesTotal)) + "%");
}

function completeHandler(e:Event):void
{
    // upload process is complete
    trace(videoFile.name + " has been uploaded.\n");
}

function uploadDataComplete(e:DataEvent):void
{
    //everything is complete, trace the message returned from the PHP script which is in XML format
    var xml:XML = new XML(e.data);
   
    trace(xml.message);
}



function handleError(e:IOErrorEvent):void
{
    // simple error handler traces the error
    trace("Upload Error:" + e.text);
}

That is all that is required for the ActionScript side of things. Now for the PHP script. This is a very basic script and you should provide some security and validation on any production code.

All you need to do is save this into a blank PHP file and upload it to your server to the location matching the address in you URLRequest above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php

// variable for return message
$message = "";

// the directory to place the video relative to this PHP script
$directory = "uploads/";

// get the number of files already in the directory and increment the number for the new one
// video from the iPad is always .MOV format
$fileCount = count (glob ($directory."*.MOV"));
$newName = $directory."video" . ( $fileCount + 1) . ".MOV";

// move uploaded file with new name into directory specified above
if (move_uploaded_file($_FILES["Filedata"]["tmp_name"], $newName)){
    // create a successful message if all went ok
    $message =  "<result><status>OK</status><message>$file_name uploaded successfully.</message></result>";
}else{
    // create a failed message if something went wrong
    $message =  "<result><status>FAIL</status><message>$file_name did not upload successfully.</message></result>";
}

echo $message;
?>

That is all that’s required to upload a video from the iPad to a web server. It is surprisingly simple for how hard it was for me to work out.

I hope this helps somebody out!

Posted toActionScript AIR Flash Interactive iOS PHP