Ionic File Chooser URL issue - android

I am using this plugin for getting files
https://ionicframework.com/docs/native/file-chooser/
When I select a PDF file from Downloads folder it is giving me a URI like content://com.android.providers.downloads.documents/document/1015
But if i select another file like ZIP or PNG it resolves to a suitable path
content://com.android.providers.downloads.documents/document/raw%3A%2Fstorage%2Femulated%2F0%2FDownload%2Fwws.zip
content://com.android.providers.downloads.documents/document/raw%3A%2Fstorage%2Femulated%2F0%2FDownload%2Fopacity.png
How do I get the path from a file in the form of file://….
I have tried the following approaches with no success yet:
FilePath.resolveNativePath
and
normalizeURL
UPDATE:
Imports
import { File } from '#ionic-native/file';
import { FileChooser } from '#ionic-native/file-chooser'
import { FilePath } from '#ionic-native/file-path';
Code for file chooser:
getAndroidFile() {
this.fileChooser.open()
.then(uri => {
console.log("uri", uri);
this.file.resolveLocalFilesystemUrl(uri).then((files) => {
console.log("files", files);
}).catch((error) => { console.log("error", error) });
(<any>window).FilePath.resolveNativePath(uri, (result) => {
this.nativepath = result;
console.log("nativepath", this.nativepath);
}, (err) => {
console.log("err", err);
})
})
}
I have used it as Aaron suggested:
this.file.resolveLocalFilesystemUrl(uri).then((files)=>{
console.log("files",files);
}).catch((error) => { console.log("error", error) });
It still returns as:
filesystem: FileSystem {name: "content", root: DirectoryEntry}
fullPath: "/com.android.providers.downloads.documents/document/1015"
isDirectory: false
isFile: true
name: "1015"
nativeURL: "content://com.android.providers.downloads.documents/document/1015"
Which is the original url.
UPDATE 2:
getBase64Content(nativepath) {
let path = nativepath.substring(0, nativepath.lastIndexOf('/'));
let filename = nativepath.substring(nativepath.lastIndexOf('/'), nativepath.length);
filename = filename.replace("/", "");
console.log("path", path);
console.log("filename", filename);
this.file.readAsDataURL(path, filename)
.then(content => {
console.log('content1', content);
//this will be passed to web API
this.base64content = content;
})
.catch(err => {
console.log("err", err);
})
}
This base64 content is sent overthe to server via api and they convert it back to file.
UPDATE 3:
Sorry for late reply, really busy with another project.
Answers for Koken:
How are you testing this thing?
What command are you using for the execution?
ionic cordova run android
(I check the values by remote debugging using chrome.)
Android emulator? Android device?
Android Device. Redmi note 5 pro(MIUI 10, Android 8.1).
Also... what are the next steps after selecting the file?
This base64 content is sent over to server via api and they convert it back to file.
Hope you guys can help me. With code given. Thanks

you need resolveLocalFilesystemUrl from the FileManager Plugin
https://ionicframework.com/docs/native/file/#resolveLocalFilesystemUrl

Related

Nativescript angular android app is unable to read file from private app folder after copying the file

I have a simple app in native script angular for android, where I store some user-defined data into a JSON file in the app's private folder.
It actually works, but the problem is, if I copy the file to sd card and then back in the app folder, the app can't read the content of the file. Of course, I changed the permissions of the file to 600 (that's what the original file had). But it still doesn't work.
If you ask why I'm copying the file to sd card and back it's because I'm trying to solve a problem where if I update the app in play store it is unable to read the stored JSON file created by the previous version and I think that it's somehow related.
The code for saving data into file is this:
saveUsers() {
this.adresarAppky = fs.knownFolders.currentApp();
this.adresarZrodenci = this.adresarAppky.getFolder('zrodenci');
this.zrodenciFile = this.adresarZrodenci.getFile('zrodenci.json');
this.zrodenciFile.writeText(JSON.stringify(this.users))
.then(result => {
console.log('File saved');
}).catch(err => {
console.log('Error saving ' + err);
})
}
and this is code for reading the file contents
loadSavedUsers() {
this.adresarAppky = fs.knownFolders.currentApp();
this.adresarZrodenci = this.adresarAppky.getFolder('zrodenci');
if (!File.exists(path.join(this.adresarZrodenci.path, 'zrodenci.json'))) this.saveUsers();
this.zrodenciFile = this.adresarZrodenci.getFile('zrodenci.json');
this.zrodenciFile.readText()
.then(res => {
this.zrodenciData = JSON.parse(res);
console.log('Data read ' + res);
this.users = this.zrodenciData;
this.emitSelectedUser();
}).catch(err => {
console.log('Error reading file ' + err);
});
}
The line with console.log('Error reading file') outputs this error - ReadTextTask returns no result.

