@7.0.0 - GET http://<ip>/__cdvfile_temporary__/<file name> failed

[realtebo]

Bug Report

Problem

I'm using fileEntry.toLocalURL() to find where is placed a downloaded image, so I can show it to the user.

I'm using this path as img src.

What is expected to happen?

Image is loaded from device as showed to the user

What does actually happen?

I got a 404

Information

The nativeUrl of the file is file:///data/user/0/it.realtebo.offline/cache/0.jpg

I verified with adb shell that file exists and is readable from my app

The .toInternaURL() and the .toURL() gives me same path: http://192.168.56.1:9400/__cdvfile_temporary__/0.jpg

Command or Code

Having already a fs which is a DirectoryEntry obtained as

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {

}

And having image as an object containing a imageUrl to download, I use this code to save the file to storage

This portion works well. I have files succesfully saved said before.

  let imageUrl = image.download_url;

  const {
    data: imageData,
    error: imageError,
    statusCode: imageStatusCode,
  } = await useFetch(imageUrl).get().blob();

  if (imageStatusCode.value == 404) {
    return;
  }

  if (imageError.value) {
    return;
  }


  fs.root.getFile(
    path,
    { create: true },
    function (newFileEntry) {

      newFileEntry.createWriter(function (newFileWriter) {

        newFileWriter.write(imageData.value);
        //  At this point i have the file on the storage
      });
    }
  );

Environment, Platform, Device

I am on Android 11, on an Emulated Pixel Phone

Version information

cordova version: 11.'

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[lovelyelfpop]

I suppose you are loading a html from http://192.168.56.1:9400/
http://192.168.56.1:9400/__cdvfile_temporary__/0.jpg will not be intercepted by WebViewAssetLoader, you should replace the origin with localhost (https://localhost/__cdvfile_temporary__/0.jpg), then the <img> node will display the image

[jthrilly]

This worked for me, when I came across the same issue.

I load HTML from a specific IP address on a specific port when I am doing development, to get a hotreload environment.

Before I write a check for this that does a string replace, is there a better way of handling this use case? Could toURL() not always return http://localhost, since this is always required by WebViewAssetLoader (which seems to be the only use-case for toURL() anyway...). Thoughts?

[jthrilly]

In case it is useful to anyone, a neat (and quick) way of replacing the required parameters without needing to faff with a regex is:

const fileURL = await resolveLocalFilesystemURL(fileEntry);

if (process.env.NODE_ENV === 'development') { // Whatever runtime env detection you need
  const url = new URL(fileURL);
  url.host = 'localhost';
  url.port = '';
  return url.toString();
}