Topic: 01. Quick Start
This tutorial is obsolete!
In this short introduction, I'm going to show how you can start using Plupload 1.x in mere minutes.
Introduction is meant to be very easy, but it requires some preliminary knowledge on your side. At the very least you should know how to use web-server. You are not required to know any server-side language, but if you know some, procedure will become even easier. For the sake of this tutorial we assume that your web-server is capable of doing PHP.
First of all you need to download the latest release. As the time goes by, we tend to make it more compact, but the package still contains everything you will need to get started. If you will ever need more – sources, build environment and such, they're available in development package.
After you extract the package, you should see a structure like this:
For the purposes of this tutorial, the only three files you will need are:
plupload.full.js (minified compilation of the core and runtimes),
plupload.flash.swf (required component for the Flash runtime)
upload.php (server-side handler, which will receive files and move them to a target directory)
You will also need to create a directory for uploaded files, for our case we will name it uploads/ and place it into the same directory where upload.php and our index.html file reside. This is what you should get in the document root of the web-server, after you finish preparation:
Do not forget to make sure that uploads/ directory is writable.
And this is how index.html should look like for our simple example to work:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Introduction to Plupload</title>
<script type="text/javascript" src="js/plupload.full.js"></script>
</head>
<body>
<div id="uploader">
<p>Upload Files:</p>
<a id="pickfiles" href="javascript:;">Add Files</a>
<a id="uploadfiles" href="javascript:;">Start Upload</a>
</div>
<script type="text/javascript">
//<![CDATA[
var uploader = new plupload.Uploader({
runtimes: 'flash',
flash_swf_url: 'js/plupload.flash.swf',
browse_button: 'pickfiles',
container: 'uploader',
url: 'upload.php'
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
};
//]]>
</script>
</body>
</html>That's it, if you copy/paste the code into index.html and launch it in browser (remember all files should be uploaded to your web-server first), it will let you select files by clicking on "Add Files" and upload them by clicking on "Start Upload". By now it won't display any progress indication (we will come to that), but if you look into uploads/ folder after you click "Start Upload", you will find that files were indeed uploaded.
Briefly about the options we've used in our short example:
runtimes - comma-separated list of runtimes to try, in left-to-right order (in our case it is Flash only)
flash_swf_url - absolute or relative url of the swf component, which is required by Flash runtime (to keep things simple be sure to load swf from the same domain when using absolute url)
browse_button - id of the DOM element to turn into file dialog trigger
container - id of the DOM element to append uploader's structures to - is useful to make sure that everything is where you'd expect it to be
url - absolute or relative url of the server-side upload handler, receiving the files, renaming them and moving to the destination directory, etc (sample upload handler written in PHP comes bundled with the Plupload)
Notice that we initialize Plupload uploader explicitly by calling: uploader.init(). One more thing you should know for this quick start introduction to be complete is how to start the upload. In our case we attach a click handler to #uploadfiles element and within it call: uploader.start().
Next: Bring Plupload to Life