Cordova: How to move file to the Download folder?

THE SITUATION:
In my mobile app I need to download a file and store in the Download folder.
The download part is working fine.
The file is properly downloaded from the server and stored in the following folder:
file:///storage/emulated/0/Android/data/org.cordova.MY_APP_NAME.app/my_file.pdf
But the location is not really user-friendly.
To access it I have to go to: Internal storage / Android / data / org.cordova.MY_APP_NAME.app /
So I need to move it to the main Download folder.
The file transfer is what I don't manage to do.
I know that there are already several similar questions on SO.
I have tried them all but none really worked for me, I could never see the file in the actual Download folder.
PROJECT INFO:
I am using Quasar with Vuejs and Cordova.
PLATFORM:
For the moment I am working with Android. But ideally I am looking for a solution that works for both Android and IOS.
THE CODE:
The download code:
var fileTransfer = new FileTransfer() // eslint-disable-line
var uri = encodeURI('https://MY_SERVER_PATH')
fileTransfer.download(
uri,
cordova.file.externalApplicationStorageDirectory + 'my_file.pdf',
entry => {
console.log('download complete: ' + entry.toURL())
this.moveFile(entry.toURL())
},
error => {
console.log('download error source ' + error.source)
console.log('download error target ' + error.target)
console.log('download error code' + error.code)
},
false,
{
headers: {
'Authorization': 'Basic asdasdasdasdassdasdasd'
}
}
)
The File transfer code:
moveFile(fileUri) {
window.resolveLocalFileSystemURL(
fileUri,
fileEntry => {
let newFileUri = 'file:///storage/emulated/0/Download'
window.resolveLocalFileSystemURL(
newFileUri,
dirEntry => {
fileEntry.moveTo(dirEntry, 'new_filename.pdf', this.moveFileSuccess, this.moveFileError)
},
this.moveFileError)
},
this.moveFileError)
},
moveFileSuccess(entry) {
console.log('file move success')
console.log(entry)
},
moveFileError(error) {
console.log('file move error')
console.log(error)
}
THE QUESTION:
How can I move a file to the Download folder?
Thanks
EDIT:
This is the console log of the cordova.file object:
applicationDirectory: "file:///android_asset/"
applicationStorageDirectory: "file:///data/user/0/org.cordova.MY_APP_NAME.app/"
cacheDirectory:"file:///data/user/0/org.cordova.MY_APP_NAME.app/cache/"
dataDirectory: "file:///data/user/0/org.cordova.MY_APP_NAME.app/files/"
documentsDirectory: null
externalApplicationStorageDirectory: "file:///storage/emulated/0/Android/data/org.cordova.MY_APP_NAME.app/"
externalCacheDirectory: "file:///storage/emulated/0/Android/data/org.cordova.MY_APP_NAME.app/cache/"
externalDataDirectory: "file:///storage/emulated/0/Android/data/org.cordova.MY_APP_NAME.app/files/"
externalRootDirectory: "file:///storage/emulated/0/"
sharedDirectory: null
syncedDataDirectory: null
tempDirectory: null
Okay I managed to resolve it.
First of all is totally unnecessary to download and then move the file. It can just be directly downloaded in the desired direction.
The correct path (in my case) was this:
cordova.file.externalRootDirectory + 'download/' + 'my_file.pdf
that correspond to: file:///storage/emulated/0/download/my_file.pdf
and that means that to find the file inside the device you have to go to: Internal Storage / Download / my_file.pdf
Add the following value in the config.xml:
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,root" />
It's important to check for permission using this cordova plugin: cordova-plugin-android-permissions
You can make a quick test like this:
let permissions = cordova.plugins.permissions
permissions.checkPermission(permissions.READ_EXTERNAL_STORAGE, checkPermissionCallback, null)
function checkPermissionCallback(status) {
console.log('checking permissions')
console.log(status)
}
Most probably the result is false. And that means that we have to request permission to the user:
permissions.requestPermission(successCallback, errorCallback, permission)
In this way it will appear the alert asking for permission.
THE CODE:
To put it all together, this is the working code:
let pdfPath = 'https://MY_SERVER_PATH'
let permissions = cordova.plugins.permissions
permissions.checkPermission(permissions.READ_EXTERNAL_STORAGE, checkPermissionCallback, null)
// Checking for permissions
function checkPermissionCallback(status) {
console.log('checking permissions')
console.log(status)
if (!status.hasPermission) {
var errorCallback = function () {
console.warn('Storage permission is not turned on')
}
// Asking permission to the user
permissions.requestPermission(
permissions.READ_EXTERNAL_STORAGE,
function (status) {
if (!status.hasPermission) {
errorCallback()
} else {
// proceed with downloading
downloadFile()
}
},
errorCallback)
} else {
downloadFile()
}
}
function downloadFile() {
let filePath = cordova.file.externalRootDirectory + 'download/' + 'my_file.pdf'
let fileTransfer = new window.FileTransfer()
let uri = encodeURI(decodeURIComponent(pdfPath))
// Downloading the file
fileTransfer.download(uri, filePath,
function (entry) {
console.log('Successfully downloaded file, full path is ' + entry.fullPath)
console.log(entry)
},
function (error) {
console.log('error')
console.log(error)
},
false
)
}
var fileTransfer = new FileTransfer() // eslint-disable-line
var uri = encodeURI('https://MY_SERVER_PATH')
var fileURL = "///storage/emulated/0/Download";
fileTransfer.download(
uri,
fileURL+ 'your_file.pdf',
entry => {
console.log('download complete: ' + entry.toURL())
this.moveFile(entry.toURL())
},
error => {
console.log('download error source ' + error.source)
console.log('download error target ' + error.target)
console.log('download error code' + error.code)
},
false,
{
headers: {
'Authorization': 'Basic asdasdasdasdassdasdasd'
}
}
)
you can directly save downloaded file to your path
Try above code and let me know if its work.
cordova.file.externalApplicationStorageDirectory.
For that path you do not need to request any permission in manifest or require any permission at all.
But for others like external storage and so you need them.
You are #1244 with this problem this year.
Google for runtime permissions.
You can than directly download to the Download directory.

