Search This Blog

Downloading & opening a file in an Ionic app

If you search the Internet for examples to achieve the above, you'll get a number of resources that suggest using the cordova-file-transfer plugin. However, with Ionic 3+ and its native API, you can do this directly using a mix of Angular and Ionic File API.

Essentially, you need to use Angular HttpClient to download a URL as a Blob using the responseType option and then save the resultant Blob to a file on the device using the File API. Finally, open the saved file using the Ionic native FileOpener API.

Here's the method in a provider that is used to download files from a website. Note that this.http is an instance of HttpClient.

One of the key points here is that the responseType: 'blob' allows us to retrieve the file type as determined by the server which we can use as argument to the FileOpener API to open the file.

The argument observe: 'response' is not really necessary and can be left out. In this case, the subscribe handler will get the blob object as its argument instead of the higher level HTTP response object.

The call to File.createDir() ensures that the Download folder is created and available before the downloaded content is saved into it.

Finally the call to File.writeFile() saves the file and the function returns the FileEntry return value from this call.

This being a method in a service, it only downloads the file saving it to the device storage. How the saved file is to be processed is left to the page that initiated the download request to decide.

Important thing to note here is that we're supplying the FileEntry.nativeURL as the first argument to the open() method. Also, the Blob.type that the server returned to us through HttpClient.get() can be used as second argument to help the device determine the most appropriate application to open the file with.

If there are no applications associated with the given file type, open() would result in an error, which should be caught and reflected to the user with an appropriate message.