This documentation is for the old version. Go to the latest Upload Suite docs

Inserting Image Uploader PHP into Page

Image Uploader PHP library is a collection of classes that are meant to make deployment of Image Uploader and handling uploaded data easier. Using this collection, PHP developers can work with Image Uploader in a usual way as with a common PHP object. Image Uploader PHP library provides several advantages over a standard way of deployment described in the Inserting Image Uploader into Web Page article:

Simplification of the deployment process. You just initialize an ImageUploader object and call its render() method which automatically inserts ActiveX control or the Java applet (depending on browser type) onto a page.
Ability to process uploaded data without parsing POST requests. Image Uploader PHP library includes a number of classes which receive the uploaded data (POST request), parse it, and provide a typed access to this data.

Here we will discuss how to use Image Uploader PHP library by the example of a simple image gallery (a similar example is illustrated in the Inserting Image Uploader ASP.NET Control into ASP.NET Page article which performs the same task using Image Uploader ASP.NET control). Suppose that the gallery requires a user to upload downsized copy of images along with source ones. To implement this we should add the PHP library to the application, configure an ImageUploader object, and save uploaded images on a server. The sections below describe these steps in detail.

Adding to the Page

To add Image Uploader to the gallery page you just need to perform the following steps:

Copy the ImageUploaderPHP folder to the image gallery application. It can be found in Image Uploader installation folder (typically this is C:\Program Files\Aurigma\Image Uploader 6.5 Dual\ImageUploaderPHP).

Link the ImageUploader.class.php file with the image gallery page.

PHP

<?php 
    require_once "ImageUploaderPHP/ImageUploader.class.php";
?>

Create new instance of the ImageUploader class. This constructor accepts three arguments: ID of the control (or applet), its width and height; however, all these values can be changed later using corresponding properties. Then configure Image Uploader in the way described in the next section. After you initialized necessary parameters call the render() method which generates Image Uploader embedding code and writes it into the page.
PHP
```
<?php
    $imageUploader = new ImageUploader("ImageUploader1", 650, 400);

    //configure Image Uploader

    $imageUploader->render();
?>
```
Note
Call the render() method in the position of the Web page you want to insert Image Uploader (ActiveX control or Java applet) into.

Configuring

To configure Image Uploader parameters you should set corresponding properties of the ImageUploader object. For example, the setAction($value) property initializes the Action parameter.

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

PHP

<?php
require_once "ImageUploaderPHP/ImageUploader.class.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>Image Uploader PHP Library Sample</title>
</head>
<body>
    <?php 
        $imageUploader = new ImageUploader("ImageUploader1", 650, 400);

        $imageUploader->setAction("upload.php");
        $imageUploader->setRedirectUrl("gallery.php");
    
        $imageUploader->setUploadThumbnail1FitMode("Fit");
        $imageUploader->setUploadThumbnail1Width(120);
        $imageUploader->setUploadThumbnail1Height(120);
            
        $imageUploader->render(); 
    ?>
</body>
</html>

On this page we host Image Uploader and configure it, namely, specify server upload script and the page to which the user will be redirected when the upload successfully completes, select two panes layout, and set a thumbnail for upload. This thumbnail will be created for each image right before upload and will be fitted to 120x120 pixels.

Note

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

Handling Upload

All classes intended to handle uploaded data are located in the UploadedFiles.php file of the PHP library. The main of them is the UploadedFiles class representing the data received from a client as an array of UploadedFile objects. Call the UploadedFiles::getAll() method to retrieve the whole array or the UploadedFiles::fetchNext() method to iterate through it. Each UploadedFile object contains the uploaded file itself as well as thumbnails created for this file client-side, and all the additional data, such as original filename, user-specified description and so on.

According to the gallery requirements we will store source images and its thumbnails in /Gallery and /Gallery/Thumbnails folders respectively. In general, this task can be solved as follows:

Iterate through the array of uploaded files and perform the steps below for each of them.
Retrieve a source image and its thumbnail using UploadedFile::getSourceFile() and UploadedFile::getThumbnail($index) methods.
Generate unique filename to avoid a name conflict. To do it we use the getSafeFileName($path) method implemented in both SourceFileInfo and ThumbnailInfo classes.
Save the source image and the thumbnail in corresponding folders using the unique filename obtained on the previous step.

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

PHP

<?php
require_once "ImageUploaderPHP/UploadedFiles.php";

    $galleryPath = "Gallery/";
    $thumbnailsPath = $galleryPath. "Thumbnails/";
        
    while (($uploadedFile = UploadedFiles::fetchNext()) != null){
            
        $sourceFile = $uploadedFile->getSourceFile();
        $thumbnail = $uploadedFile->getThumbnail(1);
            
        $safeFileName = $sourceFile->getSafeFileName($galleryPath);
                    
        $sourceFile->save($galleryPath."/".$safeFileName);
        $thumbnail->save($thumbnailsPath."/".$safeFileName);
    }
?>

Displaying Uploaded Files

On the configuring step we specified the setRedirectUrl property to the "gallery.php" value. It means that Image Uploader will redirect users to this page after the upload successfully completes. So, it would be convenient to display uploaded files here. To implement this functionality we iterate through all the previews stored in the /Gallery/Thumbnails folder and display each thumbnail as a link to its original image (source images are stored in the /Gallery folder). 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>Gallery</title>
</head>
<body>

<?php
$galleryPath = "Gallery/";
$thumbnailsPath = $galleryPath. "Thumbnails/";
$colCount = 4;
$i = 0;

//Open thumbnails directory
if (is_dir($thumbnailsPath)) {
    if ($directory = opendir($thumbnailsPath)) {
        //Iterate through all files
        while (($file = readdir($directory)) !== false){
            //Process files only
            if (is_dir($file) == false){
            
                echo "<a href=\"$galleryPath/$file\" target=\"_blank\">\n";
                echo "    <img src=\"$thumbnailsPath/$file\" />\n";
                echo "</a>&nbsp;&nbsp;&nbsp;&nbsp;\n";

                if ((++$i) % $colCount == 0)
                    echo "<br />\n";
            }
        }
        closedir($directory);
    }
}
?>

</body>
</html>

Note

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

Gallery
	Thumbnails
ImageUploaderPHP
gallery.php
index.php
upload.php

Do not forget to grant read and write permissions for /Gallery and /Gallery/Thumbnails folders to the account your web server is running under.

Inserting Image Uploader PHP into Page

Adding to the Page

Configuring

Handling Upload

Displaying Uploaded Files

See Also

Manual