Capacitor 3 and VueJS, open saved file (or download) - vue.js

I am struggling with something I thought will be simple.
Ideally I want to save my base64 file with prompt same as you get when downloading from browser, however that seems impossible with capacitor app.
So I used FileSystem, to save file on Documents directory, which went fine, I also can get uri file. But because there is no indicator that file was saved, I would like to at least try to open the file with native apps. I've noticed there is cordova plugin cordova-plugin-file-opener2 but I can't seem to make it work with capacitor 3 and VueJs, without cordova.
Maybe I am overthinking it ? is there any way download file or open file with Capacitor?
For web view (not native app) I am using hidden download button, but that does not work at all in capacitor app
here is my current code
Filesystem.writeFile({
data: pdf,
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(() => {
Filesystem.getUri({
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(res => {
// open file here with my res.uri ?
);
});

I had the exakt same problem. I solved/workarounded it by using the official capacitor "Share" plugin, so the user can choose what she wants to do with the file. https://capacitorjs.com/docs/apis/share
I did not find any other solution to show or download those privately stored files. FileOpener seems to have a lot of problems on Android and does not work either on iOS.

Related

Is it possible to download a file to the directory folder and then import it?

I have a problem and I can't solve it! My App in React-Native has a bunch of screens. One screen uses a JSON file that right now is inside a the App Project Folder:
import test from "../test.json"
I want to replace this because obviously if I want to change the JSON I need to change the file inside the App Project Folder. So I wanted to download the file and then import it the same way. I successfully downloaded the file in a temporary directory but I could not import it because it was not inside the App Project Folder.
I'm using a React-Native library called react-native-blob-util. One function of the library (ReactNativeBlobUtil.fs.dirs) tells me all the directories:
{"ApplicationSupportDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library/Application Support", "CacheDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library/Caches", "DCIMDir": undefined, "DocumentDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Documents", "DownloadDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Downloads", "LibraryDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library", "MainBundleDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Bundle/Application/C6148120-2378-44B7-BE2A-B4FFBDE6668D/TypeTest.app", "MovieDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Movies", "MusicDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Music", "PictureDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Pictures", "SDCardApplicationDir": undefined, "SDCardDir": undefined}
Is it possible to download the JSON inside the project folder or some other directory when the user logs and then import the file in another screen?
You can not import a file that you downloaded to the device storage in runtime. You need to read it from the file system to use that file.
But depending on your setup there are easier ways to do what you want to accomplish.
I'd recommend you save your json file content to your application state (like redux or any other state management solution) and update your state after fetching the new json. If you want to persist the updated state between launches, you can use redux-persist so you wouldn't have to worry about the content being up to date.

Bundle Files with Compose for Desktop

I am an Android developer, I have experience with Jetpack Compose. Now I am trying to build desktop apps, so I found this Compose for Desktop project. I want to store a JSON file with my desktop app so that I can read the file from my desktop app and show it to users.
In Android, I could use the raw or assets folders, but I don't know how to do that in Compose for Desktop.
If someone can point me in the right direction, I will appreciate it.
Edit
Not only JSON files, but I also want to store some other files like HTML, so I really need a way to store files within the application.
You can put any assets files inside src\jvmMain\resources access them using useResource.
for example to read json file as text:
useResource("data.json") { stream ->
val textJson = stream.bufferedReader().use { it.readText() }
}

Link to file that opens in browser

I'm trying to provide a link to a gpg file on a webpage. Irrespective of relative path or absolute (static asset), on clicking the link, the index page keeps re-appearing. I don't want to use js to read the contents of gpg and render that. Instead, I want the browser to handle opening of the file (either open or download). Not working with other file types as well.
I have tried adding webpack config for this particular file type (file-loader/url-loader). Using raw-loader I can read the contents of the file, but I don't need that. Tried adding the file as an import.
To reproduce, create new project with vue-cli. Add this to App.vue template: Link
Create vue.config.js:
chainWebpack: config => {
config.module
.test(/\.gpg$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
Kindly suggest a way to include links to file present on the same domain. I don't want the vue app to handle rendering of such files.

React Native + Expo : save pdf/word doc from url and use Linking to Open the file in a different app

I've been using the default create-react-native-app and would like to continue to do so as long as I can without ejecting.
The feature I need for the app is to download a file to the app cache using FileSystem.downloadAsync which stores the file to the local cache or temp directory. Next I need to share that file with any program that can open it. For example. if I download a word doc then open the word viewer, or if it's a pdf then open a pdf viewer.
Is it possible to open an app that can view those files and still use default create-react-native-app?
you can use this exaple is based in documentation:
https://snack.expo.io/BkT-AkAvm

Including more than one js file in cache.manifest?

I am working with sencha touch 2 in MVC format. I have created a cache.manifest file to bring my app offline.
CACHE MANIFEST
index.html
app.js
guide.css
app/model/Contact.js
app/model/Injury.js
app/view/IncidentForm.js
app/view/Home.js
app/view/DivisionSelect.js
app/view/InjuryResponse.js
app/view/EmergencyContact.js
app/controller/Core.js
i/amcor-app-bg#2.png
i/amcor-bg-logo#2.png
i/amcor-logo.png
i/amcor-tb-logo2x.png
i/arrow_right.png
i/ec-icon#2.png
i/home_icon.png
i/in-icon#2.png
i/ir-icon2x.png
i/ir-icon#2.png
i/ir-toolbar-bg2x.png
st2/builds/sencha-touch-all-compat.js
st2/resources/css/sencha-touch.css
NETWORK:
*
My issue is that the cache.manifest file does not seem to recognize any of my js files except for app.js. When I am working online it seems to cache properly but when I go offline the cache only returns index.html, app.js, and the sencha files. Can the cache.manifest file only have one .js file?
You should really try to use the tools SDK then you don't have to worry at all.
The Microloader helps keep things up to date.
Its a bit light on its error checking output and you must conform to the MVC app layout created by the SDK tools but once its running "it just works".
If the "compile" hangs its probably a missing ref.