Download image not working on IOS device - React Native - ios

I implemented functionality for download image in React Native using RNFetchBlob Its Working fine with android but on IOS device it's not working.
Following is my react native code for download functionality.
downloadImg = (url) => {
var that = this;
async function requestCameraPermission() {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Test App',
message: 'Test App needs access to your gallery ',
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
that.actualDownload(url);
} else {
Alert.alert('Permission Denied!', 'You need to give storage permission to download the file');
}
}
if (Platform.OS === 'android') {
requestCameraPermission();
} else {
this.actualDownload(url);
}
}
actualDownload = (url) => {
var date = new Date();
var image_URL = url;
var ext = this.getExtention(image_URL);
ext = "." + ext[0];
const { config, fs } = RNFetchBlob;
let PictureDir = Platform.OS === 'ios' ? fs.dirs.DocumentDir : fs.dirs.PictureDir;
let options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: PictureDir + "/Images/image_" + Math.floor(date.getTime()
+ date.getSeconds() / 2) + ext,
description: 'Image'
}
}
config(options).fetch('GET', image_URL).then((res) => {
console.log("Thank you","Image Downloaded Successfully.");
});
}

the addAndroidDownloads only works for android. when you use the addAndroidDownloads the path in config is not useless. but for ios, the path has to be added.
try the following code, and you can add progress for ios.
actualDownload = (url) => {
var date = new Date();
var image_URL = url;
var ext = this.getExtention(image_URL);
ext = "." + ext[0];
const { config, fs } = RNFetchBlob;
let PictureDir = Platform.OS === 'ios' ? fs.dirs.DocumentDir : fs.dirs.PictureDir;
let options = {
fileCache: true,
path: PictureDir + "/Images/image_" + Math.floor(date.getTime() // add it
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: PictureDir + "/Images/image_" + Math.floor(date.getTime()
+ date.getSeconds() / 2) + ext,
description: 'Image'
}
}
config(options).fetch('GET', image_URL).then((res) => {
console.log("Thank you","Image Downloaded Successfully.");
});
}
here are the document says:
When using DownloadManager, fileCache and path properties in config will not take effect, because Android DownloadManager can only store files to external storage, also notice that Download Manager can only support GET method, which means the request body will be ignored.

That method works for ios as well. The notification doesn't come. If you want to check that it is downloaded or not, you can check it by logging the path in terminal(Mac) or cmd(Windows) and access it through the terminal itself.
It might not be visible in finder(Mac) or file explorer(Windows).
You can follow the path that you log from the function in this way:
cd ~/Library/Developer/CoreSimulator/Devices...

Related

how to display a file using react-native

So, I have those "cards" to which are attached files.
I want to be able to display the content of these files (when possible; I do not expect to show binary files obviously, but text, pdf, images,...) to the user.
Upon a longPress on an attachment, the openAttachment() function is be called. That function downloads the file from the server if necessary and then (tries to) open it:
// Opens an attachment
const openAttachment = async (attachment) => {
try {
// Download file if not already done
const fileInfo = await FileSystem.getInfoAsync(FileSystem.cacheDirectory + attachment.name)
let uri
if (!fileInfo.exists) {
console.log('Downloading attachment')
resp = await FileSystem.downloadAsync(
server.value + `/index.php/apps/deck/api/v1.0/boards/${route.params.boardId}/stacks/${route.params.stackId}/cards/${route.params.cardId}/attachments/${attachment.id}`,
FileSystem.cacheDirectory + attachment.name,
{
headers: {
'Authorization': token.value
},
},
)
console.log(resp)
uri = await FileSystem.getContentUriAsync(resp.uri)
} else {
console.log('File already in cache')
uri = await FileSystem.getContentUriAsync(fileInfo.uri)
}
console.log('Opening file ' + uri)
Sharing.shareAsync(uri);
} catch {
Toast.show({
type: 'error',
text1: i18n.t('error'),
text2: error.message,
})
console.log(error)
}
}
The issue always arrise at the Sharing.shareAsync(uri); line: Whatever I put there, it fails:
Sharing.shareAsync(uri) does not seem to be supported on my platform: https://docs.expo.dev/versions/latest/sdk/sharing/
Linking.openURL(uri) does not support the file:// scheme (the uri is in the form file:///var/mobile/Containers/Data/Application/5C1CB402-5ED1-4E17-B907-46111AE3FB7C/Library/Caches/test.pdf)
await WebBrowser.openBrowserAsync(uri) (from expo-web-browser) does not seem to be able to open local files
How am I supposed to do to display those files? Anyone has an idea?
Cyrille
I found a solution using react-native-file-viewer
// Opens an attachment
const openAttachment = async (attachment) => {
try {
// Download file if not already done
const fileInfo = await FileSystem.getInfoAsync(FileSystem.cacheDirectory + "attachment.name")
let uri
if (!fileInfo.exists) {
console.log('Downloading attachment')
const resp = await FileSystem.downloadAsync(
server.value + `/index.php/apps/deck/api/v1.0/boards/${route.params.boardId}/stacks/${route.params.stackId}/cards/${route.params.cardId}/attachments/${attachment.id}`,
FileSystem.cacheDirectory + attachment.name,
{
headers: {
'Authorization': token.value
},
},
)
console.log(resp)
uri = await FileSystem.getContentUriAsync(resp.uri)
} else {
console.log('File already in cache')
uri = await FileSystem.getContentUriAsync(fileInfo.uri)
}
console.log('opening file', uri)
FileViewer.open(uri)
} catch(error) {
Toast.show({
type: 'error',
text1: i18n.t('error'),
text2: error.message,
})
console.log(error)
}
}