Ionic 3 get file from Google Drive using uri

I am using ionic 3.13.1 framework. My application should allow user to work with files from device and from google drive. I am using IonicNativeFile and IonicNativeFileChooser. So, when I select file from device memory - all works good, but I cannot use that method for google drive files. My function looks like:
public OpenFile(event: Event) {
this.fileChooser.open() //Open File Chooser
.then(uri => { //get uri
console.log(`URI: ${uri}`);
( < any > window).FilePath.resolveNativePath(uri, (result) => { //Get file path in storage from uri
this.nativepath = result;
console.log(`Native Path: ${this.nativepath}`);
this.readFile(); //read data from file
this.loader = this.loadingCtrl.create({ //Create and show loader message
content: "Loading..."
});
this.loader.present();
}, (error) => {
console.log(`Looks like file from GDrive: code ${error.code} message ${error.message}`);
});
}).catch(e => console.log(e));}
The uri is: content://com.google.android.apps.docs.storage.legacy/enc%3Di2Alapnkehx4uFSbuS2U3VO_rC-nrHu3Emq8u8eF4Z9w8QvL%0A
ResolveNativePath shoud return 1 if file is in cloud, but my function returns 0 with message: Unable to resolve filesystem path. I dont't know how to fix it.
Help me, please. What should I do to get path of file?

