jQuery: file upload that works

There are hundreds of jQuery plugins that claim to be able to handle file uploads, but how many of them really work? Have you ever felt frustrated after trying to make a plugin work but with no results? This is what's happened to me with file upload, until I discovered the File Uploader plugin. Actually, this script is made up by two stand-alone classes that can work even without jQuery, but still. The fact is that this plugin is able to handle also multiple file uploads very easily. The problem is that it's a little bit tricky with its base configuration, especially on the server-side. In this post I'll tell you more about my experience with File Uploader to help you to avoid my errors and be ready to use it effectively.

Plugin contents

When you unzip the plugin archive, the following directories and files are created:

/client
/server
readme.md
/tests

The relevant folders are client and server, which contain the required JavaScript files and server-side scripts, respectively. readme.md contains the installation instructions, so it's advisable to read it before proceeding. client contains the following files:

demo.html
fileuploader.css
fileuploader.js
loading.gif

The relevant files are fileuploader.js, fileuploader.css and loading.gif. Instead, the directory server has the following contents:

/coldfusion
OctetStreamReader.java
perl.cgi
php.php
readme.txt
/uploads

We're interested in the PHP script, so we'll use it.

Set up

1. Copy fileuploader.css, fileuploader.js, loading.gif and php.php (you can rename this one as you wish) in your target directory.
2. Create an upload directory on your web server.
3. Create an index file on your target directory (just for testing purposes).
4. Link the plugin style sheet in the head section of your index file.
5. Add the following markup structure to your page:

   <div id="file-uploader">  
     <noscript>   
      <p>Please enable JavaScript to use file uploader.</p>
     </noscript>         
   </div>
   

6. Just before the closing body tag, reference jQuery and fileuploader.js with the appropriate script elements.
7. Use the following code:

   $(function() {
   
     function createUploader() {
     
       var uploader = new qq.FileUploader({
         element: document.getElementById('file-uploader'),
         action: 'upload.php',
         debug: true
       });
     
     }
   
     createUploader();
   });
   

   The debug option is set to true so you can make sure that everything is working correctly.
8. Your PHP script has the following lines at the end of it:

   // list of valid extensions, ex. array("jpeg", "xml", "bmp")
   $allowedExtensions = array();
   // max file size in bytes
   $sizeLimit = 10 * 1024 * 1024;
   
   $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
   $result = $uploader->handleUpload('uploads/');
   

   Change the variables to the values you desire. Instead, pass to the qqFileUploader::handleUpload() method the full path of your upload directory. I suggest you using the following approach:

   $result = $uploader->handleUpload($_SERVER['DOCUMENT_ROOT'] . '/path/to/upload/');
   

   Always check out whether your document root contains a trailing slash or not. If so, don't use a trailing slash at the beginning of your path. On the contrary, always use a trailing slash at the end of it.

Caveats

1. Make sure that your upload directory is writable by setting the proper permissions to it.
2. Make sure that your upload limit is greater than 10 Mb.
3. Make sure that your POST limit is greater than 10 Mb.

Of course these recommendations may vary depending on your server settings and requirements.