File data from input element

Question

In Firefox 3 it is possible to access the contents of a <input type="file"> element as in the following.

Assume a form with the following element:

<input type="file" id="myinput">

Now the data of the file selected can be accessed with:

// Get the file's data as a data: URL
document.getElementById('myinput').files[0].getAsDataURL()

Is there a cross-browser way to accomplish the same thing?

Firefox documentation for this feature:

• https://developer.mozilla.org/en/nsIDOMFileList
• https://developer.mozilla.org/en/nsIDOMFile

Buhler

What are you trying to accomplish? Image preview in browser or Ajax file uploads? – Filial

The current goal is to draw the image on a canvas. In the future, I think I might want to perform an upload through Ajax, though. – Buhler

You're pretty limited in that case. Ajax file uploads work in FF 3+, Safari 4+ and Chrome 2+, so you may have more luck in there. I, for one, don't know of any other way of importing image data inside a canvas. If you find one, please update this question. – Filial

this link was really helpful to me : html5rocks.com/en/tutorials/file/dndfiles – Poker

Answer 1

This is possible in at least Chrome, Firefox and Safari: Reading Files. see associated jsfiddle

function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
          document.getElementById('byte_content').textContent = _.reduce(evt.target.result, 
              function(sum, byte) {
                  return sum + ' 0x' + String(byte).charCodeAt(0).toString(16);
              }, '');
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob;
    if (file.slice) {
        blob = file.slice(start, stop + 1);
    }else if (file.webkitSlice) {
      blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      blob = file.mozSlice(start, stop + 1);
    }
    console.log('reader: ', reader);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

Crowberry

the jsFiddle code doesn't seem to work in Chrome now. – Vanya

Thanks for pointing that out, I've updated the fiddle. It seems like API has been finalized and Chrome is now using .slice() instead of the older .webkitSlice(). – Crowberry

Answer 2

In Firefox 19 (Released 2013-02-19) they added:

    window.URL.createObjectURL(
        document.getElementById('myinput').files[0]
    );

Flow