I'm going to use the Ionic native Transfer plugin as shown below.
Problem is here this.file.dataDirectory.It shows error like [ts] Property 'dataDirectory' does not exist on type 'File'..Can you tell me what is the solution for this?
download() {
const fileTransfer: TransferObject = this.transfer.create();
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
});
}
Oh.. My bad :(
I have to install File plugin too :D
$ ionic cordova plugin add cordova-plugin-file --save
$ npm install --save #ionic-native/file
Related
I am building an app with Ionic 5, Capacitor 2 and Angular 11.
I need to capture video and audio using the media capture cordova plugin.
I installed the following modules:
npm install cordova-plugin-media-capture
npm install #ionic-native/media-capture
And added MediaCapture to the providers of my app module.
Then I call mediaCapture.captureVideo() to retrieve a video ; unfortunately an exception is thrown when testing on a browser: cordova_not_available
The github repo states this plugin is web-compatible, and its sources have a browser implementation. However the window.navigator.device.capture is missing to make this plugin work.
Is it a bad configuration from my side? Or this cordova plugin wouldn't be compatible with capacitor?
I made a repro : https://stackblitz.com/edit/ionic-v5-media-capture-capacitor?file=src/app/app.component.ts
Thank you for your help
I wrote a regular Angular version for the web, if anyone need it:
async browserCapture() {
const stream: MediaStream = await navigator.mediaDevices.getUserMedia(this.constraints);
const recorder = new MediaRecorder(stream, {mimeType: 'ogg'});
const chunks: Blob[] = [];
recorder.ondataavailable = (event: BlobEvent) => {
if (event.data && event.data.size > 0) {
chunks.push(event.data);
this.zone.run(() => {
this.recordChunks = [...chunks];
this.cd.markForCheck();
});
}
};
this.recorder.onstop = () => {
this.zone.run(() => {
stream.getTracks().forEach(t => t.stop());
if (chunks?.length) {
this.upload(new Blob(chunks, {type: 'ogg'})); // use the blob result
}
});
};
recorder.start(500);
}
For Ionic, I'm trying something with emails. So an user presses a button and goes to an email app to send an email with a set 'to', 'subject' and 'body'.
I followed the Ionic doc for EmailComposer : https://ionicframework.com/docs/native/email-composer
So I installed the plugin, followed the 'usage'.
import { EmailComposer } from '#ionic-native/email-composer/ngx';
constructor(private emailComposer: EmailComposer) { }
...
this.emailComposer.isAvailable().then((available: boolean) =>{
if(available) {
//Now we know we can send
}
});
let email = {
to: 'max#mustermann.de',
cc: 'erika#mustermann.de',
bcc: ['john#doe.com', 'jane#doe.com'],
// attachments: [],
subject: 'Cordova Icons',
body: 'How are you? Nice greetings from Leipzig',
isHtml: true
}
// Send a text message using default options
this.emailComposer.open(email);
Only when I press the button. I get error :
ERROR TypeError: Object(...) is not a function
at EmailComposer.open (index.js:58)
I don't know the reason for this. I tried this in a fresh ionic3 project, but I still got the same error.
EmailComposer from #ionic-native/email-composer/ngx is not supporting in Ionic 3. It is supporting in Ionic 4. You need to install EmailComposer from #ionic-native/email-composer which supports for Ionic 3.
Install EmailComposer using below command.
npm install --save #ionic-native/email-composer#4
The problem is you are telling the function what to do but aren't calling the function:
this.emailComposer.isAvailable().then((available: boolean) => {
if(available) {
//Now we know we can send
}
});
You have to name the function and after it, tell it what to do:
sendEmail() {
this.emailComposer.isAvailable().then((available: boolean) => {
if (available) {
}
});
let email = {
to: 'email#domain',
subject: '',
body: '',
isHtml: true
};
this.emailComposer.open(email);
}
I tryed to use tesseract.js in a node server so I can do some ocr on
some invoices. I did what the docs say regarding the
instalation but after I
tryed the sample code it's like everything is hanging and I don't get
any feedback in the console.
Here is what I did
Install
npm install --save tesseract.js
Code
Tesseract.recognize(buffer, {
lang: 'eng',
})
.progress(message => console.log('progress is: ', message))
.catch(err => {
console.error(`\r\n ERROD =>`, err, `\r\n`);
reject(err);
})
.then(result => {
console.log(`\r\n SUCCESS =>`, result, `\r\n`);
resolve(result);
})
.finally(resultOrError => {
console.log(`\r\n FINALLY =>`, resultOrError, `\r\n`);
});
I don't get any reponse and the console does not print anything. Do I
need to install also something else ? Note I thaught the tesseract
ocr needs to be installed so I tryed also to do this.
brew install tesseract
But still no response from the package, did anyone encounter this ?
Node version - 8.11.2
I've followed the following steps to create an app:
ionic start ionic-maps blank
cd ionic-maps
ionic setup sass
ionic io init
ionic platform add android
bower install ngCordova
Added the following lines to index.html:
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Changed app.js to include ngCordova:
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
Installed the geolocation plugin:
cordova plugin add cordova-plugin-geolocation
app.js:
.state('app.location', {
url: '/location',
views: {
'menuContent': {
templateUrl: 'templates/location.html',
controller: 'LocationCtrl'
}
}
})
location.html:
<ion-view view-title="Search">
<ion-content>
<h1>Location: {{location}}</h1>
</ion-content>
</ion-view>
controllers.js:
.controller('LocationCtrl', function($scope, $state, $cordovaGeolocation) {
$scope.location = 'Waiting';
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
console.log(lat, lng);
$scope.location = lat + ' ' + lng;
}, function(error) {
console.log('Could not get location: ', error);
$scope.location = 'Could not get location: ' + error + ' :: ' + JSON.stringify(error);
});
})
If I open the /location endpoint in my phone's browser (using ionic serve) I'm shown my current location correctly. So far everything works as expected.
/platforms/android/AndroidManifest.xml has the following lines in it:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
I'm building the app using the new cloud package builder using ionic package build android. ionic package list shows that the build was successful.
I expected that I'll be asked for location permission while installing the app from apk. But I'm only asked for full network access. On visiting the /locations screen I get an error [object PositionError. json.stringify(error) is {} and Object.keys(error).length is 0.
Using navigator.geolocation.getCurrentPosition instead of $cordovaGeolocation.getCurrentPosition doesn't help.
alert(error.code) is 2 and alert(error.message) is application does not have sufficient geolocation permisions.
PS: I've ensured that GPS is enabled and it works on other apps.
Run cordova plugin add cordova-plugin-geolocation with --save option i.e. cordova plugin add cordova-plugin-geolocation --save so that the plugin gets added to config.xml.
Alt: adding "cordova-plugin-geolocation" to "cordovaPlugins" in package.json also solves the issue but has been deprecated.
can any one please sort it out it gives error FileTransfer is not defined.
Below is my code
controller("ExampleController", function($scope, $cordovaFileTransfer) {
$scope.upload = function() {
var options = {
fileKey: "avatar",
fileName: "yedu.jpg",
chunkedMode: false,
mimeType: "image/jpg"
};
$cordovaFileTransfer.upload("http://192.168.1.109/uploads/upload", "/android_asset/www/img/yedu.jpg", options).then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function(err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
// constant progress updates
});
}
});
I think you getting error in browser . As per the official documentation of plugin this plugin is not supported to browser for more details go to here and here.
If you testing in browser then before installing app in device add the cordovaFileTransfer plugin to your project.
cordova plugin add org.apache.cordova.file-transfer
And for the full implementation of file upload and download with cordova you may go to here.