I am building app that allows people to post pictures and videos, mainly trying to learn about ionic, cordova, android, and the like, but for some reason whenever I try to open a file using the cordova File plugin, it doesn't ask the user permission to access storage, and the code fails and the user is stuck on a loading screen.
The code is pretty simple, they take a video, it gets transcoded, then the transcoded file is uploaded to a firebase storage bucket. If I quit the app, go to settings->apps->my app->permissions and then manually turn on the storage permission, it works. The problem is, I need to ask the user for permission either at run time or on install, and it doesn't. Here is the code..
this.media.captureVideo().then(file => {
this.editor.transcodeVideo({
fileUri: file[0].fullPath,
outputFileType: this.editor.OutputFileType.MPEG4,
outputFileName: 'temp_test',
saveToLibrary: false,
height: 800,
width: 800,
maintainAspectRatio: false
}).then(fileUri => {
let pathIndex = fileUri.lastIndexOf('/'),
finalPath = 'file://' + fileUri.substr(0, pathIndex),
name = fileUri.substr(pathIndex + 1, fileUri.length);
this.file.readAsArrayBuffer(finalPath, name).then(file => {
//upload
}).catch(err => { console.log(err); });
});
});
However, this only works if I open up the settings on my phone, go to apps, then my app, then permissions, then enable storage manually. Is there some way to request the permission in ionic? I have searched and searched and all the answers I can find are specific to camera, or work in Java, but ionic isn't java. Thank you.
Effectively cordova-plugin-media-capture uses cordova-plugin-file, so the READ_EXTERNAL_STORAGE permission must be programatically asked.
Ionic offers native support for Android Permissions:
this.androidPermissions.hasPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
this.captureVideo();
} else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status =>{
if(status.hasPermission) this.captureVideo();
});
}
}
Hope it helps.
The only thing that worked for me was the Android Diagnostic plugin. Check this post.
Related
In my react native app which I ave published on the Google Play Store, I require Camera Roll permissions. This works during testing, but not in the published version of the app.
getPermissionAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
await this.setState({ permission: status === "granted" });
};
_pickMedia = async () => {
if (this.state.permission != true) {
await this.getPermissionAsync();
}
if (this.state.permission == true) {
// get image
}
};
In testing this works as expected, asking permission to access the camera roll every time the user tries to upload a picture till its given. However in production, the user is prompted once for permission to use the camera roll and whether or not they allow it, the alert box comes up and the user is unable to pick an image. If they try to add media again, they aren't prompted for permissions and it just alerts again.
As per the expo docs I have added READ_EXTERNAL_STORAGE to my permissions in app.json:
"android": {
"permissions": ["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
}
Could someone tell me why this doesn't work in production?
it is not working in production becasue you did not add CAMERA permission.so, add CAMERA permission
"android": {
"permissions": ["CAMERA","READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
}
I didn't realise that edits to parts of app.json aren't updated for a published app by expo publish and you need to run expo build instead. The issue was that I hadn't initially added WRITE_EXTERNAL_STORAGE to the permissions and when I did later I used expo publish to update the app. This meant the published version wasn't actually updated. After running expo build now and generating a new app bundle, permissions started working correctly.
please anyone help me to access device external memory(sd card) using Ionic-v4 and Angular 6 and platform is Android.
I have tried using Ionic native file, but it shows the path of Internal memory only.
// file system access
import { File } from '#ionic-native/file/ngx';
// file opener
import { FileOpener } from '#ionic-native/file-opener/ngx';
// document viewer
import { DocumentViewer, DocumentViewerOptions } from '#ionic-native/document-viewer/ngx';
............
let path = this.file.externalRootDirectory;
this.file.checkDir(path, 'mydir').then(_ => {
console.log('Directory exists');
this.showAlert('Directory exists','','Directory exists: '+path);
}).catch(err =>{
console.log('Directory doesnt exists');
this.showAlert('Directory doesnt exists','','Directory doesnt exists: '+path);
});
Then I tried getExternalSdCardDetails() method of cordova-diagnostic-plugin
import { Diagnostic } from '#ionic-native/diagnostic';
.........
this.diagnostic.getExternalSdCardDetails().then(obj => {
this.showAlert('xxxxxxxx','','xxxxxxxx: '+JSON.stringify(obj));
}, (errData)=>{
});
But it is not working.
I am new to Ionic, please anyone help to just read the external memory or sd-card in Ionic4 and angular6 for android platform.
Thank you.
I think you can use externalApplicationData in your app and move the app to an external SD card. Go to App Details > Storage. If the option to move to external is not available, enable developer options on the phone and "force enable apps to external card". Now, the app will have full access to its own sand-boxed data on external card, even though the Ionic file will still report something like "file://storage/emulated/0".
with file plugin you can use like that
await this.file.listDir(this.file.externalRootDirectory, '')
Or you can refer demo here in link that's a file manager app using ionic
https://github.com/JainBhavesh/FileManagerIonic4
Right now I am building an applications which uses multiple device features like location, camera, storage and contacts.
I want to know if there is any way that allows users to enter into my application if and only if all the permissions are granted.
I've tried using react-native-permissions and the code snippet is as follows
Permissions.request('photo').then(() => {
Permissions.request('location').then(() => {
Permissions.request('camera').then(() => {
Permissions.request('contacts').then(() => {
Permissions.request('notification').then(() => {
console.log('PERMISSIONS ASKED');
});
});
});
});
});
The above code works only at the first time and if the user clicks deny then it is not asking again. Can any one help me with this.
Thanks in advance
Yes, once a user denies a permission he won't be asked for the permission again(iOS). He have to go back to settings and manually update the permissions.
It is not a good practice to ask all the permissions at once, the right way to ask is to alert for the permission when user initiate the usage of services like (location, camera).
Any way if you would like to ask all the permissions at once then you can check if the permission is in denied state, if so you can show an alert to open settings and change the permission.
Permissions.check('location', { type: 'always' }).then(response => {
this.setState({ locationPermission: response })
})
I am developing a ionic mobile app in which i want to redirect to a thirdparty webflow which requests users' consent and redirects to the callback url which i should specific for me to grab the token as permission token to make further API calls. Since ionic itself is a html5 mobile app, what do i specify for the redirect url so the control comes back to my mobile app?
abstract:
This isn't exactly what you are asking for, but it works pretty well.
The Idea is that you use $cordovaInAppBrowser to open a webview and listen for events, namely
$cordovaInAppBrowser:loadstart
and
$cordovaInAppBrowser:loaderror
you can then look at the error and event arguments that are passed and use those to determine if you want to call
$cordovaInAppBrowser.close();
which will return you to your ionic app
code:
angular.module('myApp', ['ionic', 'ngCordova']).controller('AppCtrl', function($rootScope, $ionicPlatform, $cordovaInAppBrowser) {
$scope.openThirdPartyWhatever = function() {
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'no',
toolbar: 'yes'
};
$cordovaInAppBrowser.open('http://www.myAwesomeSite.com', '_blank', options)
});
};
//at some point your app tries to load 'http://localhost:8100/send-me-back-to-app'
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event) {
//and this function is called, so you do something like
if(event.url === 'http://localhost:8100/send-me-back-to-app'){
$cordovaInAppBrowser.close();
}
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event) {
$cordovaInAppBrowser.close();
alert('sorry, something went wrong');
});
});
helpful links:
https://www.genuitec.com/products/gapdebug/
http://ngcordova.com/docs/plugins/inAppBrowser/
It sounds that you will need to handle popup and redirects, you will need to install the cordova "inappbrowser" plugin in order to be able to open the thrid party webflow inside the app browser and then go back to normal.
Please take a look at this article in where they are explaining how to deal with facebook authentification using the firebase login methods with Ionic and cordova. It describes very similar steps that you will need to tackle your problem.
Firebase simple login with Ionic and Cordova
If you are in a rush start from "Getting It Working in the Emulator" but I recommend reading all the article quickly.
I am not sure which kind of third party webflow are you using, but maybe this could help you:
Zapier
I was looking for the same thing and found this plugin:
https://github.com/EddyVerbruggen/Custom-URL-scheme/blob/d1432ecfff63678a3155804839dda21607706e72/README.md
So i´m having a situation that someone might be able to help.
Im creating a Mobile APP using PhoneGap Build. I´m trying to use this http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/
Right know if I open the app inBrowser it will work. Ask's for permissions etc and fetch the user data correctly. Of course I defined a Valid oAuth: localhost/...html.
So it works for browser but doesnt work for mobile. Wich should be, if so, the valid url for the mobile? Cause since it's an APP iºm confused. I dont think it's necessary show code but if so just ask me.
Thanks ;)
You can still use openFB and it will work. you don't even need to change anything in the openfb.js file. all you have to do is manipulate the call method from the page where you want to call the facebook login window.
say for example you have the facebook call method in index.html
then add this script to that index.html page where the function "facebooklogin()" is called
<script>
openFB.init({ appId: 'your-app-id' });
function facebooklogin() {
openFB.login(function (response) {
if (response.status === 'connected') {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
openFB.api({
path: "/{your app version in facebook developer envi.}/me?",
params: { "access_token": accessToken, "?fields":"name,email,gender,user_birthday,locale,bio&access_token='"+accessToken+"'" },
success: function (response) {
var data = JSON.stringify(response);
// do whatever you want with the data for example
$(".data_div").html(data);
$(".data_email").html(data.email);
},
error: function(err){
alert(err);
}
});
}
else {
alert(“empty response returned”);
}
}
else {
alert(“not connected”);
}
},
{
scope: "public_profile,email,user_birthday"
});
}
</script>
very important! Please replace {your app version in facebook developer envi.} with your app version like v2.0 or v2.5
also don't forget to change 'your app id' to you facebook app id example 432046826485152
with openfb you don't need to crack your head over learning hoe to configure facebook login in other platforms. this will serve all platforms
I've got it working on the phone.
The weird thing is that a real URL is not necessary, just a semantic valid one. I've added a Facebook Canvas platform, on the facebook app page, and filled the platform form:
URL = http://localhost/www/
Secure Canvas URL = https://localhost/www/
Both of above domains doesn't exists. I haven't filled the "Valid OAuth redirect URIs" field in the advanced tab.
After that, I've written the following code in my app:
openFB.init("xyz!##123456789"
, "http://localhost/www/oauthcallback.html");
It seems that what matters is that Facebook Canvas's domains or sub domains matches the one on the openFB.init redirectURL param...
I'm using openFB version 0.1. I'm gonna test the earlier versions.
UPDATE
It just have worked because I was using phonegap serve and it makes openFB understand that my app is a website, because phonegap developer app is a browser wrapper, not a app wrapper. If I try to run it in a compiled app (phonegap local build), my code doesn't work. I think I'll have to use facebook-connect earlier than I thought...