Quick Start with HTML5/Flash Uploader PHP

Supported technologies: Adobe Flash

HTML5/Flash Uploader PHP is a collection of classes which are meant to deploy HTML5/Flash Uploader and handle uploaded data easier. Using this collection, PHP developers can work with HTML5/Flash Uploader in a usual way as with a common PHP object. HTML5/Flash Uploader PHP provides several advantages over a standard way of deployment described in the Quick Start with HTML5/Flash Uploader JavaScript article:

Simplification of the deployment process. You just initialize an ImageUploaderFlash object and call its render() method which automatically inserts HTML5/Flash Uploader onto a page.
Ability to process uploaded data without parsing it. HTML5/Flash Uploader PHP includes a number of classes which receive the uploaded data, parse it, and provide a typed access to this data.

Adding Library to Page

To add HTML5/Flash Uploader to a web page you just need to perform the following steps:

Copy the /ImageUploaderFlashPHP folder to an application. It can be found in HTML5/Flash Uploader installation folder (usually this is C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\).
Link the ImageUploaderFlash.class.php file with the page which will host HTML5/Flash Uploader and call the renderCssRules() static method in the head section of the page.
PHP
```
<head>
    <?php
      require_once 'ImageUploaderFlashPHP/ImageUploaderFlash.class.php';
      ImageUploaderFlash::renderCssRules();
    ?>
</head>
```
Create a new instance of the ImageUploaderFlash class. Then configure HTML5/Flash Uploader in the way described in the following sections. After you have initialized necessary parameters call the render() method which generates HTML5/Flash Uploader embedding code and writes it into the page.
PHP
```
<?php
    $uploader = new ImageUploaderFlash("Uploader1");

    //configure HTML5/Flash Uploader

    $uploader->render();
?>
```
Note
Call the render() method in the position of the page you want to insert HTML5/Flash Uploader into.

Defining Uploader Type

By default, HTML5/Flash Uploader has HTML5 Uploader enabled. If a user opens a page in a HTML5-compliant browser (see the supported browsers table), HTML5 Uploader is displyed. Otherwise Flash Uploader comes up. You can change this behavior by defining upload technology in your application (you will need this customization if you plan to use one the features which are not supported by HTML5 Uploader). Use the Type property to perform this. The property possible values are "html|flash" (default value), "flash|html", "html", and "flash".

The following snippet configures HTML5/Flash Uploader to use the Flash control by default, and the HTML5 control if the client browser does not support flash:

PHP

<?php
    $uploader = new ImageUploaderFlash("Uploader1");
    $uploader->setType("flash|html");
    $uploader->render();
?>

Uploading Files

Here we discuss the use HTML5/Flash Uploader PHP by the example of a simple file catalog. Suppose, the catalog requires to upload files of various types and displays links to download these files. To implement this we should configure an ImageUploaderFlash object and save uploaded files on a server. The sections below describe these steps in detail.

Configuring

To configure HTML5/Flash Uploader parameters you should set corresponding properties of the ImageUploaderFlash object. For example, the ID property specifies a unique identifier of the control.

Here is the source code of the main page of our catalog (index.php).

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PHP Library Sample</title>
    <?php
      require_once 'ImageUploaderFlashPHP/ImageUploaderFlash.class.php';
      ImageUploaderFlash::renderCssRules();
    ?>
</head>
<body>
    <?php 
        // create ImageUploaderFlash object and specify its ID and size
        $uploader = new ImageUploaderFlash("Uploader1");
        $uploader->setWidth("650px");
        $uploader->setHeight("480px");
        
        // specify a license key
        $uploader->setLicenseKey("XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX");

        // configure upload settings
        $uploader->getUploadSettings()->setActionUrl("upload.php");
        $uploader->getUploadSettings()->setRedirectUrl("catalog.php");

        //configure uploaded files
        $converters = &$uploader->getConverters();
        // one converter for uploading source file
        $converter = new Converter();
        $converter->setMode("*.*=SourceFile");
        $converters[] = $converter;
        
        // render ImageUploaderFlash
        $uploader->render();
    ?>
</body>
</html>

On this page we host HTML5/Flash Uploader and configure it, namely, specify its ID and size, server upload script and the page to which the user will be redirected when the upload is successfully completed. To configure HTML5/Flash Uploader to send original files we used the ImageUploaderFlash.Converters property which returns a set of Converter instances. Each instance specifies what will be uploaded (original file as is, thumbnail created from original image file, icon associated with original file, or original file compressed into ZIP archive) for each of the user-selected files. Since we need to upload original files only, we set one converter with the SourceFile mode. Read more about converters in the Configuring Files to be Uploaded in HTML5/Flash Uploader topic.

One more significant property is ImageUploaderFlash.LicenseKey which specifies trial or full license key. If license key is not set HTML5/Flash Uploader will not send files (the exception is usage of uploader on localhost domain). See the Registering HTML5/Flash Uploader topic for details.

Note

All the parameters should be specified before the call to the render() method; otherwise, parameters added after it will be ignored.

Handling Upload

The uploaded data can be saved using the UploadHandler.saveFiles(string) method which saves all the received files to the specified folder. This method returns an array of full filenames of saved files. According to the catalog requirements, we store files set to upload by a user in /Catalog folder.

Here is the source code of the upload script (upload.php) used in our catalog.

PHP

<?php
require_once "ImageUploaderFlashPHP/UploadHandler.class.php";

$uploadHandler = new UploadHandler();
$uploadHandler->saveFiles("Catalog/");
?>

Note

For versions of PHP earlier than 6.0 disable the magic_quotes_gpc directive in your php.ini file.

Displaying Uploaded Files

