---
title: "Cordova - File System"  
description: "There are times when you have to use or manipulate file system manager through the app. You can integrate the file system into your app using the file"  
author: "Anonymous User"  
published: 2017-04-25  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11363/cordova-file-system  
category: "apache cordova"  
tags: ["mobile development", "file", "apache", "cordova"]  
reading_time: 2 minutes  

---

# Cordova - File System

There are times when you have to use or manipulate [file system](https://www.mindstick.com/forum/157850/what-is-a-file-system-explain-it-s-used-in-system-software) manager through the app. You can integrate the file system into [your app](https://answers.mindstick.com/qa/33368/how-will-you-design-a-listview-which-downloads-a-lot-of-images-and-displays-in-it-without-getting-your-app-hanged-whats-the-best-possible-way) using the file System plugin in **apache**Cordova.\

This plugin is used for manipulating native file system on the user's device.it also involves the similar steps as in the case with the [previous](https://yourviews.mindstick.com/view/81421/unlock-2-0-is-just-like-previous-corona-lockdowns) plungins.

**Step 1 – Install the File Plugin**

To install this plugin, open [command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt) and run the piece of code below:

```
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file
```

**Step 2 - Adding Buttons**

Now, you have to add four buttons in **index.html** to create file, write to file, read it and delete it. Also, I have added an extra button [textarea](https://www.mindstick.com/forum/155821/how-we-will-generate-textarea-control-using-htmlhelper-in-razor-view) where content of our file will be shown.

```
<button id = "creatingFile">CREATE FILE</button>
<button id = "writingFile">WRITE FILE</button>
<button id = "readingFile">READ FILE</button>
<button id = "removingFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>
```

**Step 3 - Adding [Event Listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**

You will [add event](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) listeners in **index.js** inside **onDeviceReady** function to make sure that everything has started before the plugin is used.

```
document.getElementById("createFile").addEventListener("click", creatingFile);
document.getElementById("writeFile").addEventListener("click", writingFile);
document.getElementById("readFile").addEventListener("click", readingFile);
document.getElementById("removeFile").addEventListener("click", removingFile);
```

**Step 4A - Create [File function](https://www.mindstick.com/forum/23051/calling-js-file-function-from-code-behind)**

On the device, the file will be created in [root folder](https://www.mindstick.com/forum/486/jquery-file-in-root-folder) of the app. You need to grant **superuser** access to your folders to be able to access root folder. In this case the path to root folder is \data\data\com.example.newapp\cache. At present, this folder is empty.

![Cordova - File System](https://www.mindstick.com/blogs/03d723e0-ad6b-4cc1-be20-9ecbe3b70dce/images/3125544d-9857-4b70-8363-701f40a71c04.png)\

Now, you have to add function that will create the **log.txt file.** You will write this code in **index.js file**.

We are first requesting the file system. This method uses four parameters type, it can be **WINDOW.TEMPORARY or WINDOW.PERSISTENT**.

Size is value in bytes that will be required for storage (5MB in this case).

```
function creatingFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024; 
   window.requestFileSystem(type, size, successCallback, errorCallback)
   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}
```

Now when you will press **CREATE FILE** button the alert will confirm that the file created successfully.

---

Original Source: https://www.mindstick.com/blog/11363/cordova-file-system

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.