Develop Reference

Error while trying to access files in the app

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')

Ionic3-Cordova-UWP : Ionic Storage doesn’t work when app is running

I have a problem with Ionic storage in my Ionic App for Windows (UWP app). I already tested and deployed my app for Android without any trouble.
Now I would like to generate an UWP app.
The app I’m developing is a workshop’s dashboard. The indicators change every day and I need to save them from one day to another. To do this I usethe storage module of Ionic.
When launching the command
$ionic serve
the app responds exactly as it should in the web browser (Firefox). From one launch to another my data are still there.
When I use
$ionic cordova run windows
the installation and launch steps of my app work fine. Every function of my app runs fine, but the call to storage (get and set) doesn’t work : when I close, and then reopen it as an autonomous application, I loose all data every time. It is the same when I run the app from Visual Studio.
Moreover, I write some console.log in the result of the promise and none of them is written in the Javascript console. It is like Windows does not recognize the command.
I tried with Visual Studio 2015 Update 3 and Visual Studio 2017, the result is identical. I followed the recommendation of Ionic Doc and add the target platform windows10 in the config.xml.
Does anyone have an idea of what I’m doing wrong ? Is there an incompatibility between Windows and Ionic ?
Thanks for any help.
Config :
Windows 10 64-bits
Ionic CLI: 3.19.1
Cordova CLI : 8.0.0
Node : v6.11.2
Visual Studio Community 2017 (15.5.27130.2036)
Extract of my code maPage.ts :
import { Storage } from '#ionic/storage';
export class maPage {
constructor(public storage: Storage) {
this.downloadData();
}
ionViewWillLeave()
{
this.saveData();
}
TabData = {
id: 0,
label: '',
Tab1: [],
Tab2: [],
attri1 : 0,
attri2: false
}
Param = {
Objet1: {NbObj1: 7},
Objet2: {NbObj2: 5}
}
saveData()
{
var Data: object;
Data =
{
TData: this.TabData,
TParam: this.Param
}
this.storage.set('Data', Data).then(_=> {
console.log('Backup done!');
}, error => {
console.log('erreur : ', JSON.stringify(error))
});
}
downloadData()
{
this.storage.ready().then(()=>{
console.log('storage ready');
this.storage.get('Data').then((val) => {
this.TabData = val.TData;
this.Param = val.TParam;
console.log('Récupération terminée !');
}).catch(erreur => {
console.log('La variable Data est vide ou n\'existe pas!');
console.log('erreur : ', JSON.stringify(erreur));
}).catch(err => {
console.log('storage not ready');
console.log('err : ', JSON.stringify(err));
});
}
}

On Windows platform, console.log is not supported. To do that, you should install cordova-plugin-console, or need to use alert function.
Regarding storage, I am suggesting you could use localstorage or cordova-sqlite-storage.

Download file from server into Ionic2 App

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

How to use this SMS plugin in my ionic application?

I am trying to use this sms plugin - https://github.com/Ivanezko/Phonegap-SMS in my ionic android application. I am following the Readme documentation to install the plugin. In the second step author asked to do -
Require the plugin module
var smsplugin = cordova.require("info.asankan.phonegap.smsplugin.smsplugin");
What this statement means and where should I include this code to make use of this plugin?
I tried to do this in my controller file and its giving error cordova is not defined.
I tried debugging a little more in an emulator and the error given in the require statement is - module info.asankan.phonegap.smsplugin.smsplugin is not found.

First solution: 1. check that this plugin is wrapped by http://ngcordova.com/.
Second solution: 2. write wrapper = angular factory:
.factory('factoryname', ['$q', '$window','$state', function ($q,$window, $state) {
return {
function1: function () {
var q = $q.defer();
if (!$window.cordova) {
q.reject('Not supported without cordova.js');
} else {
secrettext.function1();
return q.promise;
},
3th solutions: add ['$window'] dependency to module you want use plugin. and use secrettext.function1();
*sectretext its clobbers from plugin xml
4 th solutions copy and paste this js code into you angular code on top of it and use function1();

Cordova Camera - Ionic

I've been looking up for a solution for up to almost 2 days.
I'm trying to use the ngCordova Camera plugin.
I'm using the ionic-yeoman framework with AngularJS.
What I did was:
bower install --save ngCordova.
Added ngCordova to my app.module.
Installed the cordova camera plugin:
cordova plugin add org.apache.cordova.camera.
My controller:
.controller('profileCtrl', function($scope, myService, $cordovaCamera)
{
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
// Success! Image data is here
}, function(err) {
// An error occured. Show a message to the user
});
}
myService.getFoo().then(function(data) {
//this will execute when the
//AJAX call completes.
$scope.items = data;
});
})
And I get this error:ReferenceError: Camera is not defined

If you are serving your app through browser, whatever you use of cordova regarding the usage of device, doesn't work. But, if you are having the problem even after serving your app in emulator or the device itself. Try the following steps.
Firstly, check the cordova plugin lists:
Go to project directory type: cordova plugin lists
see for cordova-plugin-media-capture, cordova-plugin-camera (if these are not in the list, you are simply missing your plugins).
Run the command
cordova plugin add cordova-plugin-media-capture and cordova plugin add cordova-plugin-camera
If the plugins are there and you are still having the issue of camera is not defined
cordova plugin rm cordova-plugin-camera
cordova plugin rm cordova-plugin-media-capture
ionic platform rm android
ionic platform add android
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
Following must be present in your index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

You should make sure you include the ng-cordova.js file (from the ngCordova/dist/folder) before the cordova.js file in your html.

make sure you include ngCordova in the controller declaration as well. becoz i had kept my controllers and app.js files seperately and had not included ngCordova in angular.module('xx.controllers', ['ionic','ngCordova']). once i did it my problem was solved and i coul runn the app in genymotion

Just figured this out by analyzing the Ionic Camera example project. You did all of the setup correctly, but you still need to inject it into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera. This really should be documented more explicitly.
Also, add this factory if you don't already have it:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])

just try ionic run browser instead ionic serve