On the configuring step we specified the UploadSettings.RedirectUrl property to the "catalog.php" value. It means that HTML5/Flash Uploader will redirect users to this page after the upload is successfully completed. It would be convenient to list links to the uploaded files here. To implement this functionality we iterate through all the files stored in the /Catalog/ folder and display a link to each of them. See the source code below.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Catalog</title>
</head>
<body>
<?php
$catalogPath = "Catalog/";

//Open catalog directory
if (is_dir($catalogPath)) {
    if ($directory = opendir($catalogPath)) {
        //Iterate through all files
        while (($file = readdir($directory))){
            //Process files only
            if (!is_dir($file)){            
                echo "<a href=\"$catalogPath$file\" target=\"_blank\">\n";
                echo "    $file\n";
                echo "</a><br />\n";
            }
        }
        closedir($directory);
    }
}
?>
</body>
</html>

Note

You may run the file catalog application considered here on your server. To do this, just paste source code to index.php, upload.php, and catalog.php files to your server using the following folder structure:

/Catalog
/ImageUploaderFlashPHP
catalog.php
index.php
upload.php

Make sure that the /Catalog/ folder has enough permissions to save files to.

Uploading Images

One more example of HTML5/Flash Uploader usage is an image gallery. Suppose, it requires a user to upload original images along with their downsized copies. This task can be divided on the same phases as the previous one.

Configuring

The configuration of the ImageUploaderFlash object used for our image gallery is almost the same as for the file catalog described above.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PHP Library Sample</title>
    <?php
      require_once 'ImageUploaderFlashPHP/ImageUploaderFlash.class.php';
      ImageUploaderFlash::renderCssRules();
    ?>
</head>
<body>
    <?php 
        // create ImageUploaderFlash object and specify its ID and size
        $uploader = new ImageUploaderFlash("Uploader1");
        $uploader->setWidth("650px");
        $uploader->setHeight("480px");
        
        // specify a license key
        $uploader->setLicenseKey("XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX");

        // configure upload settings
        $uploader->getUploadSettings()->setActionUrl("upload.php");
        $uploader->getUploadSettings()->setRedirectUrl("gallery.php");

        //configure uploaded files
        $converters = &$uploader->getConverters();
        // one converter for uploading source file
        $converter = new Converter();
        $converter->setMode("*.*=SourceFile");
        $converters[] = $converter;
        // and second - for uploading thumbnail
        $converter = new Converter();
        $converter->setMode("*.*=Thumbnail");
        // set thumbnail size
        $converter->setThumbnailWidth(120);
        $converter->setThumbnailHeight(120);
        $converter->setThumbnailFitMode("fit");
        $converters[] = $converter;

        // render ImageUploaderFlash
        $uploader->render();
    ?>
</body>
</html>

The difference is that we set an additional converter to specify a thumbnail which will be created for each image file and will be fitted to 120x120 pixels. Read more about converters in the Configuring Files to be Uploaded in HTML5/Flash Uploader topic.

Handling Upload

Here we use the saveFiles(string) method to save uploaded files to the /Gallery folder, as it is demonstrated in upload.php source code below.

PHP

<?php
require_once "ImageUploaderFlashPHP/UploadHandler.class.php";

$uploadHandler = new UploadHandler();
$uploadHandler->saveFiles("Gallery/");
?>

Pay attention to the fact that the names of files stored in the destination folder are not equal to the original filenames. Each name has a suffix corresponding to the converter used to create this file (except for the SourceFile one). In our example we set two converters, that is why there are two files stored for each user-selected file:

name.ext - the original image specified with the first converter.
name.ext_Thumbnail1.jpg - a downsized copy of the original image configured with the second converter.

See the ConvertedFile.Name property description for a full list of possible suffixes.

Displaying Uploaded Images

On the configuring step we specified the UploadSettings.RedirectUrl property to the "gallery.php" value. It means that HTML5/Flash Uploader will redirect users to this page after the upload is successfully completed. It would be convenient to display uploaded images here. To implement this functionality we iterate through all the files stored in the destination folder and display each thumbnail (file with _Thumbnail1 suffix) as a link to its original image (no suffix). See comments in the source code below.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gallery</title>
</head>
<body>
<?php
$galleryPath = "Gallery/";

//Open catalog directory
if (is_dir($galleryPath)) {
    if ($directory = opendir($galleryPath)) {
        //Iterate through all files
        while (($file = readdir($directory))){
            //Process files only
            if (!is_dir($file)){ 
                $pos = strpos($file, "_Thumbnail1");
                //The file is not a thumbnail, so it is a source file
                if ($pos == false){
                    //Construct name of the corresponded thumbnail
                    $thumbnailName = $file."_Thumbnail1.jpg";
                    //Check if this thumbnail exists
                    if (file_exists("$galleryPath$thumbnailName")){
                        echo "<a href=\"$galleryPath$file\" target=\"_blank\">\n";
                        echo "    <img src=\"$galleryPath$thumbnailName\" />\n";
                        echo "</a>    \n";
                    }
                }
            }
        }
        closedir($directory);
    }
}
?>
</body>
</html>

Note

You may run the image gallery application on your server. To do this, just paste source code to index.php, upload.php, and gallery.php files to your server using the following folder structure:

/Gallery
/ImageUploaderFlashPHP
gallery.php
index.php
upload.php

Make sure that /Gallery/ folder has enough permissions to save files to.

Quick Start with HTML5/Flash Uploader PHP

Adding Library to Page

Defining Uploader Type

Uploading Files

Configuring

Handling Upload

Displaying Uploaded Files

Uploading Images

Configuring

Handling Upload

Displaying Uploaded Images

See Also

Reference

Manual