i want to download a file into my ionic-2-app. i use ionic native Transfer plugin with the following script:
let headers = new Headers();
headers.append('TOKEN-NAME', storedtoken);
let url = storedendpoint.apiendpoint + 'path/to/api/force/download/file';
File.resolveLocalFilesystemUrl(cordova.file.applicationStorageDirectory).then((dirEntry) => {
console.log('resolveLocalFilesystemUrl: ', dirEntry);
this.transfer.download(encodeURI(url), dirEntry.nativeURL + filename, true, {headers: headers})
.then((entry) => {
console.log('Transfer: ', entry);
}, (error) => {
console.log('Transfer Error: ', error);
})
});
But i get the following error:
body: "Could not create target file"
code: 1
exception: null
http_status: 200
source: "http://domain/apiendpoint/api/path/to/api/force/download/file"
target: "file:////var/mobile/Containers/Data/Application/XXXXX-YYYYY-WWWW-1234-DSFR45RFDT65T/filename.doc"
The Download works perfectly if i try it in Browser.
ok, found the problem:
cordova.file.applicationStorageDirectory
is read only. it works with
cordova.file.cacheDirectory
Related
Im trying to download using Expo-File-System on an expo project with react native.
The download option works on Expo-Go during testing but wont work when i push it in production mode.
It says that it is "unable to save file in the local URI because you dont have Document Permissions" as shown in the Picture below.
Here is the code (Using typescript):
import * as MediaLibrary from 'expo-media-library';
///For downloading the file
const download = async (item: ICurriculumCourseDocument) => {
setIsloading(true)
await FileSystem.downloadAsync(
`https:/baseUrl`,
FileSystem.documentDirectory + item.filename,
options
)
.then(({ uri }) => {
setIsloading(false)
console.log('Finished downloading to', uri);
onShareIOS(uri)
})
.catch(error => {
setIsloading(false)
alert(error);
});
}
//For sharing the file using the Share
const onShareIOS = async (uri: string) => {
const imageFileExts = ['jpg', 'png', 'gif', 'heic', 'webp', 'bmp'];
if (imageFileExts.every(x => !uri.endsWith(x))) {
const UTI = 'public.item';
await Sharing.shareAsync(uri, {UTI});
}
};
Here is the full Alert with the error message:
I am using react-native-firebase to work with our Firebase account for authentication, firestore and storage. Attempting to upload a photo to Storage is failing with an unknown error. Here is the code attempted:
_pickImage = async () => {
await this.getCameraRollPermission()
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
});
console.log(result);
if (!result.cancelled) {
// this.setState({ photoURL: result.uri });
this._handlePhotoChoice(result)
}
};
_handlePhotoChoice = async pickerResult => {
let userId = this.state.userId
firebase
.storage()
.ref('photos/profile_' + userId + '.jpg')
.putFile(pickerResult.uri)
.then(uploadedFile => {
console.log("Firebase profile photo uploaded successfully")
})
.catch(error => {
console.log("Firebase profile upload failed: " + error)
})
}
Testing in iOS Simulator and using the debugger to detect the errors I'm just getting back this error:
"Error: An unknown error has occurred.
at createErrorFromErrorData (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2371:17)
at blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2323:27
at MessageQueue.__invokeCallback (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2765:18)
at blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2510:18
at MessageQueue.__guardSafe (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2678:11)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2509:14)
at http://localhost:19001/debugger-ui/debuggerWorker.js:70:58"
UPDATE:
A file is uploaded to the storage bucket, but the file is not the JPEG photo, but instead is JSON content about the file:
{"contentType":"image\/jpeg","name":"photos\/profile_XPIO2lHjlYbdLPchACZHBsmY9Jr1.jpg"}
So somehow a JSON file is ending up in the bucket instead of the actual photo and then the error is thrown.
It looks like this issue is tracked a couple times, but not resolved:
https://github.com/invertase/react-native-firebase/issues/1177
https://github.com/invertase/react-native-firebase/issues/302
Finally found my issue. The URI of the image from the ImagePicker had a '%' character in it from the local app cache. This percent was being URI encoded to '%25' which resulted in the file not being found by the putFile code. Adding a decodeURI call around the uri fixed the issue.
let fileUri = decodeURI(pickerResult.uri)
In case you are using react-native-document-picker, check out this:
https://github.com/rnmods/react-native-document-picker/issues/235
My app downloads images from an external resource to the data directory using FileTrasnfer. Now, in one of the pages of my app I'm supposed to display those images.
The paths I used for the images is the exact path they were downloaded to, then I don't understand why the images are not displayed, seems like there is no access to the file
How can I access files in the file.datadirectory?
my code
getfileimage() {
const fileTransfer: FileTransferObject = this.transfer.create();
let options ={
headers:{
'token': this.token,
'sid': this.sid,
'user': this.user,
'type': "image",
'file': this.FileName
}
}
fileTransfer.download(this.apiUrl, this.file.dataDirectory + 'photo.jpg', true, options)
.then(result => {
console.log("getfileimage 2 :- " + JSON.stringify((result)));
console.log("Response data ->>>>>>> :- " + JSON.stringify(result.nativeURL));
// this.imageDis = normalizeURL(JSON.stringify(result.nativeURL));
this.imageDis = JSON.stringify(result.nativeURL);
//console.log("getfileimage :- " +this.imageDis);
}, (err) => {
console.log("Error is: " + JSON.stringify(err));
});
output :-----
getfileimage :- "file:///var/mobile/Containers/Data/Application/E806FDE7-1AF2-4DA2-BC07-E5FEC2E422ED/Library/NoCloud/photo.jpg"
2018-02-26 17:28:11.911819+0530 MyApp[607:174952] THREAD WARNING: ['File'] took '10.540039' ms. Plugin should use a background thread.
2018-02-26 17:28:11.936391+0530 MyApp[607:174952] WARNING: sanitizing unsafe URL value "file:///var/mobile/Containers/Data/Application/E806FDE7-1AF2-4DA2-BC07-E5FEC2E422ED/Library/NoCloud/photo.jpg" (see http://g.co/ng/security#xss)
2018-02-26 17:28:11.970340+0530 MyApp[607:174952] localFile :- cdvfile://localhost/library-nosync/photo.jpg
I'm brand new to Ionic and angular. Currently building a small app to upload a file to our remote server.
The app works correctly when sending a file from an Android device but when we send from an iOS none of the request parameters are getting through to the server.
Here is the relevant code in the app:
let options = {
fileKey: 'photo',
fileName: queueItem.remoteFileName + '.jpg',
mimeType: 'image/jpeg',
chunkedMode: true,
headers: {
'Authorization': 'Bearer ' + authentication.accessToken,
'Content-Type': undefined,
}
params: {
"data": { "id": myId, "itemNumber": itemNumber, "contentType": "image/jpeg" }
}
};
ft.upload(queueItem.filePath, encodeURI(`${this.baseUrl}/photo/uploadPhoto/`), options, true)
.then((result: any) => {
When we do this it works fine from Android devices. However, iOS devices, the server shows that the request param "data" is null.
Any help is appreciated!
I'm trying to open an already present .pdf file on iOS [I can see the files in iBooks].
I use Ionic and the file-opener2 Cordova plugin - I use the latest versions of Cordova and the plugin.
This is the code that works perfectly on Android:
$scope.openPDF = function() {
alert("OK");
$cordovaFileOpener2.open(
'/storage/emulated/0/Download/pdf/name.pdf', // Any system location, you CAN'T use your appliaction assets folder
'application/pdf'
).then(function() {
console.log('Success');
}, function(err) {
console.log('An error occurred: ' + JSON.stringify(err));
});
};
Yes, I want to be a local file without having to download it, this is a show off app that won't have internet connection where will be running for just one day. So the files have to be local.
I have no idea how to open the file paths like in Android. Running on iOS 9.3.3., iPad Pro. Also, the device is not jail-broken.
Edit:
Well, now I'm trying to move the files from the app's folder to another one, so I can open it from there. Again, all of the code works on Android.
function openPDF(uri) {
var filePath = cordova.file.applicationDirectory + 'www/pdf/fichas/name.pdf';
alert(filePath);
window.resolveLocalFileSystemURL(filePath, function(entry) {
var fileTransfer = new FileTransfer();
var targetFile = cordova.file.externalDataDirectory + entry.name;
fileTransfer.download(
entry.toURL(),
targetFile,
function(entry) {
console.log("download complete: " + entry.toURL());
console.log("targetFile: " + targetFile);
cordova.plugins.fileOpener2.open(
targetFile,
'application/pdf',
{
error : function(error){ alert('open error ' + JSON.stringify(error)) },
success : function(){ }
}
);
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
}
);
}, function(error){ alert('error resolveLocalFileSystemURI ' + JSON.stringify(error)) });
};
alert(filePath); * returns: file:///var/containers/Bundle/Application/xxxx-xxxx-xxxx-xxxxxxxxxxxxxxx/NAME.app/www/pdf/name.pdf
I don't know where it fails though. I won't open anything.
edit2:
I get a FileTransfer error indeed. "
Could not create path to save dowloaded file.