ios converting file to blob in CDVWKWebViewEngine ionic cordova angularJS

Just trying my luck here.
I've been tasked to update a Ionic 1, AngularJS, Cordova app for the changes in iOS camera and file permissions.
In most areas on the app I can simply convertFileSrc and trustAsResourceUrl to retrieve and display in the app. In the scenario below I need to convert the new safe ionic path to a blob for posting.
original file path format:
file:///var/mobile/Containers/Data/Application/10298A9F-7E24-48C4-912D-996EA731F2B0/Library/NoCloud/cdv_photo_001.jpg
after sanitising:
ionic://localhost/app_file/var/mobile/Containers/Data/Application/10298A9F-7E24-48C4-912D-996EA731F2B0/Library/NoCloud/cdv_photo_001.jpg
below is what I've tried so far:
function getDirectory(path) {
return path.substr(0, path.lastIndexOf('/'));
}
function getFilename(path) {
return path.substr(path.lastIndexOf('/') + 1);
}
function getImage(path) {
const pathStr = path;
if (window.ionic.Platform.isIOS() && typeof path === 'string') {
const fixedURL = window.Ionic.WebView.convertFileSrc(path);
path = $sce.trustAsResourceUrl(fixedURL);
}
if (typeof navigator.camera === 'undefined') {
return window.fetch(path, { method: 'GET' })
.then(function(response) {
return response.blob();
});
}
const filename = getFilename(`${path}`);
const directory = getDirectory(`${path}`);
return $cordovaFile.readAsArrayBuffer(directory, filename)
.catch(function(error) {
const err = {
message: 'read failed for image',
filename,
directory,
error
};
$log.error(`getImage, Error: ${JSON.stringify(err)}`);
return $q.reject(err);
})
.then(function(data) {
return new Blob([data], { type: 'image/jpeg' });
});
}
for anyone else who might need to do this in the future I figured out that it was the location of saved files casuing the problem.
In the cordova getPicture config I just needed to add
saveToPhotoAlbum: true
from there the file can just be pulled with the fetch api within the need for $cordovaFile:
return window.fetch(path, { method: 'GET' })
.then(function(response) {
return response.blob();
});

nativescript-imagepicker: IOS: Selected image size is different from the original image[Has solution]

