Promisification of FileReader

by dzejkej

HTML

<input type="file" id="input" />
<div id="output" />

CSS

body {
  background: #000;
  color: white;
}

TypeScript

class StorageService {
  async processFile(file): Promise<string> {
    return await this.readFileInternal(file);
  }

  readFileInternal(file): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = reject;
      reader.onloadend = () => {
        resolve(reader.result as string);
      };
      reader.readAsText(file);
    });
  }
}

document.getElementById('input').addEventListener('change', async (e) => {
  const file = document.getElementById('input').files[0];

  if (file) {
    const storageService = new StorageService();
    const result = await storageService.processFile(file);
    document.getElementById("output").innerHTML = `<pre>${result}</pre>`;
  }
});