Upload file inside chrome extension

Question

I need to add a browse button inside my Chrome extension. Users click it and choose a file. I then want to retrieve the file contents (bytes) and do some work on it.

I don't want to have to submit the file to a remote server and then get the response (if that's even doable from inside a Chrome extension), it should be all client-side.

Is this doable inside Chrome extensions?

Answer 1

You should be looking at the FileReader API.

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

A very good basic example of using this interface is in this question.

A minimal example: suppose that you have an <input type="file" id="file"> with a text file selected.

var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e){
  console.log(e.target.result);
}
reader.readAsText(file);

If you need methods other than reading as text (i.e. binary data), see the docs.

Also, this is a good overview: Using files from web applications