Complete guide of File handling in Ionic

Introduction

File handling is always a nightmare for developers and as applications are going more and more complex these days, the need of handling files and directory is also increasing. I was also going through this phase so i decided to write a simple blog which will help developers to understand the practicality of file handling on Ionic and Cordova platform.

In this tutorial, we will learn how to Create, Read and Delete a file or a directory in ionic applications.

Prerequisites

Before proceeding further, you must have installed Ionic and Cordova in your system and you also must have a project to work on. If you do not have a project , make one by following this process.

⚠️ In this tutorial, I have Ionic v1 ( 2.1.18 ) and Cordova ( 7.0.0 ) installed. Also, all the code written below is tested on Android Platform only. On other platforms, may be there will be some changes in the code.

⚜️ Important Things

• In this tutorial, we are using cordova-plugin-file. Make sure to first install this into the project by executing this command :
  cordova plugin add cordova-plugin-file
• All the code below should be execute after .ready event. It means you have to execute these code snippets when device is completely ready.
  For this, we can use $ionicPlatform.ready() of ionic. You can also use native javascript .ready event.

$ionicPlatform.ready(function() {
      // Add your code here
  });

Thats it! Lets do some code now… 🤓

Creating a directory

In order to create a directory, we are first resolving the local file system by calling window.resolveLocalFileSystemURL function which will take two parameters. First parameter will be the directory path where you want to create the directory. This path varies with different platforms.

📌 Click here to get the list of all the valid paths that you can use.

Here on line 9, { create: true } is responsible for creating the directory. It will check for the directoryToPresent in the parentDirectory.

• If it found the directory, it will do nothing to that directory and will execute successHandler.
• If it didn’t found any directory named directoryToCreate, it will create a directory and will execute successHandler.
• If there will any error while creating directory. It will execute errorHandler.

Creating a file

There are a lot of ways to create a file. The only requirement is to have its content. It is good to have its content as base64 string. The following code will write base64 string to a file. It isn’t matter you have base64 string of an image, a mp3 file or a document file.

Here we are passing savebase64AsFile four parameters :

• folderPath : Path to the directory in which you want to save file.
• fileName : Name of the file
• base64 : base64 string of the file you want to write.
• contentType : Type of the base64 string. i.e image/jpeg

Here we are converting base64 to a blob by passing base64 string to a function named as b64toBlob. This function is defined as given below.

Read a file

To read a file, we just need a path to that file and pass that path to this function.

Here we are first retrieving the file using resolveLocalFileSystemURL and then getting the content of the file using FileReader(). You can have the content of the file in event.target.result as base64 string.

Removing a Directory

To remove a directory and all of its contents, we will use a special function of this plugin called as removeRecursively. This function takes two parameters, one is success callback and other is error callback.

⚠️ This function will remove the directory and all of its content without throwing any error. Be sure before executing this function.

Removing a file

In order to remove a single file from file system, we will pass the path to that file and use remove function of plugin to remove the file.

In the last..

This far we learned about how to handle directory and files in ionic and cordova. I hope this will help you guys.

Happy Coding!!

If you like this article, please give it some👏 or share it!.

For more like this, follow me on Medium or Twitter. To ask a Question visit this link. More about me on mywebsite.

Don’t forget to subscribe our weekly-newsletter service for web hackers. All latest articles and stuff like trending repositories, straight to your mailbox.