Read the contents of a "file" object?

Question

So I have a "File" object (retrieved by handling file drag and drop from desktop). I can send the files to the server with ajax, and then throw them back for javascript to handle them. But is it possible to read the contents of it without doing all this?

Here, play around with this fiddle. Drag any file to the box and use the variable file.

I've already tried all of the methods of this object...no luck. Can you get the contents of the file you just dragged into the browser?

PS: I would send the files to the server like this:

var ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("returnRawPostData.php");
ajaxRequest.send(file);

I might have missed something in the code above, but that's just because one doesn't use plain JS to do AJAX calls anymore.

Check out http://stackoverflow.com/questions/2657653/drag-and-drop-file-upload-in-google-chrome-chromium — Detect, Mar 05 '11 at 03:04

score 45 · Accepted Answer · edited Aug 01 '19 at 09:18

45

Using the links from Martin Mally (thanks a lot!), I came up with this:

var file = e.dataTransfer.files[0],
    read = new FileReader();

read.readAsBinaryString(file);

read.onloadend = function(){
    console.log(read.result);
}

Where read.result holds the contents of the file.

edited Aug 01 '19 at 09:18

Philipp Kief

8,172
5
33
43

answered Mar 05 '11 at 17:03

JCOC611

19,111
14
69
90

Be careful, this is an async method. – Jerry Feb 07 '20 at 10:40

score 11 · Answer 2 · edited Apr 23 '12 at 20:24

11

I think it's possible; check these two articles:

They both manipulates with "dropped" file via JS/HTML before uploading to server. (e.g. picture resizing etc.) I hope it helps.

edited Apr 23 '12 at 20:24

Tom

20,852
4
42
54

answered Mar 05 '11 at 09:27

Martin Maly

237
2
6

score 3 · Answer 3 · answered Oct 14 '22 at 22:19

Most modern browsers can now use the Blob.text() API, which provides a promise-based method of reading files.

Every item within a FileList (inputElement.files) is an instance of a Blob, meaning we can call .text() on any item within the FileList to read it as text.

This is asynchronous, and much simpler than setting up a FileReader and using events, if you're familiar with async code and promises.

async function readTextFromFileInput(input: HTMLInputElement): Promise<string | void> {
  if (input.files?.length !== 1) {
    // No file selected...
    return;
  }

  return await input.files[0].text();
}

score 1 · Answer 4 · answered Feb 28 '22 at 13:39

1

I just use

let reader = new FileReader();
reader.readAsText(your_file_object);

reader.onload = function() {
    console.log(reader.result);  // prints file contents
};

answered Feb 28 '22 at 13:39

xjcl

12,848
6
67
89

Read the contents of a "file" object?

4 Answers4

Linked