Get file input value as binary data

Question

How can I access the binary representation with JavaScript from a file uploaded with a file input?:

<input type="file" name="file">

I can access the details of the uploaded file successfully with:

$('[name="image"]').get(0).files[0].name
// "2013-10-19 15.10.59.jpg"

$('[name="image"]').get(0).files[0].size
// 774016

$('[name="image"]').get(0).files[0].type
// "image/jpeg"

But not the real representation.

I found this tutorial that makes use of:

document.getElementById("photo").files[0].getAsBinary()

However, that method doesn't exists in my browser (Chrome Canary 34.0.1772.0 on OS X 10.9).

Mike 'Pomax' Kamermans · Accepted Answer · 2021-06-24 21:37:52Z

11

From https://developer.mozilla.org/en-US/docs/Web/API/File.getAsBinary

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

It suggests:

Note: This method is obsolete; you should use the FileReader method readAsBinaryString() or readAsArrayBuffer() instead.

However, FileReader has several other read functions that might be more appropriate, like readAsDataURL() which lets you immediately use the file in web context (e.g as <img> src attribute), see the method listing for all options.

// Retrieve the first (and only, unless using the `multiple` attribute) File from the FileList object
const f = document.getElementById("photo").files[0]; 
    
if (f) {
  const reader = new FileReader();
  reader.onload = function(evt) { 
    const metadata = `name: ${f.name}, type: ${f.type}, size: ${f.size}, contents:`;
    const contents = evt.target.result;
    console.log(metadata, contents);
  };
  reader.readAsDataURL(f);
}

edited Jun 24, 2021 at 21:37

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

answered Jan 8, 2014 at 15:08

Pez Cuckow

14.5k19 gold badges83 silver badges132 bronze badges

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

2 Comments

sk904861 Over a year ago

readAsBinaryString() is deprecated as per the 12 July 2012 Working Draft from the W3C.

ataravati Over a year ago

This answer is so confusing. It says you should use readAsBinaryString() and then at the end it doesn't use it at all.

Squirrel · Accepted Answer · 2014-01-08 15:07:37Z

0

Use the readAsBinaryString method of the FileReader API

answered Jan 8, 2014 at 15:07

Squirrel

643 bronze badges

Collectives™ on Stack Overflow

Get file input value as binary data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related