Question

163

File data from input element

rated 0 times [ 169] [ 6] / answers: 1 / hits: 22832 / 15 Years ago, tue, june 2, 2009, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katharinek

Add To Favorites

Follow

Total Points: 302

Total Questions: 105

Total Answers: 123

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

katharinek questions

1 Take desktop screenshot with Electron

Sat, Jan 16, 21, 00:00, 3 Years ago

1 Typescript types for a pipe() function

Sat, Dec 5, 20, 00:00, 4 Years ago

1 How to display all items from an API in React JS?

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Shopify {{cart.total_price}} not updating when used outside of CSS class

Tue, Sep 15, 20, 00:00, 4 Years ago

1 angular : reload page after redirection

Fri, Aug 21, 20, 00:00, 4 Years ago

View All

answered 15 Years ago siena · Accepted Answer

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);