I am in need to implement a feature in my Ionic2 app where users can download a specific Video file into Ionic2 app.
Upon checking the Ionic Native section, I found that the following plugins available :
File
File Chooser
File Opener
File Path
But could not find anything such as 'cordova-plugin-file-transfer' where a specific method exists as DOWNLOAD.
What could be the way out ?
Please suggest.
You should use "Transfer" plugin for downloading a file in ionic2
You can install plugin by this command
ionic plugin add cordova-plugin-file-transfer
npm install --save #ionic-native/transfer
and then import it
import { Transfer, FileUploadOptions, TransferObject } from '#ionic-native/transfer';
set constructor
constructor(private transfer: Transfer, private file: File) { }
Then use this function to download file using url
download() {
const url = 'http://www.example.com/file.pdf';
fileTransfer.download(url, this.file.dataDirectory +
'file.pdf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
Hope it help you
You can also upload a file using this Plugin
You can use Transfer native plugin for that.
This plugin allows you to upload and download files.
Git Repo.
ionic plugin add cordova-plugin-file-transfer
npm install --save #ionic-native/transfer
First of all. transfer plugin that everyone is referring to here is deprecated. You should never use deprecated plugin if there's alternative.
Gladly, Ionic provides you alternative
Native Http plugin
HTTP service has uploadFile and downloadFile methods that you can use to hanlde uploading/downloading of files.
downloadFile method has 4 parameters: url, body, headers, filepath.
In most simple case calling of this method will be like this:
this.nativeHttp.downloadFile(urlWithFile, {}, {}, fileNameToSave)
It returns promise that resolves with FileEntry instance which you can use to read the from file system in future (if you need)
fileNameToSave you can get from File class. Basically, it can be this.file.tempDirectory + fileName or you can pick another directories from file like this.file.dataDirectory + fileName
Again, you should NEVER use deprecated plugins/packages. They are called deprecated for a reason
P.S. if you want then to open downloaded file you can do it with #ionic-native/file-opener plugin like this:
this.file.resolveLocalFilesystemUrl(fileEntry.toURL())
.then((entry: FileEntry) => {
entry.file(meta => {
this.fileOpener.open(fileEntry.toURL(), meta.type)
}, error => {});
})
you can simply download plugin using
ionic cordova plugin add cordova-plugin-file-transfer
It should be like below
Add imports
import { Transfer, TransferObject } from '#ionic-native/transfer';
Constructor
constructor(private transfer: Transfer) {
}
Create a instance of fileTransfer
const fileTransfer: TransferObject = this.transfer.create();
final code
fileTransfer.download("your URL", "you URLmime tyoe").then((entry) => {
}, (error) => {
// handle error
});
that's all.
Thanks
Related
I need to install downloaded .apk file from within the Expo app (it's for update functionality). This is my code:
import React from "react";
import { Button, View } from "react-native";
import * as FileSystem from "expo-file-system";
import { startActivityAsync } from "expo-intent-launcher";
export function Updater() {
async function updateApk() {
const uri = "https://expo.dev/artifacts/eas/my_apk_name.apk";
const localUri = FileSystem.documentDirectory + "test.apk";
try {
await FileSystem.downloadAsync(uri, localUri);
await startActivityAsync("android.intent.action.INSTALL_PACKAGE", {
data: localUri,
flags: 1,
});
} catch (error) {
alert(`Error during installing APK: ${error}`);
}
}
return (
<View>
<Button title="Reset APK" onPress={updateApk} />
</View>
);
}
It downloads the file, stores it, but then there is an error during startActivityAsync:
Encountered an exception while calling native method:
Exception occurred while executing exported method startActivity on module ExpoIntentLauncher:
file://data/user/0/com.my.app.id/files/test.apk exposed beyond app through Intent.getData()
I tried passing uri first to FileSystem.getContentUriAsync() but then there is no error, the intent result is 0 but nothing happens.
My permissions in app.json:
"permissions": [
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"CAMERA"
]
Do I need any additional permissions to get it to work? Or is it completely impossible with Expo? Maybe I should save the file to different location to be able to use this intent?
I also tried android.intent.action.VIEW with no luck.
I test it on Android 13, on physical device. App is built with EAS.
Maybe you can use this command to build release build.
expo:build android
For that you have to signup in Expo's website.
After that you can get apk in Expo's server.
I finally got it to work. The funny part is that I got the answer from the AI that is now banned here. But I just tested this solution on a real android device and it works. Anyway there are two changes needed:
REQUEST_INSTALL_PACKAGES must be added to app.json file.
Uri for intent must be a content uri so: localUri = await FileSystem.getContentUriAsync(localUri)
I am trying to use react-native-webview to download Android apk file. It could download apk file actually!
But How can I know when file is download success and get file path or automatically install the apk file I just download?
is there any good ideal to make it happen? very thanks
Once downloaded to your device path, you can try this with two modules.
You must have two modules installed and available. react-native-file-viewer and react-native-document-picker
Example
import FileViewer from 'react-native-file-viewer';
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
DocumentPicker.show({
filetype: [DocumentPickerUtil.allFiles()],
}, (error, res) => {
if(res) {
FileViewer.open(res.uri)
.then(() => {
// success
})
.catch(_err => {
// error
});
}
});
I'm building a react-native app that uses tensorflow to recognize images, I'm following the steps in this tutorial.
I did everything according to the explanations, including the part of "Fetching files". I created the assets folder and put the files in it (the path is correct).
But when I run this code:
const tfImageRecognition = new TfImageRecognition({
model: require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt'),
});
The app gives the following error:
I already tried to create a new project, I imported the react-native-tensorflow import { TfImageRecognition } from 'react-native-tensorflow';, I updated the cache, I deleted the folder node_modules and also I created the file "rn-cli.config.js" that is requested in the tutorial to give access to the files in the assets folder. Any idea how to fix this?
I'm using expo to run the app on mobile (android).
npm: 5.51
expo: 51.4.0
react-native: 0.54.0
react-native-cli: 2.0.1
This problem didn't occur with me. Try react-native start --reset-cache and then run the app again.
There is a better way to this.
import model from './assets/tensorflow_inception_graph.pb';
import labels from './assets/tensorflow_labels.txt';
const tfImageRecognition = new TfImageRecognition({
model,
labels
});
Restart your server.
I tried the same example as you mentioned I got accessed Image and Text.
I stored files inside assets in the same directory. Can you share code to produce an error that you faced?
async recognizeImage() {
try {
const tfImageRecognition = new TfImageRecognition({
model:require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt')
})
const results = await tfImageRecognition.recognize({
image: this.image
})
const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`
this.setState({result: resultText})
await tfImageRecognition.close()
} catch(err) {
alert(err)
}
}
As you mentioned your using expo then I'm assuming that run npm eject already. As react-native-tensorflow this library require native changes
You must add extensions in your rn-cli.config.js, in order to require tensorflow_inception_graph.pb and tensorflow_labels.txt
module.exports = {
getAssetExts() {
return ['pb', 'txt']
}
}
Replace ./ with so ../ , so final code will be -
model: require('../assets/tensorflow_inception_graph.pb'),
labels: require('../assets/tensorflow_labels.txt')
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />