FileReader in dart

472 views
Skip to first unread message

hallo aa

unread,
Feb 9, 2012, 8:00:18 AM2/9/12
to General Dart Discussion
Hello All.

I have a problem with the filereader in dart:html. Im trying to read
an inputfile, which is given from a <input>. I have come as far as
calling the readAsBinaryString, but the result is always empty. I
think this is a result of me not using the callback, but i dont really
know how. I really hope you can help. Below is some code, that should
clerify what my problem is:

InputElement inp = new Element.tag('input');
inp.id = "myInp";
inp.type = "file";
DivElement de = document.query('#divele');
de.insertAdjacentElement('beforeEnd',inp);

inp.on.change.add((event){
InputElement myInput = document.query('#myInp');
FileList mfl = myInput.files;
File myFile = mfl.item(0);
FileReader fr = new FileReader();
fr.readAsBinaryString(myFile);

String myResult = fr.result; //this is always empty! which is
the problem
});

Brook Monroe

unread,
Feb 9, 2012, 8:16:51 AM2/9/12
to General Dart Discussion
Tech issues aside, my first thought is that you're trying to violate
the browser security model, which says you can't load arbitrary files
(such as a file name you type into the input box) into a web page.

Lars Tackmann

unread,
Feb 9, 2012, 11:55:28 AM2/9/12
to General Dart Discussion
The FileReader API is asynchronous so you need to add some handlers.
It can be handled like this (using the dart:dom API):

void fileUpload() {
HTMLInputElement input = window.document.querySelector('#upload');
HTMLElement log = window.document.querySelector("#log");

input.addEventListener("change", (e) {
FileList files = input.files;
Expect.isTrue(files.length > 0);
File file = files.item(0);

FileReader reader = new FileReader();
reader.onload = (fileEvent) {
print("file read");
log.innerHTML = "file content is ${reader.result}";
};
reader.onerror = (evt) {
print("error ${reader.error.code}");
};
reader.readAsText(file);
});
}

you also need to allow file uploads from to your browser, which can
either be done in Chrome by starting it with the flags "--allow-file-
access-from-files" (I seam to remember a way to allow this
programmatically by presenting the user with a dialog to accept file
upload, but I cannot find it).

Sam McCall

unread,
Feb 9, 2012, 11:55:28 AM2/9/12
to Brook Monroe, General Dart Discussion
Looking at the MDN docs, readAsBinaryString is as an async method,
fr.result will only be available once it's completed.

You probably want something like:


FileReader fr = new FileReader();

fr.on.load.add((e) {
print(fr.result);
});
fr.readAsBinaryString(myFile);

Brook: This is allowed by the browser security model: see
https://developer.mozilla.org/en/Using_files_from_web_applications

Lars Tackmann

unread,
Feb 9, 2012, 12:03:22 PM2/9/12
to General Dart Discussion


On Feb 9, 5:55 pm, Sam McCall <sammcc...@google.com> wrote:
> Looking at the MDN docs, readAsBinaryString is as an async method,
> fr.result will only be available once it's completed.
>
> You probably want something like:
>   FileReader fr = new FileReader();
>   fr.on.load.add((e) {
>     print(fr.result);
>   });
>   fr.readAsBinaryString(myFile);
>
> Brook: This is allowed by the browser security model: seehttps://developer.mozilla.org/en/Using_files_from_web_applications
>

The dart:html FileReader API seams to have hard dependency on
dart:dom. When I use it I get


htmlimpl.dart:18155:12: warning: type "dom.FileReader" is not
assignable to "html.FileReader"
return new dom.FileReader();

Sam McCall

unread,
Feb 9, 2012, 12:25:03 PM2/9/12
to Lars Tackmann, General Dart Discussion
Ah okay, then you'll need to use addEventListener or onload=, rather
than on.load.add. Apologies!
Reply all
Reply to author
Forward
0 new messages