Jan 202013
 
Article Javascript

This post shows how to use the plupload javascript library to post images to a web server.

The main advantage of plupload is its ability to perform client-side processing of the image, reducing the volume of data to be sent to the server. This is specially convenient for web sites targeted to users of mobile devices. It allows, for instance, uploading to the server pictures taken with the built-in camera. An image of this kind can be several MBytes in size, with a resolution too big to be displayed on a web page. With plupload, it is possible to change the scale, and optionally the quality of the image, to reduce the size by up to 90%.

Besides, plupload uses whatever image processing mechanism is available at the client to perform this processing of the image: html5, flash, gears, silverlight or browserplus, making it compatible with almost any kind of client.

For these reasons, plupload has been adopted as the upload library chosen by many CMS platforms, such as WordPress

 plupload installation

To perform the installation, go to the plupload web site, and download the installation package. The file we downloaded is named plupload_1_5_4.zip ad is 240 KB in size. Next, the file is uncompressed under the root of the web server, creating a “plupload” directory. There is a “js” subdirectory below where the library files are located, together with other directories with the documentation and examples.

$ ls plupload
changelog.txt  docs  examples  js  license.txt  readme.md
$ ls plupload/js
i18n                     plupload.flash.js   plupload.html4.js        plupload.silverlight.xap
jquery.plupload.queue    plupload.flash.swf  plupload.html5.js
jquery.ui.plupload       plupload.full.js    plupload.js
plupload.browserplus.js  plupload.gears.js   plupload.silverlight.js
$

Image upload form

Among the available examples, in this post we will analyse the “Custom upload” located in “/plupload/examples/custom.html”. The content of the HTML file is:

1. Loading of libraries

<html>
<head>
<!-- Third party script for BrowserPlus runtime (Google Gears included in Gears runtime now) -->
<script type="text/javascript"
    src="http://bp.yahooapis.com/2.4.21/browserplus-min.js">
</script>
<script type="text/javascript" s
    rc="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<!-- Load plupload -->
<script type="text/javascript" src="/plupload/js/plupload.full.js"></script>

2.Javascript code

<script type="text/javascript">
// Custom example logic
$(function() {
    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash,silverlight,browserplus',
        browse_button : 'pickfiles',
        container : 'container',
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf',
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],
        resize : {width : 320, height : 240, quality : 90}
    });

    uploader.bind('Init', function(up, params) {
        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles').click(function(e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.init();

    uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
            $('#filelist').append(
                '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
            '</div>');
        });

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('UploadProgress', function(up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
    });

    uploader.bind('Error', function(up, err) {
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file) {
        $('#' + file.id + " b").html("100%");
    });
});
</script>
</head>

We can see that plupload creates a “uploader” object. In the object initialization, several parameters are set. One of these parameters specifies the requested dimensions and quality of the image after processing:

        resize : {width : 320, height : 240, quality : 90}

There is another parameter “max_file_size” that limits the maximum size of the image to be uploaded.

Besides, the “url” parameter specifies the destination url where data are to be posted. The value of the “url” parameter in this example is “upload.php” (the absolute url is then “/plupload/examples/upload.php”. This “upload.php” script is also included in the plupload installation package, and must be edited to set the value of the “$targetDir” variable to point to the directory we want to use to store the images received.

We edited the variable to set it to:

$targetDir = 'uploads';

using this value, images will be stored under “plupload/examples/uploads”. We must ensure that the userid of the web server process is allowed write access to this directory.

3. HTML <body> with links for selecting and sending the files

<body>
<h3>Custom example</h3>
<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>
</body>
</html>

Sending the images

Pointing the browser to the url “/plupload/examples/custom.html”, the page displayed includes a link “[Select files]” and another link “[Upload files]”:

plupload-custom-upload

We can see also that the “runtime” available at the client to perform the image processing is also displayed (“html5” in the example screenshot)

Clicking on “Select Files”, a popup window is displayed to choose the files to be uploaded:

plupload-seleccionar-imagenes

Finally, clicking on “Upload files”, the actual upload takes place:

plupload-custom-upload-2

Then we inspect the upload directory “pluploads/examples/uploads” to have a look at the result:

$ ls -l
 total 84
 -rw-r--r-- 1 www-data www-data 27710 Jan 17 09:05 Android_emulator_x86.jpg
 -rw-r--r-- 1 www-data www-data 26238 Jan 17 09:05 choose_apk.png
 -rw-r--r-- 1 www-data www-data 24602 Jan 17 09:05 moved_apk.png

We can see that plupload has applied the requested scaling of the images, and therefore the size of the files uploaded to the server is smaller than the size of the original images.

 Posted by at 1:13 pm

 Leave a Reply

(required)

(required)