Viewing downloaded images with convertFileSrc

Capacitor
1

I’m trying to do literally exactly what is in the capacitor documentation.

I have a base64 encoded image which is saved. And, the url is generated just like the documentation states. However, that is not a working valid url:

image
image842×136 8.08 KB

If I go into logcat, I can see that it cannot open the asset url:
Capacitor: Unable to open asset URL: http://localhost/_capacitor_file_/DATA/test.png

I have tried all the different file locations. I have ensured the file is in fact saved, you can see the read being logged in the screenshot above.

Why am i unable to do the exact thing the documents show? Please help.

Thanks,
Rob

2

Thanks to jcesarmobile on github for figuring this out for me. I wish github had like a donate to user button. I fully acknowledge that i missed a line of code and it’s my mistake, however…

I don’t think using object destructuring to access plugins is good documentation. If that line of code is missed (which is what I did), it will break your app, but in a very subtle way with no specific warning or error message:

const { Filesystem } = Plugins;

Looks simple enough right, like why is that bad? And again I admit I missed it, but lets look at the example for convertFileSrc:

image
image951×416 44.1 KB

Notice file system is used directly, and you are not shown anywhere that it is accessed via the magic line of code: const { Filesystem } = Plugins;

So, if you type this in, here’s what happens:
autocomplete

Notice my code complete works fine, I even get intellisense on the methods, I have the real object, it’s all fine. However my code just broke on mobile. The autocomplete gets it from where it makes sense, where it’s exported, but this is the “web only” version. My code is now broken.

Since every IDE in the world is going to do this (right?), and since that key single line of code is what makes everything cross platform, and it’s not always included in the docs…maybe just put the word Plugins first in all the docs, and let the user do object destructuring if they want to. IF the docs had just said:

const savedPhotoFile = await Plugins.Filesystem.writeFile({

No autocomplete issue, no broken code, no “wrong” auto import. Seems much more clear, imo. And if that is a required thing to make the code cross platform, and IDEs are a thing that exists, maybe just use Plugins directly.

autocomplete-works

That code is now cross platform.

3

Apologies that our docs caused the confusion around usage. Here is the overview of using plugins, but of course I can see how if you just navigated to the reference page, that example isn’t complete.

The team is aware of the confusion around imports and destructing. For Capacitor v3 (in development), you’ll import and use the plugin directly - essentially what you’re asking for here.

2 Likes