file-reader-promise

Wraps FileReader in a Promise.

simpler API of HTML5 FileReader:

1FileReaderPromise.readAsText(file)
2.then(function (textResult) {})

Enjoy it.

Install

npm install --save file-reader-promise

Usage

Basic syntax

1const FileReaderPromise = require('file-reader-promise');
2
3FileReaderPromise.readAsText(file)
4  .then(text)
5  .catch(err => console.error(err));

API

1FileReaderPromise.readAsArrayBuffer()
2FileReaderPromise.readAsBinaryString()
3FileReaderPromise.readAsDataURL()
4FileReaderPromise.readAsText()
5
6// you can get a simple value(event.target.result) at Promsie chain in default config.
7FileReaderPromise.readAsText(file).then(textValue)
8// but, if you want a original value, you can set a new config for FileReaderPromise:
9const config = { enableSimplify: false }
10FileReaderPromise.set(config)
11FileReaderPromise.readAsArrayBuffer(file)
12.then(function (event) {
13  // event is original event of instanceOfFileReader.onload = function (event) {}
14  console.log(event.target.result)
15  console.log(event.timeStamp)
16})

Example: file input

1const FileReaderPromise = require('file-reader-promise');
2
3function handleImage(imageDataUrl) {
4  // ...
5}
6function handleText(text) {
7  // ...
8}
9function handleArrayBuffer(arrayBuffer) {
10  // ...
11}
12
13// e.g. <input id="file-input" type="file" />
14const fileInput = document.getElementById('file-input');
15fileInput.addEventListener("change", handleFiles, false);
16function handleFiles(event) {
17  const file =  event.target.files[0];
18
19  if(file) {
20    if (/^image/.test(file.type)) {
21      FileReaderPromise.readAsDataURL(file)
22      .then(handleImage)
23      .catch(err => console.error(err));
24    } else {
25      FileReaderPromise.readAsText(file)
26      .then(handleText)
27      .catch(err => console.error(err));
28    }
29    // or
30    FileReaderPromise.readAsArrayBuffer(file)
31      .then(handleArrayBuffer)
32      .catch(err => console.error(err));
33  }
34}