6

So - I've been using this method of file uploading for a bit, but it seems that Google Gears has poor support for the newer browsers that implement the HTML5 specs. I've heard the word deprecated floating around a few channels, so I'm looking for a replacement that can accomplish the following tasks, and support the new browsers. I can always fall back to gears / standard file POST's but these following items make my process much simpler:

  1. Users MUST to be able to select multiple files for uploading in the dialog.
  2. I MUST be able to receive status updates on the transmission of a file. (progress bars)
  3. I would like to be able to use PUT requests instead of POST
  4. I would like to be able to easily attach these events to existing HTML elements using JavaScript. I.E. the File Selection should be triggered on a <button> click.
  5. I would like to be able to control response/request parameters easily using JavaScript.

I'm not sure if the new HTML5 browsers have support for the desktop/request objects gears uses, or if there is a flash uploader that has these features that I am missing in my google searches.

An example of uploading code using gears:

// select some files:
var desktop = google.gears.factory.create('beta.desktop');
desktop.openFiles(selectFilesCallback);

function selectFilesCallback(files) {
  $.each(files,function(k,file) {
    // this code actually goes through a queue, and creates some status bars
    // but it is unimportant to show here...
    sendFile(file);
  });
}

function sendFile(file) {
  google.gears.factory.create('beta.httprequest');
  request.open('PUT', upl.url);
  request.setRequestHeader('filename', file.name);
  request.upload.onprogress = function(e) {
    // gives me % status updates...  allows e.loaded/e.total
  };
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      // completed the upload!
    }
  };
  request.send(file.blob);
  return request;
}

Edit: apparently flash isn't capable of using PUT requests, so I have changed it to a "like" instead of a "must".

Community
  • 1
  • 1
gnarf
  • 105,192
  • 25
  • 127
  • 161
  • Just chiming in: Firefox 3.6 supports the HTML5 file API. Open this page in FF 3.6 for a demo :) http://demos.hacks.mozilla.org/openweb/FileAPI/ – August Lilleaas Feb 18 '10 at 21:11
  • http://www.element-it.com/multiple-file-upload/flash-uploader.aspx is a SWF control for what you want to do. – Todd Moses Feb 18 '10 at 21:21
  • @Todd Moses - It looks alright, but the $99 price tag has me looking at swfupload, neither of these support `PUT` requests, which I may have to work around... (I'm pretty sure that support for PUT is just missing in flash/flex) – gnarf Feb 18 '10 at 22:06
  • It appears the PUT is only available for AIR apps in ActionScript 3. – Todd Moses Feb 19 '10 at 05:09
  • 1
    I played around quite a bit with the Firefox 3.6 HTML5 file API, and it came pretty darn close. The only thing I wasn't able to reliably do was get status updates on the `PUT` through `XMLHttpRequest` -- it claimed to have `xhr.upload.onprogress` but I never saw it get fired after a `xhr.send(file)`... `PUT` seems to be generally unsupported, which is a shame. – gnarf Feb 19 '10 at 10:02
  • 2
    Plupload is one of the newest kids on the block and it uses the best method available (HTML 5, Flash, Gears, Silverlight): http://www.plupload.com/ – janmoesen Feb 21 '10 at 20:19
  • @janmoesen - I ended up going with plupload - If you feel like creating an answer instead of a comment, I'll accept it :) – gnarf Jun 08 '10 at 16:45

2 Answers2

1

I have previously used flash based ones such as http://www.webresourcesdepot.com/open-source-flash-uploader-multi-bit-shift/. They work ok and being only dependent on flash should work on most computers. I haven't found a reliable way of doing it with js alone but flash could be controlled with js - especially if you write your own.

hope this helps.

Kru
  • 61
  • 3
1

(Spawned from a comment on the original question, per askers's suggestion.)

Plupload is one of the newest kids on the block and it uses the best method available (HTML 5, Flash, Gears, Silverlight): http://plupload.com/

janmoesen
  • 7,910
  • 1
  • 23
  • 19