A simple Rx abstraction over the FileReader API

rx-file-reader.js

/**
 * Read the text contents of a File or Blob using the FileReader interface.
 * This is an async interface so it makes sense to handle it with Rx.
 * @param {blob} File | Blob
 * @return Observable<string>
 */
const readFile = (blob) => Observable.create(obs => {
  if (!(blob instanceof Blob)) {
    obs.error(new Error('`blob` must be an instance of File or Blob.'));
    return;
  }

  const reader = new FileReader();

  reader.onerror = err => obs.error(err);
  reader.onabort = err => obs.error(err);
  reader.onload = () => obs.next(reader.result);
  reader.onloadend = () => obs.complete();

  return reader.readAsText(blob);
});

Not sure, but using the approach above you could pass in anything you want in place of file reader so I think it would solve this use case. Here's an updated example using typescript and the new Observable syntax from Rxjs 7.

const readFile = (blob: Blob, reader: FileReader = new FileReader()) => new Observable(obs => {
  if (!(blob instanceof Blob)) {
    obs.error(new Error('`blob` must be an instance of File or Blob.'));
    return;
  }

  reader.onerror = err => obs.error(err);
  reader.onabort = err => obs.error(err);
  reader.onload = () => obs.next(reader.result);
  reader.onloadend = () => obs.complete();

  return reader.readAsText(blob);
});

Then in your test code something like this. Not sure what you would want here but that would depend on your test suite.

class MockReader { /* ... */ }
const reader = new MockReader();
await readFile(someBlob, reader).toPromise();
expect(reader.readAsText).toHaveBeenCalled();

I think this should also call reader.abort() when the Observable is unsubscribed from.

here is a simple implementation of opening an image in browser using RxJS 7.1

<input type='file' id='file-input'>
<br>
<img src="" id='image-preview' width='200px'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.1.0/rxjs.umd.js"></script>
<script>
  const { fromEvent, Observable } = rxjs;
  const { flatMap } = rxjs.operators;
  
  var fileSelectStream = fromEvent(document.getElementById('file-input'), 'change');
  
  function createRxObservable(fileNameEvent){
    var file = fileNameEvent.target.files[0];
  
    const readFile_rx_observable = Observable.create(
      function(subscriber) {
        var reader = new FileReader();
        reader.onload = function(e) {
          file.content = e.target.result;
          subscriber.next(file);
        };
        reader.readAsDataURL(file);
      }
    );
    return readFile_rx_observable;
  }
  
  var fileReadStream = fileSelectStream
     .pipe(flatMap(createRxObservable));
  
  fileReadStream.subscribe((file)=>{
    document.getElementById('image-preview').src = file.content;
  });
</script>

a working fiddle is here: https://jsfiddle.net/MuazSamli/5urd9bcq/25/