In this article, we are going to learn about How to download File in React Native iOS using URL. Before going to proceed with this React Native IOS example. I want you to go through my previous article which was written for How to download File in React Native Android. In this example, we are going to download xlsx file from URL. so I am not creating a whole project to example this because I have already posted an article on How to download File in React Native using URL. so we have to add conditions with respect to OS, as there are different option and configuration for Android & iOS.
In this post, we will discuss only the download xlsx function. and we are using rn-fetch-blob dependency to download files from servers from URL. To set up the project & dependency please visit this post
Before going forward in iOS you need to set up two properties in info.plist file under Information Property List section in XCode project.
- Application supports iTunes file sharing set to true
- Support opening documents in place set to true
1. Create async function
Create a new async function which will trigger on the download file button and pass fileUrl in parameter
downloadXlsxx = async fileUrl => { ... }
2. Define constants inside the function
Define the following constants inside the function.
var date = new Date();
const { dirs: {DownloadDir, DocumentDir} } = RNFetchBlob.fs;
const {config} = RNFetchBlob;
const isIOS = Platform.OS == "ios";
const aPath = Platform.select({ios: DocumentDir, android: DownloadDir});
const fPath = aPath + '/' + Math.floor(date.getTime() + date.getSeconds() / 2)+'.xlsx';
As you can see in the above definitions we have clearly mentioned the Directory path for Android & iOS. and make sure to add file extension at the end of the finalPath. In my case, the file is xlsx so I mentioned it statically as ‘.xlsx’. you can get this extension dynamically from the URL.
3. Create a configuration for the download API call
We have to configure the download parameter separately for Android iOS as given below
const configOptions = Platform.select({
ios: {
fileCache: true,
path: fPath,
// mime: 'application/xlsx',
// appendExt: 'xlsx',
//path: filePath,
//appendExt: fileExt,
notification: true,
},
android: {
fileCache: false,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: fPath,
description: 'Downloading xlsx...',
}
},
});
4. Download API response handling
Here is the code to handle the current download API response. also, pass constants configuration in it.
if (isIOS) {
config(configOptions)
.fetch('GET', fileUrl)
.then(res => {
this.setState({overLoader: false});
this.onResumeCall();
//this.refs.toast.show('File download successfully');
setTimeout(() => {
// RNFetchBlob.ios.previewDocument('file://' + res.path()); //<---Property to display iOS option to save file
RNFetchBlob.ios.openDocument(res.data); //<---Property to display downloaded file on documaent viewer
// Alert.alert(CONSTANTS.APP_NAME,'File download successfully');
}, 300);
})
.catch(errorMessage => {
this.setState({overLoader: false});
this.refs.toast.show(errorMessage,2000);
});
} else {
config(configOptions)
.fetch('GET', fileUrl)
.then(res => {
RNFetchBlob.android.actionViewIntent(res.path());
this.setState({overLoader: false});
this.refs.toast.show('File download successfully',2000);
})
.catch((errorMessage, statusCode) => {
this.setState({overLoader: false});
this.refs.toast.show(errorMessage,2000);
});
}
As you can see in the above code after getting success response from the server. we have to display the document on the viewer or we have to show the default iOS popup to select destination folder to save document manually.
I have added two options to display the downloaded document. also, I have added these properties on the set timeout method because these properties will not work properly sometimes this is the solution for the following errors
- Error: RNFetchBlob.ios.previewDocument is not working in React Native iOS
- Error: RNFetchBlob.ios.openDocument is not working in React Native iOS
The solution is to add setTimeout and call these properties into it.
setTimeout(() => {
RNFetchBlob.ios.previewDocument('file://' + res.path()); //<---Property to display iOS option to save file
RNFetchBlob.ios.openDocument(res.data); //<---Property to display downloaded file on documaent viewer
}, 300);
5. Source code for downloadXlsx file
downloadXlsxx = async fileUrl => {
var date = new Date();
const { dirs: {DownloadDir, DocumentDir} } = RNFetchBlob.fs;
const {config} = RNFetchBlob;
const isIOS = Platform.OS == "ios";
const aPath = Platform.select({ios: DocumentDir, android: DownloadDir});
const fPath = aPath + '/' + Math.floor(date.getTime() + date.getSeconds() / 2)+'.xlsx';
const configOptions = Platform.select({
ios: {
fileCache: true,
path: fPath,
// mime: 'application/xlsx',
// appendExt: 'xlsx',
//path: filePath,
//appendExt: fileExt,
notification: true,
},
android: {
fileCache: false,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: fPath,
description: 'Downloading xlsx...',
}
},
});
if (isIOS) {
config(configOptions)
.fetch('GET', fileUrl)
.then(res => {
this.setState({overLoader: false});
this.onResumeCall();
//this.refs.toast.show('File download successfully');
setTimeout(() => {
// RNFetchBlob.ios.previewDocument('file://' + res.path());
RNFetchBlob.ios.openDocument(res.data);
// Alert.alert(CONSTANTS.APP_NAME,'File download successfully');
}, 300);
})
.catch(errorMessage => {
this.setState({overLoader: false});
this.refs.toast.show(errorMessage,2000);
});
} else {
config(configOptions)
.fetch('GET', fileUrl)
.then(res => {
RNFetchBlob.android.actionViewIntent(res.path());
this.setState({overLoader: false});
this.refs.toast.show('File download successfully',2000);
})
.catch((errorMessage, statusCode) => {
this.setState({overLoader: false});
this.refs.toast.show(errorMessage,2000);
});
}
};
Use the above function to download a file from URL, make sure to specify file extension to file path
Thank you 🙂