The solution changes will be included in the upcoming release 5.0. Please check the comment from nativescript-imagepicker team:
https://github.com/NativeScript/nativescript-imagepicker/issues/217
Thanks for your time.
Selected image size is different from the original image, How to get the original file size ?
Which platform(s) does your issue occur on?
emulator IOS 11.4 on
iphone 8 Plus
real device IOS 11.4 on IPad air
Please, provide the following version numbers that your issue occurs with:
"nativescript-imagepicker": "6.0.4"
CLI: Nativescript 4.2.0
"tns-core-modules": "^4.2.1",
"tns-platform-declarations": "^3.3.0"
Plugin(s):
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types":"6.26.0",
"babylon":
"6.18.0",
"lazy": "1.0.11",
"nativescript-dev-typescript": "0.7.2",
"typescript": "~2.7.2"
}
Is there any code involved?
Here I use #NevinDry's code:
the original image is 2 MB, and it became 20MB after 'imageSource.saveToFile(path1, "jpeg");'
pickFile() {
let context = imagepickerModule.create({
mediaType: 1,//image only
mode: "single"
});
context
.authorize()
.then(function () {
return context.present();
})
.then(selection => {
selection.forEach(selected => {
let file;
fromAsset(selected).then((imageSource) => {
const folder = knownFolders.documents().path;
const fileName = "test.jpg";
const path1 = path.join(folder, fileName);
const saved = imageSource.saveToFile(path1, "jpeg");
console.log("saved:" + saved);
if (saved) {
console.log("Image saved successfully!");
file = File.fromPath(path1);
console.log("path1:" + path1);
this._checkFileSize(path1);
}
})
});
})
.catch(function (e) {
console.log(e);
});
}
private _checkFileSize(fileUri: string): boolean {
if (isIOS) {
var defManager = NSFileManager.defaultManager;
console.debug("the file path:" + fileUri);
var fileAttributes = defManager.attributesOfItemAtPathError(fileUri);
console.debug(defManager);
var fileSizeNumber = fileAttributes.objectForKey(NSFileSize);
console.debug(fileSizeNumber);
var fileSizeNumberB = fileSizeNumber / 1000000.0;
console.debug("file size in Megabytes");
console.debug(fileSizeNumberB);
return true;
}
}
I also tried below solution: the 2MB image turns to 6MB. Better but not correct.
One more thing maybe related, 'imageSource.saveToFile(filePath, fileType);'
the original file type is jpg , so I keep fileType as jpg here. If uses PNG, the size is bigger.
pickfile2(){
let context = imagepickerModule.create({
mediaType: 1,//image only
mode: "single"
});
context
.authorize()
.then(function () {
return context.present();
})
.then(selection => {
selection.forEach(selected => {
const ios = selected.ios;
if (ios && ios.mediaType === PHAssetMediaType.Image) {
const opt = PHImageRequestOptions.new();
opt.version = PHImageRequestOptionsVersion.Current;
PHImageManager.defaultManager().requestImageDataForAssetOptionsResultHandler(
ios, opt, (imageData: NSData, dataUTI: string, orientation: UIImageOrientation, info: NSDictionary<any, any>) => {
console.debug(info.objectForKey("PHImageFileURLKey").toString());
let srcfilePath = info.objectForKey("PHImageFileURLKey").toString();
let fileName = this.extractImageName(srcfilePath);
let fileType: "png" | "jpeg" | "jpg" = this.extractImageType(fileName);
console.log("fileName:" + fileName);
console.log("srcfilePath:" + srcfilePath);
//get image instance from data; it doesn't work via 'fromPath'
let imageSource: ImageSource = <ImageSource>fromData(imageData);
let filePath = path.join(this.filePickerPath, fileName);
console.log("filePath:" + filePath);
let saved = imageSource.saveToFile(filePath, fileType);
console.log("saved:" + saved);
if (saved) {
this._checkFileSize(filePath);
}
});
}
});
})
.catch(function (e) {
console.log(e);
});
}
The playground code is here
The page went crash once added npm package 'tns-platform-declarations' from it. So please download it if you want to run. Then
remove the folder version of nativescript-imagepicker#6.0.4
rename package1.json to package.json
In references.d.ts, add additiona '/' before '//' to make it as '///' on the two lines.
npm install. That demo should work on your env.
Anyway, Does anyone have idea on it ? Thanks.

Ajax calls working in Android but not iOS

