Home → Products → Aurigma image and file upload products → Image Uploader Pro → Tech Details → PHP File Upload Solution: Quick Start

PHP File Upload Solution: Quick Start

Introduction

If you build a website in PHP file upload functionality can be easily added using Aurigma Image Uploader. Here's how:

  • Rich upload functionality. It can upload multiple files and folders at a single click, resize photos before upload, and much more. Learn more about features
  • Attractive appearance and intuitive user interface. Aurigma Image Uploader provides users with a convenient and appealing user interface which enables you to select files or images and uploading them.
  • Works at any browser/platform. No matter whether a user comes from Microsoft Windows, Mac OS X or Linux and uses Internet Explorer, Safari, Firefox, Chrome or another browser, Aurigma Image Uploader displays an appropriate client control (ActiveX/Java) and guarantees that the user is able to send files from the browser.
  • You can easily insert Aurigma Image Uploader into a PHP webpage. Just include the PHP library and add a few lines of code, and that's it.

Getting Started with Aurigma Image Uploader PHP Library

Let's run through an example of a simple PHP file catalog, and demonstrate how Aurigma Image Uploader can help. Suppose the catalog requires a user to upload files of various types and display links to download these files. We can implement this task as follows.

Adding Image Uploader to Page

To add Image Uploader to a web page you need to do the following:

1. Copy the /ImageUploaderPHP folder to an application. It can be found in Image Uploader installation folder (typically this is C:\Program Files\Aurigma\Image Uploader 7.0.11\PHPClasses\ImageUploaderPHP - the version number may vary!).

2. Link the Uploader.class.php file with the image gallery page:

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

3. Create a new instance of the Uploader class. This constructor takes one argument which is a unique identifier of the control. Then configure Image Uploader in the way described in the next section. After you initialized necessary parameters call the render() method that generates Image Uploader embedding code and writes it into the page.

<?php 
        $uploader = new Uploader("Uploader1");
        //configure Image Uploader
        $uploader->render(); 
?>
Note

Call the render() method in the position of the Web page where you want to insert Image Uploader applet.

Configuring Aurigma Image Uploader

To configure Image Uploader parameters you should set corresponding properties of the Uploader object. For example, the setWidth($value) and setHeight($value) properties specify width and height of the control.

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

