I'm developing a App with Ionic 2 and I'm have problems with #ionic-native/Camera. I've this code on Upload.ts
let loader = this.loading.create({
content: 'Carregando video....'
});
loader.present().then(() => {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
mediaType: this.camera.MediaType.VIDEO,
}
this.camera.getPicture(options).then((videoData) => {
this.uploadForm.controls['file'].setValue(videoData)
loader.dismiss();
}, (err) => {
console.log(err);
});
});
This code works fine in Android, but when I run ionic cordova run ios -lc, the promise this.camera.getPicture(options) is never resolved, so the loader keep running forever.
Thanks in advance!
So, I found the problem. First thing is that native components bugs with -l (--livereload). I don't know how to explain why but I got this information from the Ionic Worldwide slack. A member from Ionic Team said:
"live-reload on a device can cause issues with plugins and file system".
So I used this video to understand how to debbug the APP using the iOS emulator and Safari.
https://www.youtube.com/watch?v=Aob749bkoLY
A little brief of the video: when using iOS emulator, you can access the menu Developer > Emulator > <App Name>. A new window with inspector tools will open and logs from the emulator will appear on this window.
I found out that's the video url was incorrect. Before, to be compatible with Android, I've this code responsible to find the video pointer in system and send to the server:
filePath = 'file:///' + this.uploadForm.controls['file'].value;
But, iOS File Picker already has a "file:///" prefix. So prefixing it again made it wrong. So I updated the code to be like this:
if (this.platform.is('android')) {
filePath = 'file:///' + this.uploadForm.controls['file'].value;
} else {
filePath = this.uploadForm.controls['file'].value;
}
This resolved the problem.
Related
In case you guys don't know, there was a problem previously with this library not rendering local images on Android as well, but apparently it was solved. Now, I'm facing the exact same issue on iOS, with a difference that I can use static images like assets/src/assets/images/logo.png. But when the images start with something like file:///, storage://, ph:// it simply does not get rendered.
What I'm doing is trying to generate a PDF report file, which must be generated independently the user has an internet connection or not. That is the reason why I have to use local images.
The static image is the logo of the company, and the local image which is not getting rendered is an image saved to the phone's storage through Image Picker or Camera Roll. The React Native Image component displays the image perfectly, so I don't think I'm using a wrong path.
What I have tried so far:
Removing the file:/// or storage:// or ph:// from the beginning of the path string;
In some cases, when I save an image to the phone's library with Camera Roll, it will return a path that starts with ph:// but without an extension, such as .jpg or .png. I tried to put the extension manually, and still does not make any difference;
I tried to convert the image to base64 using rn-fetch-blob (with RNFetchBlob.fs.base64.encode(path)), but still got no success.
Devices:
iPhone SE with iOS 14 (also simulator iPhone 11 with iOS 15)
MacBook Air 2017 Core i5 1.8GHz and 8gb RAM (macOS Big Sur 11.5.2)
Environment
node: 12.22.7
npm: 6.14.15
react: 16.9.0
react-native: 0.61.5
react-native-html-to-pdf: ^0.11.0 (updating it to 0.12.0 also got me the same result)
Code:
sharePDF = async () => {
try {
this.changeVisibilityOptions(false);
this.changeVisibilityLoading('Gerando PDF...');
let htmlTemplate = '';
htmlTemplate = await getPDFDespesa(this.state);
const pdfOptions = {
html: htmlTemplate,
fileName: 'RelatorioDespesas',
directory: 'Relatorios'
};
let pdfFile = await RNHTMLtoPDF.convert(pdfOptions);
this.changeVisibilityLoading(false);
const shareOptions = {
title: 'Compartilhar com:',
url: `file://${pdfFile.filePath}`,
type: 'application/pdf',
failOnCancel: false
};
const ShareResponse = await Share.open(shareOptions);
} catch (error) {
this.setState({ visibilityLoadingScreen: false });
console.log('Error =>', error);
}
}
Final thoughts:
Well, since the code is stored at a private repository, I can't show the whole thing here for ethical reasons. But I'm doing my best to give you as much details as possible.
The output the code produces an almost complete PDF, with the only point that I see broken image icons where the images were supposed to be. For Android it works perfectly now.
I think this might be an issue related to WebView, since react-native-html-to-pdf uses WebView to generate the PDF from HTML code. I reached this conclusion after another developer at my job was trying to create a screen with a preview of the PDF before it could be shared got the very same problem for both Android and iOS. The library he used was react-native-webview.
Update with solution
Alright guys, after a long time of research, me and a colleague got to a solution which may not be the best but does what we expected.
First of all, one thing that was discovered is that we have to divide the problem in two, because we actually had two problems.
Images from react-native-image-picker: After a long time trying to find the problem which was preventing the local images from getting rendered, I tried updating the library to version 4.7.3 (latest version at that day) and did a number of required changes to the code, as the version we were using was considerably aged. Well, it happened to work out for my surprise, even with the response uri's format not being changed;
Images from #react-native-community/cameraroll: This one was a bit more complicated. It took me some time to realize that the iOS' PHAsset was not supported in the WebView or react-native-html-to-pdf (which uses WebView in background). So, after some research, me and my colleague found a workaround that lead us to a relatively easy solution. Basically we used react-native-fs to copy the PHAsset media file to a temporary directory, which would return a uri that started with file:// and could be rendered by WebView. That's the code we used to do this:
export default function getImageNameFromUrl(imageUrl = "") {
if (imageUrl) {
const splittedImageUrl = imageUrl.split('/');
return splittedImageUrl.pop();
}
return null;
};
export default async function copyAssetsFileIOSAndReturnURI(remoteURL = '', localURI = '') {
try {
if (remoteURL && localURI) {
const imageName = getImageNameFromUrl(remoteURL);
const imgPath = await RNFS.copyAssetsFileIOS(localURI, RNFS.TemporaryDirectoryPath+imageName, 0, 0);
return imgPath;
}
return null;
} catch (err) {
console.log(err);
return null;
}
}
I am developing a hybrid app targeting iOS & Android. I had to implement a photo-uploader so I implemented it through ImagePicker & File Cordova Plugins. I tested it on Android and everything was okay.
The problem is when I test it for iOS I get the image URIs through ImagePicker but File throws the following error:
[error] - ERROR Error: Uncaught (in promise):
FileError: {"code":5,"message":"ENCODING_ERR"}
I have seen plenty of issues related to this error but all of them are related to Android while I have a problem with iOS. I understand that is a really complex issue so if anyone could give me any piece of advice, I would be grateful.
More details about the issue:
this.imagePicker
.getPictures({
maximumImagesCount: 1,
})
.then(async (result : string[]) => {
let file = 'file://' + result[0];
let path = file.substring(0, file.lastIndexOf("/") + 1);
this.image = await this.file.readAsDataURL(path, file): // Line which throws the exception
});
PS: I've tried adding 'file://' in all the ways I could imagine =)
Thanks in advance
Thanks both of you who helped, I fixed my problem through changing the outputType to 1 (base64 dataURL) instead of 0 (URI).
This is the code that fixed my bug.
this.imagePicker
.getPictures({
outputType: 1,
})
.catch((e) => alert(e))
.then(async (results: string[]) => {
this.image = "data:image/jpg;base64," + results[0]
}
});
A posible explanation for this is that ImagePicker is copying from the ios gallery directory to a ImagePicker's temporary directory, then File is trying to read those copied files but they must have been deleted by iOS File System.
After 2 days I'm driving myself nuts because I can't resolve this. My issue is as follows:
1.) I am trying to use javascript target an iOS device (regardless of browser being Chrome on apple, Safari, Firefox on apple etc...) to show a different DOM element verses non iOS browsers.
2. ) My iOS detection code is as follows, which I've seen in several other threads: // Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
3.) After running this check I am attempting the following in both Safari and Chrome on iOS "my way which I'm assuming is incorrect because it's not working lol!" :
if(!isIos()) {
setTimeout(function() {
console.log('showing non iOS banner prompt after delay');
}, 10000);
} else if (isIos()) {
setTimeout(function() {
console.log('showing iOS banner prompt after delay');
}, 10000);
}
4.) The proper log is shown through chrome dev tools on my windows laptop when selecting an iOS device (which I know is not an actual iOS enviroment), but no matter what i do, once loaded to the live site it ALWAYS shows the non Ios log on my iPad.
SOLVED (for iPAD)
After finding this post enter link description here i changed my detection method. I was testing on an iPAD (as this is the only Apple product i own because I'm not a fan) and after this correction my current issue was resolved. I hope this works on other devices as well but won't know until I borrow a freind's. Hope someone else finds this helpful.
||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent ) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
}
I am trying to download a file and save that file in iOS. I am using ionic-native-file plugin to achieve this. The file has been download but i could not find that file in the device.
filewrite = (): void => {
let transfer = this.fileTransfer.create();
let path = "";
let dir_name = 'Download';
let file_name = "Sample.pdf";
if (this.platform.is('ios')) {
this.platform.ready().then(() => {
path = this.file.documentsDirectory;
this.file.writeFile(path,file_name,this.pdfSrc).then((entry) => {
this.showAlert("download completed");
}, (error) => {
this.showAlert("Download Failed.");
}).catch(err=>{
this.showAlert("Download Failed catch.");
this.showAlert(err.message);
});
}
)
}
};
Download completed alert shows and the downloaded path is:
file:///var/mobile/Containers/Data/Application/6DE22F30-5806-4393-830A-14C8A1F320BE/Library/Cloud/Sample.pdf
But i could not find that location in the device. Then, i google and saw here.
cordova.file.documentsDirectory - Files private to the app, but that
are meaningful to other application (e.g. Office files). Note that for
OSX this is the user's ~/Documents directory. (iOS, OSX)
So, i can't see the file actually as it is private to the application. Then i saw in the same link:
So, i tried with the both preference in my config.xml but nothing happened.
Is there any approach to download the file iOS or to dropbox or anywhere else?
I've struggled to find the right directory to save to on different platforms with this cordova plugin too. I landed on using file.externalRootDirectory on Android, and file.cacheDirectory on iOS.
The right location likely depends on what you intend to do with the file. In my case I just needed it stored short-term so I can open it using the user's native PDF reader.
I'm building an IOS app in ionic that captures media (photo, video, audio) and ran into a quite confounding issue today. I'm using the following 3 methods (on MediaCapture):
captureImage()
captureVideo()
captureAudio()
The only one that doesn't work is captureImage() and I can't, for the life of me, figure out why. Side note: I was able to use camera.getPicture() but I'd like to use MediaCapture for all 3 media types (and it doesn't make sense why I can't).
Here are some details:
Environment
OS: Mac OS 10.12.6
Node: 9.0.0
ionic: 3.15.2
Cordova: 7.1.0
iOS: 11.1
I'm running the app on my device using ionic cordova run ios -l -c -s.
Sample code
Example Code (extracted Typescript)
private media: object = {
'image': 'captureImage',
'video': 'captureVideo',
'audio': 'captureAudio'
};
function captureMedia(media) {
console.log('capturing');
const options: CaptureImageOptions = {
limit: 1
};
this.mediaCapture[this.media[media]](options)
.then(
(data: MediaFile[]) => console.log(JSON.stringify(data)),
(err: CaptureError) => console.error(JSON.stringify(err))
);
}
captureMedia('image'); // CRASHES!!
captureMedia('audio'); // WORKS!
captureMedia('video'); // WORKS!
No output. No warnings. No console output. Just kaput!
I feel like I'm missing something here but I can't see what it is. Can anyone help?
So, I ended up attempting to run this on my device from Xcode and finally got a useful error message! It turns out, my config.xml was missing one property for privacy permissions.
This was the one that was missing:
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
<string>Allow photo library access.</string>
</edit-config>
Remember, you'll also need descriptions for the following (which I had):
NSCameraUsageDescription
NSMicrophoneUsageDescription
NSPhotoLibraryUsageDescription
Cheers!