Cordova iOS application directory and file url differs (UUID issue)

Question

I've created a Cordova application that fetches images from a server and saves them to an iPad. However, when trying to display the images in the application, the images will not load. One example of such a file path could be:

file:///var/mobile/Containers/data/Application/FC87E925-9753-4D9F-AE27-54FCF9B0451E/Documents/-media-3405-company.png

However, when inspecting the cordova.file.applicationDirectory variable, I find another path, e.g. (note that the UUID differ even though I'm inspecting both variables in the same run)

file:///var/containers/Bundle/Application/D8266D08-18A4-4293-B78A-B4597FC0C6B8/salesApp.app/

Accordingly to the documentation, the correct path "should" be: (however, that does not work either)

file:///var/mobile/Applications/UUID/Documents/-media-3405-company.png

Here is the code I use to load the images, which are correctly saved to the device

const downloadFile = (url, fileName, callback) => {
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, (fs) => {
          fs.root.getFile(fileName, {
            create: true,
            exclusive: false
          }, (fileEntry) => {
            const fileURL = fileEntry.toURL()
            const fileTransfer = new FileTransfer()
            fileTransfer.download(
              url,
              fileURL,
              (entry) => {
                const file = entry.toURL() // <--- HERE
                content.pushObject('Downloaded ' + entry + ' (' + fileName + ') ' + file)
                callback(file)
              },
              (error) => {
                content.pushObject('error ' + error.code + '(' + fileName + ')')
                if (error.code === FileTransferError.CONNECTION_ERR) {
                  downloadFile(url, fileName) // Try again
                } else {
                  decrement(url) // Ignore this file
                }
              }
            )
          }, (error) => {
            alert(2)
          })
      }, () => {
        alert(3)
      })
    }

Update: Inspecting the value for cordova.file.documentsDirectory, I found that it returns a path similar to: file:///var/mobile/Containers/Data/Application/{UUID}/Documents/.

Update: The following code will return two different UUIDs:

alert(cordova.file.applicationDirectory); // file:///var/containers/Bundle/Application/54E0F914-C45B-4B8F-9067-C13AF1967760/salesApp.app/
alert(cordova.file.documentsDirectory);   // file:///var/mobile/Containers/Data/Application/73806E90-90B4-488C-A68A-2715C3627489/Documents/

When inspecting the path for entry.toURL() i get the same UUIDs as the one returned in cordova.file.documentsDirectory.

Answer 1

When you claim that "images will not load", then you should provide the code used to load the images. The code you provided is to download the images and it works fine.

As you didn't provide the code used to load the images I have tried two things and both of them worked

1. Open the file on InAppBrowser. I installed the cordova-plugin-inappbrowser and opened the file like this window.open(file,'_blank');
2. Display the file on a img tag. I created a img tag in my index.html <img id="downloaded" src=""/> and on my callback I assign the file obtained to the src document.getElementById("downloaded").src = file;

Both of them worked.

So you should provide your code used to load the images because the problem might be there.

The path you are getting on the download is ok.

You are getting different UUIDs because the docs are outdated. Before Xcode 6/iOS8 the app sandbox had the Bundle container and the Data container inside the same folder (the one the docs mention with a common UUID), but since Xcode 6/iOS8 the app files (Bundle container) are in a path and the App data files are in another one (Data container).

But that shouldn't be a problem for you.

Answer that talks about the file structure changes