I'm developing an app in Nativescript for the first time and running into an issue where AJAX calls work on Android but not iOS. I have a login.js file which requires a user-view-model (user-view-model.js), and when I test the code on Android it takes me to the "home" page but it hits the catch function on iOS.
login.js:
var dialogsModule = require("ui/dialogs");
var UserViewModel = require("../../shared/view-models/user-view-model");
var applicationSettings = require("application-settings");
var user = new UserViewModel({
email: "aaa#aaa.com",
password: "aaa"
});
var frameModule = require("ui/frame");
var page;
exports.loaded = function(args) {
page = args.object;
page.bindingContext = user;
};
exports.login = function () {
user.login().catch(function(error) {
dialogsModule.alert({
message: "Unfortunately we could not find your account.",
okButtonText: "OK"
});
return Promise.reject();
}).then(function(response) {
console.dir(response)
console.log("past response")
applicationSettings.setString("user_id", response.user_id);
applicationSettings.setString("first_name", response.first_name);
applicationSettings.setString("last_name", response.last_name);
applicationSettings.setString("user_type", response.user_type);
var topmost = frameModule.topmost();
topmost.navigate("views/home/home");
});
};
user-view-model.js:
var config = require("../../shared/config");
var fetchModule = require("fetch");
var observableModule = require("data/observable");
var http = require("http");
function User(info) {
info = info || {};
var viewModel = new observableModule.fromObject({
email: info.email || "",
password: info.password || ""
});
viewModel.login = function() {
let loginEmail = JSON.stringify(this.get("email")).replace(/['"]+/g, '');
let loginPassword = JSON.stringify(this.get("password")).replace(/['"]+/g, '');
console.log(loginEmail, loginPassword);
let loginUrl = config.serverPHPServiceUrl + "Login.php?user_id=" + loginEmail + "&password=" + loginPassword;
console.log(loginUrl);
// I tried this way first and wasn't able to login on iOS, which made me try the second method below.
// return fetchModule.fetch(loginUrl, {
// method: "POST",
// headers: {
// "Content-Type": "application/json"
// }
// }).then(handleErrors).then(function(response) {
// return response.json();
// }).then(function(data) {
// console.dir(data);
// console.log(data["results"][0]["user_id"])
// return data["results"][0];
// });
// This method works on Android but not iOS.
return http.getJSON(loginUrl).then(function(response) {
console.dir(response);
return response.results[0];
})
};
return viewModel;
};
function handleErrors(response) {
console.log("in errors")
if (!response.ok) {
console.log(JSON.stringify(response));
throw Error(response.statusText);
}
return response;
}
module.exports = User;
Is there anything fundamentally wrong with my code, or do asynchronous calls work differently on iOS vs Android in Nativescript? I did the Grocery tutorial and didn't run into this issue, so I didn't think this was the case. Does it matter that the backend is using PHP?
I fixed my issue: I started a new project with Angular 2 and ran into the same error, but then it gave me the error message "Error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection." I solved it by adding "https" to my url call, but this post has another solution.

Cordova / Ionic - Download file from InAppBrowser

The scenario goes like this: I open a website in InAppBrowser, after the user ends with the work over there, the site generates a .pdf for the user to download, the problem is that the pdf does not download, it opens it in the browser.
Is there a way to make it download from the InAppBrowser? I'm currently working on an iOS app, so the solution would be better for iOS.
Thanks in advance.
Following #jcesarmobile advices this is what I came up with:
First I had to install the cordova-plugin-file-transfer
Open URL
var url = "http://mi-fancy-url.com";
var windowref = window.open(url, '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
Create a listener on that windowref for a loadstart event and check if what's being loaded is a pdf (that's my case).
windowref.addEventListener('loadstart', function(e) {
var url = e.url;
var extension = url.substr(url.length - 4);
if (extension == '.pdf') {
var targetPath = cordova.file.documentsDirectory + "receipt.pdf";
var options = {};
var args = {
url: url,
targetPath: targetPath,
options: options
};
windowref.close(); // close window or you get exception
document.addEventListener('deviceready', function () {
setTimeout(function() {
downloadReceipt(args); // call the function which will download the file 1s after the window is closed, just in case..
}, 1000);
});
}
});
Create the function that will handle the file download and then open it:
function downloadReceipt(args) {
var fileTransfer = new FileTransfer();
var uri = encodeURI(args.url);
fileTransfer.download(
uri, // file's uri
args.targetPath, // where will be saved
function(entry) {
console.log("download complete: " + entry.toURL());
window.open(entry.toURL(), '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
true,
args.options
);
}
The problem i'm facing now is the path where it downloads, I just can't open it. But well, at least file is now downloaded. I will have to create a localStorage item to save the paths for different files.
Many validations are missing in this steps, this was just an example I made quickly to check if it works. Further validations are needed.
Open you window using IAB plugin and add an event listener
ref = window.open(url, "_blank");
ref.addEventListener('loadstop', loadStopCallBack);
In the InAppBrowser window call the action using https://xxx.pdf">documentName
Implement the loadStopCallBack function
function loadStopCallBack(refTemp) {
if(refTemp.url.includes('downloadDoc')) {
rtaParam = getURLParams('downloadDoc', refTemp.url);
if(rtaParam != null)
downloadFileFromServer(rtaParam);
return;
}
}
function getURLParams( name, url ) {
try {
if (!url)
url = location.href;
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
return results == null ? null : results[1];
} catch (e) {
showSMS(e);
return null;
}
}
After create a download method
function downloadFileFromServer(fileServerURL){
try {
var Downloader = window.plugins.Downloader;
var fileName = fileServerURL.substring(fileServerURL.lastIndexOf("/") + 1);
var downloadSuccessCallback = function(result) {
console.log(result.path);
};
var downloadErrorCallback = function(error) {
// error: string
console.log(error);
};
//TODO cordova.file.documentsDirectory for iOS
var options = {
title: 'Descarga de '+ fileName, // Download Notification Title
url: fileServerURL, // File Url
path: fileName, // The File Name with extension
description: 'La descarga del archivo esta lista', // Download description Notification String
visible: true, // This download is visible and shows in the notifications while in progress and after completion.
folder: "Download" // Folder to save the downloaded file, if not exist it will be created
};
Downloader.download(options, downloadSuccessCallback, downloadErrorCallback);
} catch (e) {
console.log(e);
}
}
you can get the plugin here https://github.com/ogarzonm85/cordova-plugin-downloader
it Works and was too easy

Resources