How to download a file in iOS (Ionic 2/3)? - ios

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.

Related

how i can crate folder with custom name in iphone using fluttter

I want to create folder in iPhone mobile (on my phone storage) using flutter,
i complete it in androids mobile but in iOS mobile i cant do it.
when i try to get the using getApplicationSupportDirectory() its return my mac storage path not the simulator storage path
if (!isTemporaryStorage) {
if (Platform.isIOS) {
var iosPath= await getApplicationSupportDirectory();
path = File('${iosPath.path}/Majd_Eng_folder/$fileName');
} else {
path = File('/storage/emulated/0/Majd_Eng_folder/$fileName');
}
Change the getApplicationSupportDirectory to getApplicationDocumentsDirectory for iOS. If you want to hide data's then try getLibraryDirectory
Note: Don't forgot to add permissions in info.plist

React Native HTML to PDF not displaying local images

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;
}
}

Ionic 2 Camera select Video on iOS not working

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.

How to move/copy a file from one one location to the other using phonegap

I am using the Phonegap File API but am having trouble copying a file from one location to the other.
my targeted device is iOS(ipad)
my iOS version is 9.2.1
I am working on windows platform
I am using phonegap build
my requirement :
I am capturing a video and its getting saved in some temp folder by default here is the location where its getting saved (/private/var/mobile/Containers/Data/Application/2183897E-3660-4145-A822-76F5B763E48D/tmp/capture-T0x17e7cae0.tmp.avqBi2/capturedvideo.MOV)
So I just want to move this (capturedvideo.MOV) video to photo album location in my ipad
This is my code which i am trying to make it work.
function success(entry) {
console.log("New Path: " + entry.fullPath);
}
function fail(error) {
alert(error.code);
}
function moveDir(entry) {
var parent = document.getElementById('parent').value,
parentName = parent.substring(parent.lastIndexOf('/')+1),
newName = document.getElementById('newName').value,
parentEntry = new DirectoryEntry(parentName, parent);
// move the directory to a new directory and rename it
entry.moveTo(saveToPhotoAlbum, newName, success, fail);
}
Any help or working examples would be great.
Thanks
Nik`
This is simply not possible on iOS, because Apple does not allow to move videos, images or any other files out of the app sandbox to other folders. The reason that the standard-camera on the iPad/iPhone is able to place pictures there is simply because this is a built-in feature that has special permissions which your third-party app will not be able to get.
This is of course only true as long as the device is not jailbroken.
For more infos, especially concerning the file-system layout and what you are allowed to store, you should take a look at the cordova-file-plugin Readme on Github:https://github.com/apache/cordova-plugin-file

save image/video to gallery in IOS using cordova flle transfer

I am downloading images/videos from an application created by me in Cordova iOS. I want to access the downloaded files from other applications too, like WhatsApp, Instagram, Telegram etc.
I am able to download files, but am unable to view them in gallery or videos, unable to access filesystem root path in iOS.
Do we have any plugins in Cordova for iOS for moving files from documents directory to camera roll? if not, can you guide me how to achieve it by following the native C process as I am new to C.
Here is my sample code which is working in iOS.
var url = encodeURI("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"); // image url
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
//cordova.file.documentsDirectory
//cordova.file.dataDirectory
//fs.root.fullPath
//rootdir.toURL();
//fileSystem.root
alert("the root is" + cordova.file.documentsDirectory)
var imagePath = cordova.file.documentsDirectory + "/big_buck_bunny.mp4";
alert(imagePath);
var fileTransfer = new FileTransfer();
fileTransfer.download(url, imagePath, function(entry, imagePath) {
alert(imagePath);
console.log(imagePath);
alert(entry.fullPath); // entry is fileEntry object
// download();
downloadFile();
}, function(error) {
alert("Some error");
});
})
It's not possible with the cordova-plugin-filetransfer. You may want to check https://github.com/driftyco/cordova-camera-roll to save a base 64 encoded image to the camera roll. There's a fork for working with videos, but encoding a big video in base 64 is probably not very efficient.

Resources