Multiple file upload with Google Closure Library

Question

How to handle multiple file uploads with Google Closure?

• Is it possible to use YUI3 Uploader with Google Closure Library? Is there an externs file available for YUI3? Would it be possible to put the YUI3 Uploader in an iframe and access a variable returned by the upload handler in the parent frame of the iframe? With an iframe maybe I could create an isolated environment for the YUI uploader.

• Does anyone have experience with SWFUpload, Plupload or another alternative using Google Closure Library?

• As an alternative, I could use Google Picker to upload files to Google Drive, and then use the Google Drive SDK to download these files to my web host. The drawback is that I can't change the style of Google Picker to match with the style of my web site.

Answer 1

It's actually fairly easy to write a Google Closure Library component that uses SWFUpload for multiple file uploading. I created an externs file for advanced compilation with the Closure Compiler:

var SWFUpload = {
    "instances": function () {},
    "movieCount": {},
    "version": {},
    "QUEUE_ERROR": {
        "QUEUE_LIMIT_EXCEEDED": {},
        "FILE_EXCEEDS_SIZE_LIMIT": {},
        "ZERO_BYTE_FILE": {},
        "INVALID_FILETYPE": {}
    },
    "UPLOAD_ERROR": {
        "HTTP_ERROR": {},
        "MISSING_UPLOAD_URL": {},
        "IO_ERROR": {},
        "SECURITY_ERROR": {},
        "UPLOAD_LIMIT_EXCEEDED": {},
        "UPLOAD_FAILED": {},
        "SPECIFIED_FILE_ID_NOT_FOUND": {},
        "FILE_VALIDATION_FAILED": {},
        "FILE_CANCELLED": {},
        "UPLOAD_STOPPED": {}
    },
    "FILE_STATUS": {
        "QUEUED": {},
        "IN_PROGRESS": {},
        "ERROR": {},
        "COMPLETE": {},
        "CANCELLED": {}
    },
    "BUTTON_ACTION": {
        "SELECT_FILE": {},
        "SELECT_FILES": {},
        "START_UPLOAD": {},
        "JAVASCRIPT": {}
    },
    "CURSOR": {
        "ARROW": {},
        "HAND": {}
    },
    "WINDOW_MODE": {
        "WINDOW": {},
        "TRANSPARENT": {},
        "OPAQUE": {}
    },
    "completeURL": function () {},
    "Console": {
        "writeLine": function () {}
    }
},
FileProgress = {}

Answer 2

Have you taken a look at the goog.net.iframeIo class in the Google Closure Library? You could render several file input elements in individual forms, then, using this component, post each of those forms via hidden IFrames to the web server.

Here's a link to Google's documentation on how to implement it:

http://code.google.com/p/closure-library/source/browse/trunk/closure/goog/net/iframeio.js#48