cordova-plugin-file
cordova-plugin-file copied to clipboard
@7.0.0 - GET http://<ip>/__cdvfile_temporary__/<file name> failed
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
- [X] I searched for existing GitHub issues
- [X] I updated all Cordova tooling to most recent version
- [X] I included all the necessary information above
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
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?
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();
}