Is robust javascript-only upload of file possible

Question

I want a robust way to upload a file. That means that I want to be able to handle interruptions, error and pauses.

So my question is: Is something like the following possible using javascript only on the client.

If so I would like pointers to libraries, tutorials, books or implementations. If not I would like an explanation to why it's not possible.

Scenario:

Open a large file

Split it into parts

For each part I would like to

Create checksum and append to data

Post data to server (the server would check if data uploaded correctly)

Check a web page on server to see if upload is ok

If yes upload next part if no retry

Assume all posts to server is accompanied by relevant meta data (sessionid and whatnot).

VoteyDisciple · Accepted Answer · 2009-09-03 10:50:26Z

6

No. You can, through a certain amount of hackery, begin a file upload with AJAX, in which case you'll be able to tell when it's finished uploading. That's it.

JavaScript does not have any direct access to files on the visitor's computer for security reasons. The most you'll be able to see from within your script is the filename.

answered Sep 3, 2009 at 10:50

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kangax · Accepted Answer · 2009-09-03 13:05:47Z

4

Firefox 3.5 adds support for DOM progress event monitoring of XMLHttpRequest transfers which allow you to keep track of at least upload status as well as completion and cancellation of uploads.

It's also possible to simulate progress tracking with iframes in clients that don't support this newer XMLHTTPRequest additions.

For an example of script that does just this, take a look at NoSWFUpload. I've been using it succesfully for about few months now.

answered Sep 3, 2009 at 13:05

kangax

39.2k13 gold badges101 silver badges135 bronze badges

1 Comment

Tom Over a year ago

Unfortunately if you look in the issues section of the noswfupload site you will see that it is apparently broken in FF7

bobince · Accepted Answer · 2009-09-03 15:25:55Z

3

It's possible in Firefox 3 to open a local file as chosen by a file upload field and read it into a JavaScript variable using the field's files array. That would allow you to do your own chunking, hashing and sending by AJAX.

There is some talk of getting something like this standardised by W3, but for the immediate future no other browser supports this.

answered Sep 3, 2009 at 15:25

bobince

538k111 gold badges675 silver badges846 bronze badges

Comments

bmarti44 · Accepted Answer · 2010-11-05 14:24:29Z

Yes. Please look at the following file -

function Upload() {

  var self = this;

  this.btnUpload;

  this.frmUpload;

  this.inputFile;

  this.divUploadArea;

  this.upload = function(event, target) {
    event.stopPropagation();

    if (!$('.upload-button').length) {
      return false;
    }

    if (!$('.form').length) {
      return false;
    }  

    self.btnUpload = target;
    self.frmUpload = $(self.btnUpload).parents('form:first');
    self.inputFile = $(self.btnUpload).prev('.upload-input');
    self.divUploadArea = $(self.btnUpload).next('.uploaded-area');

    var target = $(self.frmUpload).attr('target');
    var action = $(self.frmUpload).attr('action');

    $(self.frmUpload).attr('target', 'upload_target'); //change the form's target to the iframe's id
    $(self.frmUpload).attr('action', '/trnUpload/upload'); //change the form's action to the upload iframe function page
    $(self.frmUpload).parent("div").prepend(self.iframe);

    $('#upload_target').load(function(event){

      if (!$("#upload_target").contents().find('.upload-success:first').length) {
        $('#upload_target').remove();
        return false;
      } else if($("#upload_target").contents().find('.upload-success:first') == 'false') {
        $('#upload_target').remove();
        return false;  
      }

      var fid = $("#upload_target").contents().find('.fid:first').html();
      var filename = $("#upload_target").contents().find('.filename:first').html();
      var filetype = $("#upload_target").contents().find('.filetype:first').html();
      var filesize = $("#upload_target").contents().find('.filesize:first').html();

      $(self.frmUpload).attr('target', target); //change the form's target to the iframe's id
      $(self.frmUpload).attr('action', action); //change the form's  
      $('#upload_target').remove();

      self.insertUploadLink(fid, filename, filetype, filesize);
    });

  };

  this.iframe = '' +
                'false' +
                '';

  this.insertUploadLink = function (fid, filename, filetype, filesize) {
    $('#upload-value').attr('value', fid);

  }

}

$(document).ready(event) {
  var myupload = new Upload();  
  myupload.upload(event, event.target);
}

With also using PHP's APC to query the status of how much of the file has been uploaded, you can do a progress bar with a periodical updater (I would use jQuery, which the above class requires also). You can use PHP to output both the periodical results, and the results of the upload in the iframe that is temporarily created.

This is hackish. You will need to spend a lot of time to get it to work. You will need admin access to whatever server you want to run it on so you can install APC. You will also need to setup the HTML form to correspond to the js Upload class. A reference on how to do this can be found here http://www.ultramegatech.com/blog/2008/12/creating-upload-progress-bar-php/

Collectives™ on Stack Overflow

Is robust javascript-only upload of file possible

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related