Error: Expected file to be a File or Blob. Make sure you are correctly importing the node or web version of Bag.

[Kumar Ashutosh]

I am very new to all of this and this might be a very silly question, but I am getting below error when trying to load the example.bag file in fixtures or any type of bag file. I created an Angular CLI project and installed ROSBAG using npm install command.

App.Component.ts

import { Component, OnInit } from '@angular/core';
import {open} from 'rosbag'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'RosUtil';

  async readRosBagFile() {
    const bag = await open('.../example.bag')
    bag.readMessages({ topics: '/tf' }, msg => {
        console.log(JSON.stringify(msg.message, (key, val) => val === undefined ? null : val, 2));
    });
  }

  ngOnInit() {
    this.readRosBagFile()
  }
}

Error

core.js:15724 ERROR Error: Uncaught (in promise): Error: Expected file to be a File or Blob. Make sure you are correctly importing the node or web version of Bag.
Error: Expected file to be a File or Blob. Make sure you are correctly importing the node or web version of Bag.
    at open (index.js:4784)
    at AppComponent.<anonymous> (app.component.ts:13)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new ZoneAwarePromise (zone.js:910)
    at Module.__awaiter (tslib.es6.js:67)
    at AppComponent.push../src/app/app.component.ts.AppComponent.readRosBagFile (app.component.ts:12)
    at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:20)
    at checkAndUpdateDirectiveInline (core.js:22099)
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.es6.js:69)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

[JP Posma]

You cannot just read from the local filesystem in a browser. You need to pass in a File object, e.g. from a drop handler. await open(myFile)

[nikhilgupta2001]

@janpaul123
can you please explain more how should the path be passed