Cannot open files with FileOpener2, but not getting an error in Android

I am attempting to open a PDF file with FileOpener2 (through ng-cordova) with the following code:
$cordovaFile.checkFile(cordova.file.dataDirectory, attachmentPath)
.then((fileEntry) => {
// success
fileEntry.getMetadata((metadata) => {
// metadata.size is in bytes
var megabyteSize = metadata.size / 1048576;
if (megabyteSize > 5) {
var path = cordova.file.dataDirectory + attachmentPath;
console.log(path); // prints: file:///data/data/com.ionicframework.enhatch146189/files/attachments/CS-353ES_CS-420ES_Eng.pdf which is correct
$cordovaFileOpener2.open(path, 'application/pdf').then(() => {
console.log("Opened!") // prints
}, (error) => {
console.log(error);
usePDFJs(); // tries to render PDF in app with PDFJs
});
} else {
usePDFJs();
}
})
}, function (error) {
// error
console.error(error);
});
What happens confuses me: it prompts me with an "open this file in Adobe Reader?" and lists the other PDF viewers, and the console prints "Opened!"
However, no matter what I open ANY pdf in, I get some sort of error such as "cannot open this PDF file".
Can anyone see something wrong with this code?
Apparently, if you use cordova.file.dataDirectory on android you can't open those files in other applications or attach them to emails. Silly mistake -- coded too fast and read too little on the documentation. Using cordova.file.externalApplicationStorageDirectory solved the issue.

cordova-ionic ngCordova ios or iPhone file read error code 5 ENCODING_ERR

