---
title: "Quick Start with HTML5/Flash Uploader PHP"
canonical: https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-php.htm
product: "Upload Suite 8"
---

# Quick Start with HTML5/Flash Uploader PHP

Supported technologies: ![Adobe Flash](https://www.aurigma.com/docs/us8/icons/flash.png)![HTML 5](https://www.aurigma.com/docs/us8/icons/html5.png)
 
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](https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-javascript.htm.md) article:

- Simplification of the deployment process. You just initialize an [ImageUploaderFlash](https://www.aurigma.com/docs/us8/FH_T_P_ImageUploaderFlash.htm.md) object and call its [render()](https://www.aurigma.com/docs/us8/FH_M_P_ImageUploaderFlash_render.htm.md) 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:
 
1. 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\`).
2. Link the `ImageUploaderFlash.class.php` file with the page which will host HTML5/Flash Uploader and call the [renderCssRules()](https://www.aurigma.com/docs/us8/FH_M_P_ImageUploaderFlash_renderCssRules.htm.md) static method in the head section of the page.
 ```
    <head>
        <?php
          require_once 'ImageUploaderFlashPHP/ImageUploaderFlash.class.php';
          ImageUploaderFlash::renderCssRules();
        ?>
    </head>
    ```
3. 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
        $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](https://www.aurigma.com/docs/us8/before-you-started-iuf.htm.md)), 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](https://www.aurigma.com/docs/us8/FH_P_P_ImageUploaderFlash_Type.htm.md) 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
    $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](https://www.aurigma.com/docs/us8/FH_P_P_BaseControl_ID.htm.md) property specifies a unique identifier of the control.
 
Here is the source code of the main page of our catalog (`index.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](https://www.aurigma.com/docs/us8/FH_P_P_ImageUploaderFlash_Converters.htm.md) property which returns a set of [Converter](https://www.aurigma.com/docs/us8/FH_T_P_Converter.htm.md) 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](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md) topic.
 
One more significant property is [ImageUploaderFlash.LicenseKey](https://www.aurigma.com/docs/us8/FH_P_P_ImageUploaderFlash_LicenseKey.htm.md) 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](https://www.aurigma.com/docs/us8/registering-image-uploader-flash.htm.md) 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)](https://www.aurigma.com/docs/us8/FH_M_P_UploadHandler_saveFiles_1_4d57a286.htm.md) 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
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](https://www.aurigma.com/docs/us8/FH_P_P_UploadSettings_RedirectUrl.htm.md) 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.
 ```
<!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](https://www.aurigma.com/docs/us8/installation-and-deployment-notes.htm.md) 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.
 ```
<!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](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md) 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
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](https://www.aurigma.com/docs/us8/FH_P_P_ConvertedFile_Name.htm.md) 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.
 ```
<!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](https://www.aurigma.com/docs/us8/installation-and-deployment-notes.htm.md) to save files to.

## See Also
 
### Reference
 
- [HTML5/Flash Uploader PHP Reference](https://www.aurigma.com/docs/us8/FH_R_P_Aurigma_ImageUploaderFlash.htm.md)
- [ImageUploaderFlash Class](https://www.aurigma.com/docs/us8/FH_T_P_ImageUploaderFlash.htm.md)

### Manual
 
- [Configuring Common Upload Settings in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/configuring-common-upload-settings-iuf.htm.md)
- [Configuring Files to be Uploaded in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md)
- [Registering HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/registering-image-uploader-flash.htm.md)
- [Installation and Deployment Notes](https://www.aurigma.com/docs/us8/installation-and-deployment-notes.htm.md)
- [Saving Uploaded Files in HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-php-iuf.htm.md)