Unable to open mobile camera in Ionic app - android

My objective is to upload multiple files either via camera or file storage, I'm using ng2FileSelect for uploading multiple files to the server via Ionic app, this is the HTML for it:
<input (change)="upload()" type="file" ng2FileSelect
[uploader]="uploader" multiple accept="image/*" capture="environment">
On running it on localhost on chrome, it is successfully giving options, either to open mobile camera or select files from storage. But on testing it on Ionic DevApp or on android device(via APK), it is directly opening file storage and not giving option of opening mobile camera. Is it possible to achieve the said objective with the above input tag, or I have to use a separate method for uploading files from the camera such as Cordova camera plugin, etc. ?

ng2FileSelect is specific for browsers it may create a problem on the native device. My suggestion is to use cordova camera plugin.
You can install the plugin via this commands
ionic cordova plugin add cordova-plugin-camera
npm install #ionic-native/camera
It Supports following platforms
Android
Browser
iOS
Windows
Usage
import { Camera, CameraOptions } from '#ionic-native/camera/ngx';
constructor(private camera: Camera) { }
...
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});

Related

Video not playing (stuck) in react-native-video

I am using react-native-cli and in my app react-native-video doesn't work.
While running on external device (android) it shows a blank space without error
On running on android simulator, the video screen appears with the first frame but the video is not playing (stuck)
The .mp4 file is stored in the project itself.
<Video
source={require('../../../storage/videos/video1.mp4')}
resizeMode="cover"
repeat={true}
paused={false}
style={{height: 400, width: 400, position: 'absolute'}}
/>
File Structure:
- src
-- components
-- screens
-- Video.js
-- storage
-- videos
-- video1.mp4
- App.js
Versions
React native : 0.70
React : 18.1
React native video: 5.2.1
Please add onError method to log the error.
const videoError = error => {
console.log('--videoError', error);
};
That might help you to get the exact problem.
If you are accessing file from outside of the app, you have to ask for request permission as well.
Please read the Doc

Unable to access android file system using Angular and Cordova

I have been trying to read files or write files in Android file system. My project is developed in AngularJS and converting it to APK using Cordova. When I install the app, it does not ask for file system permissions nor it is able to read or write files. It works in IDE but not in mobile. What can be the solution ?
You should call checkPermission and requestPermissions for WRITE_EXTERNAL_STORAGE and READ_EXTERNAL_STORAGE.
import { AndroidPermissions } from '#awesome-cordova-plugins/android-permissions/ngx';
constructor(private androidPermissions: AndroidPermissions) { }
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE).then(
result => console.log('Has permission?',result.hasPermission),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE)
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE, this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE]);
See https://github.com/NeoLSN/cordova-plugin-android-permissions

Cordova File Plugin: SECURITY_ERR

I have a hybrid app in production (iOS/Android) that uses Cordova plugins. I have one Android user who is getting a SECURITY_ERR when using the File plugin. This seems to be happening on a call to writeFile(). The file path I'm writing to for Android is externalRootDirectory.
Can anyone help me understand why 1 user (out of 300-400) would have this problem? The user is on Android 6.0.1 if that helps.
Some code is below. The error I'm getting is [Error creating file] – Error Msg: [SECURITY_ERR], so the .writeFile() catch is being hit in this case.
//Handle Native download
if (this.appConfig.isNative) {
this.loggingService.debug("Starting to create native file");
//Get base file path for android/ios
let filePath = (this.appConfig.isNativeAndroid) ? this.file.externalRootDirectory : this.file.cacheDirectory;
//Write the file
this.file.writeFile(filePath, fileName, data, { replace: true })
.then((fileEntry: FileEntry) => {
this.loggingService.debug("Created file: " + fileEntry.toURL());
//Open with File Opener plugin
this.fileOpener.open(fileEntry.toURL(), data.type)
.then(() => this.loggingService.debug('File is opened'))
.catch(e => this.loggingService.error('Error openening file', e));
})
.catch((err) => {
this.loggingService.error("Error creating file", err);
throw err; //Rethrow - will be caught by caller
});
}
I was able to figure this one out. Looks like after Android 6.0 certain permissions must be requested during use of the app (not just at install time). This is also alluded to in the Cordova File plugin docs, under Android Quirks.
Marshmallow requires the apps to ask for permissions when reading/writing to external locations. By default, your app has permission to write to cordova.file.applicationStorageDirectory and cordova.file.externalApplicationStorageDirectory, and the plugin doesn't request permission for these two directories unless external storage is not mounted. However due to a limitation, when external storage is not mounted, it would ask for permission to write to cordova.file.externalApplicationStorageDirectory.
So on Android 6.0+, when writing a file to disk the Cordova File plugin will display a prompt similar to:
Allow APP_NAME to access photos, media and files on your device?
If the user selects Deny to this request, then the Cordova file write will get this SECURITY_ERR, even if the app requests this permission at install time.