<?php
require_once "ImageUploaderPHP/Uploader.class.php";
require_once "ImageUploaderPHP/InstallationProgress.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>Simple File Catalog</title>
    <style type="text/css">
        .ScreenStyle
        {
            background-color: #ffffff;
            font-family: verdana;
            font-size: 11px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <?php 
        $uploader = new Uploader("Uploader1", 650, 400);
 
        $uploader->setWidth(650);
        $uploader->setHeight(400);
        $uploader->getUploadSettings()->setActionUrl("upload.php");
        $uploader->getUploadSettings()->setRedirectUrl("catalog.php");
 
        $converters = &$uploader->getConverters();
        $converter = new Converter();
        $converter->setMode("*.*=SourceFile");
        $converters[] = $converter;

        $ip = new InstallationProgress($uploader);
        $ip->setProgressCssClass("ScreenStyle");
        $ip->setInstructionsCssClass("ScreenStyle");
             
        $uploader->render(); 
    ?>
</body>
</html>
Note

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

In this example we have specified a few upload and appearance-related parameters. In particular, we have set the URL of the server upload processing script and the page to which the user will be redirected when the upload successfully completes. The redirect page will display our catalog listing links to uploaded files.

If we did everything correctly, you will see the following page:

PHP file upload solution by Aurigma in action.

Another set of settings in this example is the Converters. Converters define what files will be sent to the server for each user-selected file. Such files may be thumbnails, Zip file, icon, and the source file itself. Our app is configured to upload source files only.

At last, it configures the installation progress appearance. Installation progress code is displayed instead of the uploader interface while Image Uploader is being initialized and installed on a client computer. In our example we set up this feature using the InstallationProgress class. Take into account that we have created a CSS style (ScreenStyle) for this screen and specified it in the InstallationProgress settings.

This is how the page should look like before Image Uploader is completely loaded.

PHP file upload solution by Aurigma - being installed in a browser.

Processing the Upload

The key class in processing uploaded datais UploadHandler, which allows callback function by the AllFilesUploadedCallback setting. Such function is called when the whole upload session completes and get an array of UploadedFile objects as an argument ($uploadedFiles). Each UploadedFile object contains a ConvertedFiles array of all files created for this user-selected file (such as thumbnails, Zip file, icon, and source file itself) corresponding to the Converters configuration. 

According to the catalog requirements, we store user-selected files in the /Catalog folder. In general, this task can be solved as follows:

  1. Iterate through the array of uploaded files and perform the steps below for each of them.
  2. Retrieve converted files using the UploadedFile::getConvertedFiles() method.
  3. Get the source file, which is the first (number 0) in the ConvertedFiles array as soon as we set the only converter.
  4. Move the source file to the corresponding folder using the moveTo method.

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

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

$handler = new UploadHandler();
$handler->setAllFilesUploadedCallback("saveAllUploadedFiles");
$handler->processRequest();

function saveAllUploadedFiles($uploadedFiles) {
    $absGalleryPath = realpath("../Catalog/");
    foreach ($uploadedFiles as $uploadedFile)
    {
        $convertedFiles = $uploadedFile->getConvertedFiles();
        $sourceFile = $convertedFiles[0];
        $sourceFile->moveTo($absGalleryPath . "/" . $uploadedFile->getSourceName());
    }
}
?>
NoteMake sure that there are enough permissions to save files to the Catalog folder.

Displaying Uploaded Files

The last thing remaining to complete our catalog app is to write some code that displays the files we upload. This is pretty simple — just take all files from the upload folder and add them to a page.

<!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>

That's all. Now we can open the index.php page and try to upload some files there.

Uploading Images

Aurigma Image Uploader features special functionality for image uploads. In addition to browsing photos as thumbnails, it can resize photos before uploading them to a server. It saves your server resources and traffic by reducing the file size by tens of times. Learn more about resize before the upload.

As an example, let's see how to modify Image Uploader settings to upload 800x800 resized copy instead of the original image along with a 120x120 thumbnail.

<?php
    $uploader = new Uploader("Uploader1");
    $uploader->getUploadSettings()->setActionUrl("upload.php");
    $uploader->getUploadSettings()->setRedirectUrl("gallery.php");
    
    $converters = &$uploader->getConverters();
    $converter = new Converter();
    $converter->setMode("*.*=Thumbnail");
    $converter->setThumbnailFitMode("Fit");
    $converter->setThumbnailWidth(800);
    $converter->setThumbnailHeight(800);
    $converters[] = $converter;
    $converter = new Converter();
    $converter->setMode("*.*=Thumbnail");
    $converter->setThumbnailFitMode("Fit");
    $converter->setThumbnailWidth(120);
    $converter->setThumbnailHeight(120);
    $converters[] = $converter;

    $ip = new InstallationProgress($uploader);
    $ip->setProgressCssClass("ScreenStyle");
    $ip->setInstructionsCssClass("ScreenStyle");
    
    $uploader->render();
?>

 

Now, let's modify a little bit the upload.php code to save thumbnails instead of the original file:

<?php

require_once "ImageUploaderPHP/UploadHandler.class.php";

$handler = new UploadHandler();
$handler->setAllFilesUploadedCallback("saveAllUploadedFiles");
$handler->processRequest();

function saveAllUploadedFiles($uploadedFiles) {
    $absGalleryPath = realpath("../Gallery/");
    $absThumbnailsPath  = $absGalleryPath . "/" . "Thumbnails/";
    foreach ($uploadedFiles as $uploadedFile)
    {
        $convertedFiles = $uploadedFile->getConvertedFiles();
        $thumbnail1 = $convertedFiles[0];
        $thumbnail1->moveTo($absGalleryPath . "/" . $uploadedFile->getSourceName() . ".jpg");
        $thumbnail2 = $convertedFiles[1];
        $thumbnail2->moveTo($absThumbnailsPath . "/" . $uploadedFile->getSourceName() . ".jpg");
    }
}
?>

This code saves the resized images to the Gallery folder and the thumbnails to the Thumbnails subfolder.

The last thing left to do is to transform the catalog.php to gallery.php which displays thumbnails instead of links, and that's all.

<!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>    \n";

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

What Next?

This article demonstrates just a small subset of Aurigma Image Uploader features. If you are interested in learning more, visit Image Uploader documentation. Or contact us directly with any questions.

Demo
Try
Buy

Forums

Documentation

Learn More

Documentation