futurepress/epubjs-rn

Access Locally stored files

Closed this issue · 3 comments

Hi,

I am creating a IOS app over the epubjs-rn. I want the app to show EPUb books stored locally. But it gives out error.
Can some one help if they were able to do that?

`constructor(props) {
super(props);
this.state = {
flow: "paginated", // paginated || scrolled-continuous
location: 6,
url: 'file:///Users/xyz/Downloads/shute-chequer-board.epub',
src: "",
origin: "",
title: "",
toc: [],
showBars: true,
showBottomBar:true,
showNav: false,
sliderDisabled: false,
};
this.streamer = new Streamer();

}

componentDidMount() {
this.root = this.props.root || "www/";
let filename = this.state.url.split('/').pop();
this.file = filename;
let path = RNFS.DocumentDirectoryPath + "/" + this.root;
let dest = path + this.file;
console.log(dest);
RNFS.mkdir(path, { NSURLIsExcludedFromBackupKey: true });

let added;
if (this.state.url.indexOf("file://") > -1) {
  // Copy file in release
  added =  RNFS.exists(dest).then((e) => {
    if (!e) {
      return RNFS.copyFile(this.state.url, dest);
    }
  });
} else {
  // Download for development
  let download = RNFS.downloadFile({
    fromUrl: this.state.url,
    toFile: dest
  });
  added = download.promise;
}
  
  added.then(()=> {
  this.streamer.start()
  .then((origin) => {
    this.setState({origin})
    console.log(this.state.origin+"/"+filename+"/");
    return this.streamer.get(this.state.origin+"/"+filename+"/");
  })
  .then((src) => {
    return this.setState({src});
  })
});

setTimeout(() => this.toggleBars(), 1000);

}`

@ssaigal Hello I have the same problem maybe you culd hep me?
Here is my code to open local file

  constructor(props) {
    super(props);
    this.state = {
      flow: "paginated", // paginated || scrolled-continuous
      location: 6,
      url: 'file:///books/romeo_and_juliet.epub',
      src: "",
      origin: "",
      title: "",
      toc: [],
      showBars: true,
      origin: "",
      showNav: false,
      sliderDisabled: true
    };

    this.streamer = new Streamer();
  }

  componentDidMount() {

    let filename = this.state.url.split('/').pop();
    console.log(filename);
    let dest = `${RNFS.DocumentDirectoryPath}/${filename}`;
    console.log(dest);
    RNFS.copyFileAssets(this.state.url, dest)
    .then(() => {
      console.log('copied')
    })
    .then(()=> {
      this.streamer.start()
      .then((origin) => {
        this.setState({origin})
        console.log(this.state.origin+"/"+filename+"/");
        return this.streamer.get(this.state.origin+"/"+filename+"/");
      })
      .then((src) => {
        return this.setState({src});
      })
    });

    setTimeout(() => this.toggleBars(), 1000);
  }

So the idea is to put epub file to android\app\src\main\assets\books\romeo_and_juliet.epub then copy it with RNFS.copyFileAssets(this.state.url, dest) to RNFS.DocumentDirectoryPath but I'm getting error Asset '/books/romeo_and_juliet.epub' could not be opened

I also tried to use different url like url: 'books/romeo_and_juliet.epub' but it shows different error - Error 404 - file not found

any solution?