I am using 'react-native-document-picker' library and using iphone 6 simulator.
I am getting an exception: 'Application initializing document picker is missing the iCloud entitlement', whenever I clicked on the button. how can I resolve this issue?
please suggest me any solution. thanks in advance.
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
export class EditInformation extends Component {
docPicker() {
DocumentPicker.show({
filetype: [DocumentPickerUtil.images()]
},(error, res) => {
});
}
render() {
return (
<View>
<Button onPress={() => this.docPicker()}>
<Text> Upload image </Text>
</Button>
</View>
)}
}
First of all, you need to have apple paid developer account and setup your own iCloud account with capabilities settings of Xcode.
I think you need to add this
import MobileCoreServices
at the top of the .m file
Related
I have googled and tried to follow the solutions posted but did not come to a solution.
Does anyone have an idea why
this.contacts.find(["name", "phoneNumbers"],
{multiple: true, hasPhoneNumber: true}).then(
(contacts) =>
{
this.contactList = contacts;
}
).catch(err => {
console.log('contacts error');
console.log(err);
});
is freezing my whole app? While the contacts are grabbed the gui does not respond anymore.
I am using : -
import { Contacts } from '#ionic-native/contacts/ngx';
but I could not solve the problem. I have about 2500 contacts on my iPhone. When using the code on simulator it is fine but simulator only has 6 contacts.
Log says 'Fetching in bulk 250 contacts!' plenty of time.
I'm really stuck and would be very happy if someone could give me a hint to solve this problem.
Best Regards
This plugins requires the following usage description:
NSContactsUsageDescription describes the reason that the app accesses the user's contacts.
To add this entry into the info.plist, you can use the edit-config tag in the config.xml like this:
<edit-config target="NSContactsUsageDescription" file="*-Info.plist" mode="merge">
<string>need contacts access to search friends</string>
</edit-config>
Try to read only the data do you need. In desiredFields you can specify this camps. For example: Obtain only "name" and "phoneNumbers" of all information about each contact.
this.contacts.find(["name", "phoneNumbers"],
{multiple: true, hasPhoneNumber: true}, desiredFields: ['name','phoneNumbers']).then(
(contacts) =>
{
this.contactList = contacts;
}
).catch(err => {
console.log('contacts error');
console.log(err);
});
When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = url;
}, (err) => {
console.log(err);
});
Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).
The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.
In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).
To solve this issue, you will need to use convertFileSrc():
import {WebView} from '#ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = this.webview.convertFileSrc(url);
}, (err) => {
console.log(err);
});
Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.
See WKWebView - Ionic Docs for more information.
In my case, the following code works with me
const downloadFileURL = 'file:///...';
// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
In case some gots here looking for the answer on ionic4, check this out
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
and look for the answer from #Alok Singh that's how I got it working on ionic4 and even works with livereload
UPDATE december 2021:
You have to install the new Ionic Webview
RUN:
ionic cordova plugin add cordova-plugin-ionic-webview
npm install #awesome-cordova-plugins/ionic-webview
Import it in app.module and your page where you wanna use it:
import { WebView } from '#awesome-cordova-plugins/ionic-webview/ngx';
image = "";
constructor(private webview: WebView){}
Then this will work:
this.camera.getPicture(options).then((imageData) => {
this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
// Handle error
});
And show it in the HTML page:
<img [src]="image" alt="">
My requirement is to access the mobile camera in iOS and android using the mobile browser.
Using Ionic PWA app can I access mobile camera in iOS and android device browsers? Looking for PWA solution using Cordova (not native solution).
While working on a PWA. I came across the need to access a mobile device's camera/images.(a native app was out of the question). After doing some research I came across this little nugget.
<input type="file" accept="image/*" capture="camera" />
By adding the accept and capture attributes I was able to access my phone's camera and images. I should also point out that you don't need to do anything special with your Server side (Node or PHP). It acts just like a standard file upload input in a browser.
You can open video devices in the web browser...
<video id="cameraPlayer"></video>
// find the video devices (font/back cameras etc)
navigator.mediaDevices.enumerateDevices().then(function (devices) {
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
devices.forEach(function (device) {
if (device.kind === 'videoinput') {
cameraDeviceIds.push(device.deviceId)
}
})
})
// attach camera output to video tag
navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: cameraDeviceIds[currentCameraIndex] } }
}).then(function (stream) {
document.getElementById("cameraPlayer").srcObject = stream
})
If you just want an image you can use an input
<input type="file" accept="image/*" id="inputPhoto" class="hidden" capture="environment" />
// trigger capture
document.getElementById('inputPhoto').click()
// event handler for change
function onInputPhotoChange() {
if (document.getElementById('inputPhoto').files.length === 0) {
return
}
var reader = new window.FileReader()
reader.onloadend = function (event) {
event.target.result
// image data
// note you may need to rotate using EXIF data on a canvas
}
// Read the file into memory as dataurl
var blob = document.getElementById('inputPhoto').files[0]
reader.readAsDataURL(blob)
}
If you want to use the camera in an Ionic PWA app, you can use Capacitor:
https://capacitor.ionicframework.com/docs/apis/camera
I implemented the camera feature and it works 100%:
In addition to the above answers, you will have to add this in your index.html file, for the camera to work on PWA
<script nomodule="" src="https://unpkg.com/#ionic/pwa-elements#1.3.0/dist/ionicpwaelements/ionicpwaelements.js"></script>
The solution given above only make selection of file resticted to i
mages category only. But we want to access camera or audio device here
of browser.
So, to rescue this challege here come api from browser("browsers are
powerfull now yeah").
getUserMedia(:true/false)
Here <media_type> is type of media you want to access like
audio,video
You can set it as {audio: true/false} and {video:true/false}.
But error "NotFoundError" will be returned if media not found.
Here is eg; :>
if('mediaDevices' in navigator && 'getUserMedia' in
navigator.mediaDevices){ const stream = await
navigator.mediaDevices.getUserMedia({video: true}) }
It will run on Android and Ios platform with PWA and on a browser
home.page.ts file
import { Component } from '#angular/core';
import { Plugins, CameraResultType, Capacitor, FilesystemDirectory,
CameraPhoto, CameraSource } from '#capacitor/core';
const { Camera, Filesystem, Storage } = Plugins;
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
async capturedImage(){
const image = await Camera.getPhoto({
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera,
quality: 90
});
console.log('image',image)
}
}
home.page.html
<ion-button expand="full" (click)="capturedImage()"> Captured Image</ion-button>
Accessing the camera via Cordova (and more specifically ionic since you tagged the ionic-framework in your question) is a matter of installing the plugin, whether you're using ionic or not. There are several camera plugins but the one recommended by ionic can be found here:
https://github.com/apache/cordova-plugin-camera
For example to add the plugin to your ionic project, simply run:
ionic Cordova plugin add cordova-plugin-camera
You would use it like this in your component's .ts file (for example):
import { Camera, CameraOptions } from '#ionic-native/camera';
constructor(private camera: Camera) { }
...
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
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:
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
The above implementation was taken from here, where more details can also be found:
https://ionicframework.com/docs/native/camera/
I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
Whats the best way to hide the tabs?
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
Nothing seems to work.
Any idea of how should I hide the tabs??
Thank you in advance!!
You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save #ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) Add the plugin to your app.modules.ts
3) Add the desired eventlister withiin the device-ready event in your app.component.ts:
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.keyboard.onKeyboardShow().subscribe(() => {
document.body.classList.add('keyboard-is-open');
});
this.keyboard.onKeyboardHide().subscribe(() => {
document.body.classList.remove('keyboard-is-open');
});
})
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) Add the class to the desired element, eg an footer, div or sth else:
<ion-footer class="hideElementOnKeyboardShown">
<button round ion-button (click)="onLogin()" block>
<ion-icon name="logo-facebook" padding></ion-icon>
Login
</button>
</ion-footer>
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
have a nice day!
just add the following lines to your config.xml..
<platform name="android">
<preference name="android-
manifest/application/activity/#android:windowSoftInputMode"
value="adjustPan" />
....
</platform>
What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behaviour for your app.
You can achieve that by writing a directive that subscribes to the Keyboard events and then adds(hide)/removes(show) a css property/class (display: none) to the tabs element once the keyboard is shown/hidden.
#Directive({
selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
private static CSS_CLASS_NAME = 'hide-tab-bar';
private show: Subscription;
private hide: Subscription;
constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
platform.ready().then(() => {
this.show = keyboard.onKeyboardShow().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
);
this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
);
});
}
ngOnDestroy(): void {
if (this.hide !== undefined) {
this.hide.unsubscribe();
}
if (this.show !== undefined) {
this.show.unsubscribe();
}
}
}
add css class in app.scss (for example):
.hide-tabs {
display: none;
}
on your tabs element <ion-tabs hideTabs> </ion-tabs>
**code added for proof of concept
What is the method for redirecting the user to a completely external URL in Angular 2. For example, if I need to redirect the user to an OAuth2 server in order to authenticate, how would I do that?
Location.go(), Router.navigate(), and Router.navigateByUrl() are fine for sending the user to another section (route) within the Angular 2 app, but I can't see how they could be used to redirect to an external site?
You can use this-> window.location.href = '...';
This would change the page to whatever you want..
An Angular approach to the methods previously described is to import DOCUMENT from #angular/common (or #angular/platform-browser in Angular
< 4) and use
document.location.href = 'https://stackoverflow.com';
inside a function.
some-page.component.ts
import { DOCUMENT } from '#angular/common';
...
constructor(#Inject(DOCUMENT) private document: Document) { }
goToUrl(): void {
this.document.location.href = 'https://stackoverflow.com';
}
some-page.component.html
<button type="button" (click)="goToUrl()">Click me!</button>
Check out the platformBrowser repo for more info.
The solution, as Dennis Smolek said, is dead simple. Set window.location.href to the URL you want to switch to and it just works.
For example, if you had this method in your component's class file (controller):
goCNN() {
window.location.href='http://www.cnn.com/';
}
Then you could call it quite simply with the appropriate (click) call on a button (or whatever) in your template:
<button (click)="goCNN()">Go to CNN</button>
I think you need à target="_blank", so then you can use window.open :
gotoGoogle() : void {
window.open("https://www.google.com", "_blank");
}
If you've been using the OnDestry lifecycle hook, you might be interested in using something like this before calling window.location.href=...
this.router.ngOnDestroy();
window.location.href = 'http://www.cnn.com/';
that will trigger the OnDestry callback in your component that you might like.
Ohh, and also:
import { Router } from '#angular/router';
is where you find the router.
---EDIT---
Sadly, I might have been wrong in the example above. At least it's not working as exepected in my production code right now - so, until I have time to investigate further, I solve it like this (since my app really need the hook when possible)
this.router.navigate(["/"]).then(result=>{window.location.href = 'http://www.cnn.com/';});
Basically routing to any (dummy) route to force the hook, and then navigate as requested.
in newer versions of Angular with window as an any
(window as any).open(someUrl, "_blank");
There are 2 options:
if you want to redirect in same window/tab
gotoExternalDomain(){
window.location.href='http://google.com/'
}
if you want to redirect in new tab
gotoExternalDomain(){
(window as any).open("http://google.com/", "_blank");
}
After ripping my head off, the solution is just to add http:// to href.
Go somewhere
I used window.location.href='http://external-url';
For me the the redirects worked in Chrome, but didn't work in Firefox.
The following code resolved my problem:
window.location.assign('http://external-url');
I did it using Angular 2 Location since I didn't want to manipulate the global window object myself.
https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor
It can be done like this:
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({selector: 'app-component'})
class AppCmp {
constructor(location: Location) {
location.go('/foo');
}
}
You can redirect with multiple ways:
like
window.location.href = 'redirect_url';
another way Angular document:
import document from angular and the document must be inject as well as bellow otherwise you will get error
import { DOCUMENT } from '#angular/common';
export class AppComponent {
constructor(
#Inject(DOCUMENT) private document: Document
) {}
this.document.location.href = 'redirect_url';
}
None of the above solutions worked for me, I just added
window.location.href = "www.google.com"
event.preventDefault();
This worked for me.
Or try using
window.location.replace("www.google.com");
To use #Inject, you must import it. I didn't see this in any of the answers.
TS file:
import { Component, Inject } from '#angular/core';
import { DOCUMENT } from '#angular/common';
#Component({
selector: 'app-my-comp.page',
templateUrl: './my-comp.page.component.html',
styleUrls: ['./my-comp.page.component.scss']
})
export class MyCompPageComponent {
constructor(
#Inject(DOCUMENT) private document: Document
) { }
goToUrl(): void {
this.document.location.href = 'https://google.com/';
}
}
HTML file:
<button type="button" (click)="goToUrl()">Google</button>
In your component.ts
import { Component } from '#angular/core';
#Component({
...
})
export class AppComponent {
...
goToSpecificUrl(url): void {
window.location.href=url;
}
gotoGoogle() : void {
window.location.href='https://www.google.com';
}
}
In your component.html
<button type="button" (click)="goToSpecificUrl('http://stackoverflow.com/')">Open URL</button>
<button type="button" (click)="gotoGoogle()">Open Google</button>
<li *ngFor="item of itemList" (click)="goToSpecificUrl(item.link)"> // (click) don't enable pointer when we hover so we should enable it by using css like: **cursor: pointer;**
Just simple as this
window.location.href='http://www.google.com/';