0

Time to ask for help; spent too many days of attempting to solve this issue on my own. Any assistance is greatly appreciated.

I’m running react-reader in a web app and it loads epub files across browsers (including Safari) without any issues. But when the app runs on iOS via Cordova, it no longer loads the epub files. I’m assuming it might have to do with the way iOS/Cordova handles files, but I’m not an expert in these matters. I did try out different StackOverflow suggestions (this, this, this, and this), to no avail.

All epub files are located in a subfolder: www/epubs/

Here’s the react code that works on the web app, but not the Cordova app (simplified to the essentials):

import React from 'react'
import { EpubView } from 'react-reader'

export default ({ lang, name }) => (
  <EpubView
    url={'epubs/' + lang + '-' + name + '.epub'}
  />
)
Community
  • 1
  • 1
Martin Adams
  • 413
  • 4
  • 9

1 Answers1

0

Solved it! One trick that works is to fs.download each file from the www folder into Cordova’s persistent file system. See my original post.

First, in Terminal:

  1. npm install cordova-promise-fs
  2. cordova plugin add cordova-plugin-file --save
  3. cordova plugin add cordova-plugin-file-transfer --save

Then, in your front-end:

import CordovaPromiseFS from 'cordova-promise-fs'

const fs = CordovaPromiseFS({
  persistent: true,
  storageSize: 200 * 1024 * 1024,
  concurrency: 3
})

If you use React, the above has to be declared before the component Class is created, while the below code should be in its own function inside the component Class. See my GitHub comment for more details.

window.resolveLocalFileSystemURL(
  cordova.file.applicationDirectory + 'www/epubs/alice.epub',
    // If successful...
    (fileSystem) => {
      const downloadUrl = fileSystem.toURL()
      const localUrl = 'alice.epub' // the filename it is stored as in the device
      fs.download(
        downloadUrl,
        localUrl,
        (progressEvent) => {
          if (progressEvent.loaded && progressEvent.total) {
          console.log('progress', Math.round((progressEvent.loaded / progressEvent.total) * 100))
        }
      }
    ).then((filedata) => {
      return fs.toInternalURL(localUrl)
    })
    .then((localPath) => {
      this.setState({ epubPath: localPath })
    }).catch((error) => {
      console.log('some error happend', error)
    })
  },
  // If unsuccessful
  (err) => {
    console.log(err)
  }
)
Martin Adams
  • 413
  • 4
  • 9