RxJS: How can I event.preventDefault() a drop event?

Question

My markup:

<section id="drop-target">
  Drop file here...
</section>

My code:

var dropTarget = document.getElementById('drop-target');

Rx.Observable.fromEvent(dropTarget, 'dragover').subscribe(function(event) {
  event.preventDefault();
});

var dropStream = Rx.Observable.fromEvent(dropTarget, 'drop');

dropStream.subscribe(function(event) {
  console.log('This will be called.');
  event.preventDefault();
});

dropStream.map(function(event) {
  console.log('This will not be called.');
  return event.dataTransfer.files[0].path;
});

Any ideas how my last map callback can be called? I need both preventDefault s for drop and dragover to prevent the browser from opening the file.

Answer 1

You just need to subscribe to your map stream. All map does is create a new observable that will run the map operation on the stream. But you still need to subscribe to make it do something:

dropStream
    .map(function (event) {
        console.log("hello");
        return event.dataTransfer.files[0].path;
    })
    .subscribe(function (path) {
        console.log("path=" + path);
    });