File uploader. Reload

We recently wrote about SWF upload plugin. And this is really great plugin (as well as SWFupload library which is behind the plugin).

But as it turned out there are plenty of situations when alternative solution is needed (not necessary better), e.g. for users

# who can’t use Flash
# need drag-and-drop file select

Also you may want to replace sfWidgetFormInputSWFUploadPlugin b/c it’s bit complicated to debug (even with debug mode turned on) and it has some strange styling issue which causes that “browse files” button stops working (it’s something caused by css and happens in combination with other tags on page).

So the answer to the developers who want to avoid all mentioned above problems is file-uploader library. It uses XMLHTTPRequest for uploading multiple files with progress-bar and supports drag-and-drop files from desktop.
The fact that it works without flash is primary thing as pages with this code will work on iPad/iPod devices.

Usage is not complicated and provide easy way for debugging (e.g. you can see all requests/responses via Firebug). You have to include library js/css files for client side and add simple widget code:

    <div id="file-uploader-demo"></div>
 
    <script src="fileuploader.js" type="text/javascript"></script>
    <script>        
        function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader-demo'),
                action: <?php echo url_for('symfony action goes here'),
                debug: true
            });           
        }
        window.onload = createUploader;     
    </script>

Server side is bit more complicated so you can use sample file provided with library (it’s implemented as PHP class so you can mostly re-use it with minor changes). In case you use provided qqFileUploader class, actual code for handling request from client will look like this:

    if ($request->isXmlHttpRequest())
    {
      $uploader = new qqFileUploader();
      $result = $uploader->handleUpload($directory);
      $result = htmlspecialchars(json_encode($result), ENT_NOQUOTES);
      return $this->renderText($result);
    }

So this piece of code will put uploaded file into $directory location. Pretty easy, eh?
Its simplistic design also makes library highly customizable (one more advantage!).
I’m sure plugin which would replace form file widget will be written soon as well.