i am using cordova-ionic framework to build app. i am new to the iOS or iPhone
in my requirement, i have to read a file in the app. i am reading file in the android app but same code showing error (code: 5).
i am following code types:
in android:
$cordovaFile.writeFile(( 'user.json', data, {'append':false} )).then(function(result) {
alert('file created.');
alert(JSON.stringify(result));
}, function(err) {
// An error occured. Show a message to the user
alert('file writed');
alert(JSON.stringify(err));
});
i can create file, writing, reading data and removing the file but in ios phone i am not able to create file using the same code.
in iPhone:
var data = {"user":{"name":"errer","email":"sdsdff#gmail.com","username":"sdfsdfsd"}};
$cordovaFile.writeFile(( 'user.json', data, {'append':false} )).then(function(result) {
// Success!
alert('file created.');
alert(JSON.stringify(result));
}, function(err) {
// An error occured. Show a message to the user
alert('file writed');
alert(JSON.stringify(err));
});
i just change my directory is cordova.file.cacheDirecotry/cordova.file.applicationDirectory
$cordovaFile.createFile(( cordova.file.cacheDirecotry+'user.json', true )).then(function(result) {
// Success!
alert('file created.');
alert(JSON.stringify(result));
}, function(err) {
// An error occured. Show a message to the user
alert('file writed');
alert(JSON.stringify(err));
});
all way getting the error like code: 12 or code: 5
please help me to solve this or give me a idea to get application file path
I have some progression.
First, I alert my cordova.file.dataDirectory or cordova.file.documentsDirectory.
They are
file:///var/mobile/...../Library/NoCloud
and
file:///var/mobile/..../Documents
Then I create a File without the prefix and succeed. Referring to this https://github.com/driftyco/ng-cordova/issues/362
and the success message shows that the native url of the file is saved in
file:///var/mobile/...../Library/files
Which is quite strange. By the way, I add the
<preference name="iosPersistentFileLocation" value="Library" />
according to https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#ios-persistent-storage-location
All the tests are running on IOS, i haven't test for Android.
Updates
All the following code worked for me and give success response
$cordovaFile.checkFile('/test.data')
$cordovaFile.createFile('test.data',false)
$cordovaFile.checkDir('/')
Hope this can solve your problems.
/*
Here is what I am using for my Android and IOS apps
Keep attention to a couple of things:
- Android and IOS have other directorynames for files
- Android devices have different root (myFSRootDirectory1 = Samsung Tab 3, msFSRootDirectory2 = Samsung SII)
- $cordovaFile functions prefixes all pathnames with root
$cordovaFileTransfer functions needs absolute pathnames
Here I create the prefixes for File functions and FileTransfer functions for Android and IOS
*/
// The $ionicPlatform and ionic.Platorm are from Ionic framework
//
$ionicPlatform.ready(function() {
if (ionic.Platform.isAndroid()) {
// If running on Android
console.log('cordova.file.externalDataDirectory: ' + cordova.file.externalDataDirectory);
//
// I use cordova.file.externalDataDirectory because this url is for Android devices
// If you remove the app from the device these url are cleared too on the device. So keep it clean.
// Remove the root from cordova.file.externalDataDirectory
//
myFsRootDirectory1 = 'file:///storage/emulated/0/'; // path for tablet
myFsRootDirectory2 = 'file:///storage/sdcard0/'; // path for phone
fileTransferDir = cordova.file.externalDataDirectory;
if (fileTransferDir.indexOf(myFsRootDirectory1) === 0) {
fileDir = fileTransferDir.replace(myFsRootDirectory1, '');
}
if (fileTransferDir.indexOf(myFsRootDirectory2) === 0) {
fileDir = fileTransferDir.replace(myFsRootDirectory2, '');
}
console.log('Android FILETRANSFERDIR: ' + fileTransferDir);
console.log('Android FILEDIR: ' + fileDir);
}
if (ionic.Platform.isIOS()) {
// if running on IOS
console.log('cordova.file.documentsDirectory: ' + cordova.file.documentsDirectory);
// I use cordova.file.documentsDirectory because this url is for IOS (NOT backed on iCloud) devices
fileTransferDir = cordova.file.documentsDirectory;
fileDir = '';
console.log('IOS FILETRANSFERDIR: ' + fileTransferDir);
console.log('IOS FILEDIR: ' + fileDir);
}
if (ionic.Platform.isAndroid() || ionic.Platform.isIOS()) {
//
// Just functions from the list below one by one ( or chain them)
//
}
});
// Download file from 'http://www.yourdomain.com/test.jpg' to test/one/test.jpg on device Filesystem
var hostPath = 'http://www.yourdomain.com/test.jpg';
var clientPath = fileTransferDir + 'test/one/test.jpg';
var fileTransferOptions = {};
$cordovaFile.downloadFile(hostPath, clientPath, true, fileTransferOptions).then (function() {
});
// Create dir test
$cordovaFile.createDir(fileDir + 'test/').then( function(dirEntry) {
});
// Create dir aganin in dir test
$cordovaFile.createDir(fileDir + 'test/one/').then( function(dirEntry) {
});
// Create empty file test.txt in test/again/
$cordovaFile.createFile(fileDir + 'test/one/test.txt', true).then( function(fileEntry) {
});
// List of files in test/again
$cordovaFile.listDir(fileDir + 'test/one/').then( function(entries) {
console.log('list dir: ', entries);
});
// Write some text into file
$cordovaFile.writeFile(fileDir + 'test/one/test.txt', 'Some text te test filewrite', '').then( function(result) {
});
// Read text written in file
$cordovaFile.readAsText(fileDir + 'test/one/test.txt').then( function(result) {
console.log('readAsText: ', result);
});
Perhaps it's because of a typo? You have cordova.file.cacheDirecotry. Shouldn't that be : cordova.file.cacheDirectory ?
Refer to the original documentation :-
https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#ios-file-system-layout
iOS has some directories as read-only. Try changing your path.
Let me know if it does not work for you.

Categories

Resources