Ionic Cordova FileUpload error: Not allowed to load local resource

I am new to Ionic and I am trying to upload an image taken from camera that is stored in Android filesystem:
var ft = new FileTransfer();
console.log('Uploading: ' + fileURL);
ft.upload(fileURL,
encodeURI("http://192.168.192.62:3000/api/meals/picture"),
pictureUploaded,
function(error) {
console.err(error);
$ionicLoading.show({template: 'Ooops error uploading picture...'});
setTimeout(function(){$ionicLoading.hide();}, 3000);
},
options);
var pictureUploaded = function() {
console.log('uploaded!');
$ionicLoading.hide();
};
fileUrl is pointing to an existent image: file:///data/data/com.ionicframework.nutrilifemobile664547/files/Q2AtO1462636767466.jpg
In chrome://inspect/#devices console I get the following error and it looks like because of the error the FileOptions are also not properly sent, this is the error (Not allowed to load local resource):
Cordova version: 6.1.1
Ionic version: 1.7.14
This happens when you use the "livereload" option with Ionic.
Try running in normal mode
With ionic webview >3.x, you have to use convertFileSrc() method.
For example if you have a myURL local variable such as file:// or /storage.
let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);
Another possible reason is that you have a webview plugin installed (like https://github.com/ionic-team/cordova-plugin-ionic-webview or just https://github.com/apache/cordova-plugin-wkwebview-engine). Also this will not allow to use cdvfile:// protocol as well.
It might be too late but... you could convert native path to blob using File then convert blob to URL using URL.createObjectURL(blob) and passing/setting as src to your html element. This is unnecessary for production environment but you could use it for development with -lc. It might work
07-Dec-2018
This is the version where it works for me on Ionic 3.9.2 app.
Remove the latest version of webview and then:
i.e. ionic cordova plugin add cordova-plugin-ionic-webview#1.2.1
https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1
Note: This version works fine with normalizeURL() method.

PhoneGap open file in native app. Build via build.phonegap.com

At first:
YES, there are many solutions in StackOverflow, but non of them works in my case.
I got application built in SmartGWT.mobile
I attached config files and all needed files to this build to prepare it for PhoneGap
Application is build via build.phonegap.com site.
It works perfectly fine on Android 4.1.1
I want to:
Download file to local filesystem it is an PDF file - It is working fine using:
var fileTransfer = new FileTransfer();
fileTransfer.download(.....
Open PDF in native app (for eg. Adobe Reader) whichever is installed on android for PDFs - it is not working:
I tried:
(1)
cordova.exec("ChildBrowserCommand.showWebPage", encodeURI(theFile.toURL()) );
(2)
window.plugins.childBrowser.showWebPage(encodeURI(theFile.toURL()));
(3)
window.open(encodeURI(theFile.toURL()), '_blank', 'location=yes');
(4)
even HTML5 plugin for open PDFs by firefox
All variations with "file://" without with "./" at front and so on.
childBrowser shows only white screen, each time adds "http://" at front, window.open - the same.
I finally found something interesting like WebIntent, so i did:
window.plugins.webintent.startActivity({
action: window.plugins.webintent.ACTION_VIEW,
type: "application/pdf",
url: encodeURI(theFile.toURL().substring(7))},
function() {},
function() {alert('Failed to open URL via Android Intent')}
);
but its not working due to fact that phonegap-build not attaching class file and It can not find WebIntent Class
I declare this plugin using in config.xml:
<gap:plugin name="com.borismus.webintent.WebIntent" />
Do you know why it is not working, or what I'm doing worng ?
Maybe you know other way to open file just like that in native app, it suppose to be simple
I just want my app to download and show (in native app) the PDF for user.
don's FileOpener version have worked on my app cordova 3.0
phonegap local plugin add https://github.com/don/FileOpener
all the xmls, plugin, etc are then added automatically.
added fileopener.js on index.html
and then
window.plugins.fileOpener.open( path );
$("#page").on('pageshow', function(event, ui) {
if(event.handled !== true)
{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
event.handled = true;
}
return false;
});
function fail() {
console.log("failed to get filesystem");
}
function gotFS(fileSystem) {
console.log("got filesystem");
// save the file system for later access
console.log(fileSystem.root.fullPath);
window.rootFS = fileSystem.root;
downloadImage(url, fileName);
}
function downloadImage(url, fileName){
var ft = new FileTransfer();
ft.download(
url,
window.rootFS.fullPath + "/" + fileName,
function(entry) {
console.log("download complete: " + entry.fullPath);
},
function(error) {
console.log("download error" + error.code);
}
);
}

Categories

Resources