import RNFS from 'react-native-fs';
var path = RNFS.DocumentDirectoryPath + '/test.txt';
RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8')
.then(success => {
console.log('FILE WRITTEN!');
})
.catch(err => {
console.log(err.message);
});
console.log(RNFS.DocumentDirectoryPath)
// /data/data/xxx.xxx.xxx/files/
But I didn't find a path/file like /data/xxx.xxx.xxx/files/ in the data directory of the mobile phone
But the entry in the code exists
RNFS.readDir(RNFS.DocumentDirectoryPath).then(result => {
console.log('DocumentDirectoryPath GOT RESULT', result);
});
I want to know what is the path of RNFS.DocumentDirectoryPath in the phone?
Try This Way
RNFS.readDir(RNFS.DocumentDirectoryPath)
.then((result) => {
console.log('GOT RESULT', result);
})
First you need to Check the file is existing or not
const filePath = RNFS.DocumentDirectoryPath + "/test" + ".txt";
RNFS.exists(filePath)
.then(success => {
if (success) {
readFile(filePath, logData);
} else {
writeFile(filePath, logData);
}
})
.catch(err => {
console.log(err.message, err.code);
});
const readFile = (filePath, logData) => {
RNFS.readFile(filePath, "utf8")
.then(content => {
// Do what you need if the file exists
})
.catch(err => {
console.log(err.message, err.code);
});
};
const writeFile = (filePath, logData) => {
RNFS.writeFile(filePath, logData, "utf8")
.then(() => {
// This will create new file for you in the name of test.txt
})
.catch(err => {
console.log(err.message, err.code);
});
};
For finding files in the mobile storage. You should have to use External Directory Path
Document's directory path could be found in the android emulator.
[path- Device Explorer/'Your Package name 'eg: 'com.'/data/files/you
have your file ]
Related
My requirement is to upload the filename with special characters also. My code for android device is :
if (self.device.platform == 'Android') {
let permissions = cordova.plugins.permissions;
self.UserUtils.addPermission(permissions.READ_EXTERNAL_STORAGE).then((success) => {
self.fileChooser.open().then((path: any) => {
console.log(path);
console.log("fileChooser successCallback");
(window as any).FilePath.resolveNativePath(path, function (path: any) {
let a = path.split('/');
let fileName = a.pop();
//fileName = fileName.replace(/[&\/\\#,+()$~%#£=!-'":*?<>{}]/g,'_').replace(/_{2,}/g,'_');
let fileObj = self.fileService.getFileNameExt(fileName);
let onlyName = fileObj.onlyName;
let ext = fileObj.ext;
let p = a.join().replace(/,/g, "/");
p = p + "/";
console.log(p, fileName);
self.file.checkFile(p, fileName)
.then(function (suc) {
console.log(suc,"suc");
self.file.readAsBinaryString(p, fileName)
.then(function (success: any) {
console.log("readAsBinaryString sucess");
self._zone.run(() => {
self.attachments[id] = {
docName: onlyName,
docType: ext,
scoreDocument: btoa(success),
// scoreDocument: success,
delete: true
};
});
console.log("Attachment::",self.attachments[id]);
}).catch(function (error) {
console.log("readAsBinaryString fail", error);
});
}).catch(function (err) {
console.log("checkFile false");
console.log(err);
console.log(JSON.stringify(err));
});
}, self.failureCallback);
}).catch(e => console.log(e));
}, (err) => {
console.log(err);
})
}
I have tried the below scenarios:
a. Removed file check File function. With this there is no need to replace special characters but it does not work with Motorola devices. Resolve Native Path gives error.
b. If i replace special characters then check File function resolves to false.
I'm using the following code to download a file (can be a PDF or a DOC) and then opening it using Linking.
const { dirs } = RNFetchBlob.fs;
let config = {
fileCache : true,
appendExt : extension,
addAndroidDownloads : {
useDownloadManager : false,
notification : false,
title : 'File',
description : 'A file.',
path: `${dirs.DownloadDir}/file.${extension}`,
},
};
RNFetchBlob.config(config)
.fetch(
method,
remoteUrl,
APIHelpers.getDefaultHeaders()
)
.then((res) => {
let status = res.info().status;
if (status == 200) {
Linking.canOpenURL(res.path())
.then((supported) => {
if (!supported) {
alert('Can\'t handle url: ' + res.path());
} else {
Linking.openURL(res.path())
.catch((err) => alert('An error occurred while opening the file. ' + err));
}
})
.catch((err) => alert('The file cannot be opened. ' + err));
} else {
alert('File was not found.')
}
})
.catch((errorMessage, statusCode) => {
alert('There was some error while downloading the file. ' + errorMessage);
});
However, I'm getting the following error:
An error occurred while opening the file. Error: Unable to open URL:
file:///Users/abhishekpokhriyal/Library/Developer/CoreSimulator/Devices/3E2A9C16-0222-40A6-8C1C-EC174B6EE9E8/data/Containers/Data/Application/A37B9D69-583D-4DC8-94B2-0F4AF8272310/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_o259xexg7axbwq3fh6f4.pdf
I need to implement the solution for both iOS and Android.
I think the easiest way to do so is by using react-native-file-viewer package.
It allows you to Prompt the user to choose an app to open the file with (if there are multiple installed apps that support the mimetype).
import FileViewer from 'react-native-file-viewer';
const path = // absolute-path-to-my-local-file.
FileViewer.open(path, { showOpenWithDialog: true })
.then(() => {
// success
})
.catch(error => {
// error
});
So, I finally did this by replacing Linking by the package react-native-file-viewer.
In my APIHelpers.js:
async getRemoteFile(filePath, extension, method = 'GET') {
const remoteUrl = `${API_BASE_URL}/${encodeURIComponent(filePath)}`;
const { dirs } = RNFetchBlob.fs;
let config = {
fileCache : true,
appendExt : extension,
addAndroidDownloads : {
useDownloadManager : false,
notification : false,
title : 'File',
description : 'A file.',
path: `${dirs.DownloadDir}/file.${extension}`,
},
};
return new Promise(async (next, error) => {
try {
let response = await RNFetchBlob.config(config)
.fetch(
method,
remoteUrl,
this.getDefaultHeaders()
);
next(response);
} catch (err) {
error(err);
}
});
}
In my Actions.js
export function openDocument(docPath, ext) {
return async (dispatch) => {
dispatch(fetchingFile());
APIHelpers.getRemoteFile(docPath, ext).then(async function(response) {
dispatch(successFetchingFile());
let status = response.info().status;
if (status == 200) {
const path = response.path();
setTimeout(() => {
FileViewer.open(path, {
showOpenWithDialog: true,
showAppsSuggestions: true,
})
.catch(error => {
dispatch(errorOpeningFile(error));
});
}, 100);
} else {
dispatch(invalidFile());
}
}).catch(function(err) {
dispatch(errorFetchingFile(err));
});
}
}
In my Screen.js
import { openDocument } from 'path/to/Actions';
render() {
return <Button
title={'View file'}
onPress={() => this.props.dispatchOpenDocument(doc.filepath, doc.extension)}
/>;
}
.
.
.
const mapDispatchToProps = {
dispatchOpenDocument: (docPath, ext) => openDocument(docPath, ext),
}
Are you downloading it from the web? I can see the pdf path is attached at the end of the error path.
For web URLs, the protocol ("http://", "https://") must be set accordingly!
Try to append appropriate schemes to your path. Check it out from the link mentioned below.
This can be done with 'rn-fetch-blob'
RNFetchBlob.android.actionViewIntent(fileLocation, mimeType);
I have a custom file something like file.myext which I create it using rn-fetch-blob:
RNFetchBlob.fs.writeFile(path, JSON.stringify(data), 'utf8')
And I'm using react-native-share to share the file,
I tried both:
Share.open({type: 'text/plain', url: 'file://'+path})
and
RNFetchBlob.fs.readFile(path, 'base64')
.then((data) => {
Share.open({url: 'data:text/plain;base64,'+data})
})
but doesn't work, the second one share .txt file.
anyway to solve this?
Might help, when I was also looking into this, using react-native-fs I was able to do:
var path = RNFS.DocumentDirectoryPath + '/test.txt';
RNFS.writeFile(path, 'test', 'utf8')
.then(() => {
console.log('FILE WRITTEN!');
Share.open({
url: 'file://' + path,
})
.then(res => {
console.log(res);
})
.catch(err => {
err && console.log(err);
});
})
.catch(err => {
console.log(err.message);
});
There is the following problem in my React Native app. The app stored some PDF files as files and was able to access them. Then probably after recompilation the app started having problems accessing those files. However, the files are still there. I downloaded the app's full data container to check.
I have a suspicion it is because there is a dynamic part of the app's data container URI that always changes after recompilation followed by the actual path? e.g. D22506C1-9364-43A4-B3C7-F9FFF0E1CC48, 6BDC3F93-6BC3-4BB6-BD3F-9BFA7E4A4627
If so, what is the best practice to store URIs in React Native in database so they can be retrieved again?
The following 6 PDF files:
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/dk79lqddh3mlkcstqel9.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/e1exw1qg4cs6czktrfkfvi.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/zfy6hp3zf42me5ru32jfa.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/fum4qf23mwnzcmye39xau.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/D22506C1-9364-43A4-B3C7-F9FFF0E1CC48/Documents/Reports/btksznt1lxv7k4ey23bw93.pdf
ListViewItem.js:30 Debug: Report URI /var/mobile/Containers/Data/Application/6BDC3F93-6BC3-4BB6-BD3F-9BFA7E4A4627/Documents/Reports/smpkiggii4v7xmfhpnmdi.pdf
URIs as those can't be loaded at different places of the app:
Example 1
<Pdf style={styles.image} source={{ uri: 'file://' + this.props.pdf }} />
Example 2
FileService.readFileFromStorage('file://' + this.report.report_uri, 'base64')
static readFileFromStorage(path, encoding) {
return new Promise((resolve, reject) => {
RNFS.readFile(path, encoding)
.then((file) => {
resolve(file);
})
.catch((err) => {
console.log('Error: unable to read file', path, err.message);
reject(err)
});
})
}
This was used to write the files:
FileService.writeFiletoStorage(r.taskId, 'pdf', base64Str)
static writeFiletoStorage(fileName, extention, base64Str) {
return new Promise((resolve, reject) => {
RNFS.mkdir(RNFS.DocumentDirectoryPath + '/Reports')
var path = RNFS.DocumentDirectoryPath + '/Reports/' + fileName + '.' + extention;
return RNFS.writeFile(path, base64Str, 'base64')
.then((success) => {
console.log('FILE WRITTEN!', path, success);
resolve(path);
})
.catch((err) => {
console.log('Error: unable to write file to storage', path, err.message);
reject(err)
});
})
}
The method to write file was returning the full path, which varies across different compilations. Returning just the relative path works better:
static writeFiletoStorage(fileName, extension, base64Str) {
return new Promise((resolve, reject) => {
RNFS.mkdir(RNFS.DocumentDirectoryPath + 'Reports')
let path = '/Reports/' + fileName + '.' + extension;
let fullPath = RNFS.DocumentDirectoryPath + path;
return RNFS.writeFile(fullPath, base64Str, 'base64')
.then((success) => {
console.log('FILE WRITTEN!', fullPath, success);
resolve(path);
})
.catch((err) => {
console.log('Error: unable to write file to storage', fullPath, err.message);
reject(err)
});
})
}
Same change had to be made for method to read file:
static readFileFromStorage(path, encoding) {
return new Promise((resolve, reject) => {
let fullPath = RNFS.DocumentDirectoryPath + path;
RNFS.readFile(fullPath, encoding)
.then((file) => {
resolve(file);
})
.catch((err) => {
console.log('Error: unable to read file', fullPath, err.message);
reject(err)
});
})
}
i know this link: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files
but i would like to save the file in Downloads directory. Is this possible to save the file in any path using Ionic? If so, please, share the example.
Here's the code:
downloadImage(image) {
this.platform.ready().then(() => {
const fileTransfer: TransferObject = this.transfer.create();
const imageLocation = `${cordova.file.applicationDirectory}www/assets/img/${image}`;
fileTransfer.download(imageLocation, cordova.file.externalDataDirectory + image).then((entry) => {
const alertSuccess = this.alertCtrl.create({
title: `Download Succeeded!`,
subTitle: `${image} was successfully downloaded to: ${entry.toURL()}`,
buttons: ['Ok']
});
alertSuccess.present();
}, (error) => {
const alertFailure = this.alertCtrl.create({
title: `Download Failed!`,
subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`,
buttons: ['Ok']
});
alertFailure.present();
});
});
}
Basically I want save the file in location that is visible to the user.
the problem was lack of permission. Here is the working code that can download file to downloads directory:
async downloadFile() {
await this.fileTransfer.download("https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_960_720.jpg", this.file.externalRootDirectory +
'/Download/' + "soap-bubble-1959327_960_720.jpg");
}
getPermission() {
this.androidPermissions.hasPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
this.downloadFile();
}
else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if(status.hasPermission) {
this.downloadFile();
}
});
}
});
}
To download the File to the Download directory you need to use Cordova File and FileTransfer Plugins.
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
constructor(private transfer: FileTransfer) { }
fileTransfer: FileTransferObject = this.transfer.create();
//Use your File Url and name
downloadFile(file) {
// Some Loading
this.fileTransfer.download(url, this.file.externalRootDirectory +
'/Download/' + file).then(response => {
console.log(response);
this.dismissLoading();
this.presentToast('File has been downloaded to the Downloads folder. View
it..')
})
.catch(err => {
this.dismissLoading();
console.log(err)
});
}
Hope it helps.
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
constructor(private file: File, private transfer: FileTransfer){}
let link = 'url_to_download_file';
let path = '';
let dir_name = 'Download'; // directory to download - you can also create new directory
let file_name = 'file.txt'; //any file name you like
const fileTransfer: FileTransferObject = this.transfer.create();
let result = this.file.createDir(this.file.externalRootDirectory, dir_name, true);
result.then((resp) => {
path = resp.toURL();
console.log(path);
fileTransfer.download(link, path + file_name).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
console.log(error)
});
}, (err) => {
console.log('error on creating path : ' + err);
});
I know this is late, but I've always had issues with the FileTransfer plugin. Maybe it is just me. I've instead had success with the writeFile() method of the File plugin.
I'm still working on iOS, but for Android here is what I have:
import { File } from "#ionic-native/file";
constructor(private fileSystem: File) {}
Then, in whatever function you have the logic to save the file, we have:
let path = this.fileSystem.externalRootDirectory + '/Download/'; // for Android
let filename = 'myNewFile.pdf';
this.fileSystem.writeFile(path, filename, File, { replace: true }).then(() => {
this.toastCtrl.showToast('File has been downloaded. Please check your downloads folder.');
}, (err) => {
alert("Sorry. An error occurred downloading the file: " + err);
}
);
As I said, I'm still looking out for what path to use for iOS. And I'm still wondering how to pop up the notification that usually comes up when a download actually goes to the download folder. But at least I am able to save directly in the download folder of Android.
This code - ionic 3 capacitor - from josh morony takes a photo from the tmp directory and writes to the Document directory in this section using the FileSystem API the retrieves and manipulates the path
Filesystem.writeFile({
data: result.data,
path: fileName,
directory: FilesystemDirectory.Data
})
getFromPhotos() {
let options = {
resultType: CameraResultType.Uri
};
Camera.getPhoto(options).then(
(photo) => {
Filesystem.readFile({
path: photo.path
}).then((result) => {
// let date = new Date(),
// time = date.getTime(),
time = 'bilder',
fileName = time + '.jpeg';
Filesystem.writeFile({
data: result.data,
path: fileName,
directory: FilesystemDirectory.Data
}).then((result) => {
Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: fileName
}).then((result) => {
console.log(result);
let path = result.uri.replace('file://', '_capacitor_');
this.image = this.sanitizer.bypassSecurityTrustResourceUrl(path);
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
}
);
}
In ionic 3 you have to use the cordova File plugin - please google. It is pretty straight forward to understand: you define the original directory where the file is, the original name of the file, the target directory, and a new name for the file inside that function. The principle is the same.
To download the File to the Download directory you need to use Cordova File Plugin:
import { File } from '#ionic-native/file/ngx';
constructor(
private file: File,
) { }
this.file.writeFile(this.file.externalRootDirectory + '/Download/', user_log.xlsx, blob, { replace: true })
.then(() => {
alert('File has been downloaded. Please check your downloads folder.')
enter code here
},
(err) => {
alert("Sorry. An error occurred downloading the file: " + err);
enter code here
});
})
It works in Ionic 4 as well.