Using SWFUpload

One of the ways to upload files on Vzaar is to use SWFUpload library that you can find here. It allows you to upload files from the web page without actually leaving this page. In this article we will explain how to perform file uploading with use of library and PHP.

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.

SWFUpload Features

• Upload multiple files at once by ctrl/shift-selecting in dialog
• Javascript callbacks on all events
• Get file information before upload starts
• Style upload elements with XHTML and css
• Display information while files are uploading using HTML
• No page reloads necessary
• Works on all platforms/browsers that has Flash support.
• Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
• Control filesize before upload starts
• Only display chosen filetypes in dialog
• Queue uploads, remove/add files before starting upload

How To

To use SWFUpload you need to have couple of things done. First of all, please make sure you have latest API library files downloaded. You can grab them from here: http://code.google.com/p/vzaar/

For this example you will need SWFupload.swf and actual php script that we are going to review below.

The whole of actions is like this

• Set Vzaar API credentials
• Get Upload Signature
• Define SWFUpload settings object
• Initialize SWFUpload with settings defined
• Upload

Let's review step by step all these actions:

Setting Vzaar API credentials

First of all, please make sure you have your API token generated, if you haven't done it yet, you can do it here: http://vzaar.com/settings/api - you need to be logged in to see that page. To set API credentials in your PHP code you need to have token and secret (which is your Vzaar username). So authentication bits will look like this:

PHP code:

require_once 'Vzaar.php'; Vzaar::$useSandbox = false;
Vzaar::$token = "API_TOKEN_GOES_HERE";
Vzaar::$secret = "YOUR_VZAAR_USERNAME";
Vzaar::$enableFlashSupport = true;

Get Upload Signature

To get a signature we need to perform a call getUploadSignature, but because we need it within JavaScript, let's mix it all together with converting signature object into JavaScript JSON representation:

JavaScript code:

<script type="text/javascript"> var vzaar_signature = <?php echo(json_encode(Vzaar::getUploadSignature()));?>
</script>

Define SWFUpload settings object

The signature object we obtained with inline Vzaar::getUploadSignature() PHP call we can use now to set our SWFUpload settings object:
var settings = {
flash_url : "swfupload.swf",

upload_url: 'http://'+vzaar_signature["vzaar-api"].bucket+'.s3.amazonaws.com/',
post_params: {

"content-type" : "binary/octet-stream",
"acl" : vzaar_signature["vzaar-api"].acl,
"policy" : vzaar_signature["vzaar-api"].policy,
"AWSAccessKeyId" : vzaar_signature["vzaar-api"].accesskeyid,
"signature" : vzaar_signature["vzaar-api"].signature,
"success_action_status" : "201",
"key" : vzaar_signature["vzaar-api"].key
}

Complete code you can see here

Initialize SWFUpload with settings defined

Now all we need is to use our settings object when we initialize SWFUpload:

var swfu = new SWFUpload(settings);

Upload

So, when whole thin is set, all we need to do is wait for a user to click Browse button on SWFUpload and start uploading.

Please keep in mind that this example is only for uploading videos to a storage. To make your video visible within your dashboard you need to implement also video processing call.

When video get's uploaded as result you will have XML 'message' returned to you back, <key/> node of it will be a point of your interest because it will contain long string which looks somewhat like this:
vzaar/vzb/3cb/source/vzb3cb82a5c1c3410ea6c615edbf421d48/${filename}

To process video with Vzaar::processVideo API call you would need to have 4 parameters, like GUID (obtained after uploading file to a storage), title, description and ID for the video profile (aka quality). So to get a GUID from that long string we need a bit of JavaScript:

var arrKey = this.key.split('/'); var guid = arrKey[arrKey.length-2];

This will return you vzb3cb82a5c1c3410ea6c615edbf421d48 which is your GUID. Now you can call processVideo method.