Upload and read file client side, with angular 2

Question

I need log file(s) from user so I can read and analyze those. For example somekind of drop area, where user drops a file, then I can read it with javascript?

I use Angular2 rc5. I have node.js running backside, but I don't need the data there. I need it only at client side.

Is it possible to read and parse file content with just frontend tech, like angular2 and javascript? Or do I have to upload the file to server and analyze it there?

Claudetta

Yes it's possible in browsers that support it #16505833 – Subeditor

Answer 1

It is possible!

I ended up doing it like this. This reads all the files that are selected with file dialog. I don't need to send these to node.js. I can just manipulate these on client.

<input type='file' accept='text/plain' multiple (change)='openFile($event)'>

openFile(event) {
    let input = event.target;
    for (var index = 0; index < input.files.length; index++) {
        let reader = new FileReader();
        reader.onload = () => {
            // this 'text' is the content of the file
            var text = reader.result;
        }
        reader.readAsText(input.files[index]);
    };
}

It is very basic example of how you can do it.

Claudetta

This approach is not working in typescript as filereader only read one file not multiple files. – Yuk

finally, something worked with first attempt. Thank you! – Harrelson