File Read/ Write Operation In WinJS Applications Using Windows Runtime Component

Article

As we know, WinJS applications are built using HTML/JS/CSS. And for a complete application, we will need async operations like SQLite database operations, web-service calls, and other native XML read-write, and file read-write which cannot be done directly in WinJS applications.

So we have to use Windows Runtime Component to access Native C# methods as discussed in my previous article,

WinJS application with Windows Runtime Component to access Native C# Code

I will show you how to create a text file and write some content in it. After that I will show you how to read that file and display the file content in our HTML page.

Step 1:

Firstly, create a WinJS project as discussed in in my following article. For that we will start with creating a blank Universal Windows App: Please have a look in my previous article: Create Your First WinJS Application

Step 2:

We need to do following things as discussed in my previous article,

Add a Windows Runtime Component project and name it ‘WinRuntimes’
Delete default class ‘Class1.cs’
Add a new class and name it ‘Service’
Add WinRuntimes reference in WinJS project
Build the project

Step 3:

In Service class, we have to create IAsyncOperation for CreateFile() and ReadFile(). IAsyncOperation represents an asynchronous operation, which returns a result upon completion. This is the return type for many Windows Runtime asynchronous methods that have results but don't report progress. Find more in MSDN.

In CreateFile function, we will pass fileName and fileContent as parameters whereas in ReadFile, we pass filename with the return type string to return the filecontent.

Complete code snippet for Service class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Storage;
namespace WinRuntimes
{
public sealed class Service
{
public IAsyncOperation<string> CreateFile(string fileName, string fileContent)
{
return CreateFileHelper(fileName, fileContent).AsAsyncOperation();
}
public IAsyncOperation<string> ReadFile(string fileName)
{
return ReadFileHelper(fileName).AsAsyncOperation();
}
private async Task<string> CreateFileHelper(string fileName, string fileContent)
{
try
{
fileName = fileName + ".txt";
StorageFolder folder = ApplicationData.Current.LocalFolder;
StorageFile file = await folder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
await FileIO.WriteTextAsync(file, fileContent);
return "success";
}
catch (Exception ex)
{
return "fail";
}
}
private async Task<string> ReadFileHelper(string fileName)
{
try
{
fileName = fileName + ".txt";
StorageFolder folder = ApplicationData.Current.LocalFolder;
StorageFile file = await folder.GetFileAsync(fileName);
string fileContent = await FileIO.ReadTextAsync(file);
return fileContent;
}
catch (Exception ex)
{
return "fail";
}
}
}
}

Step 4:

Add a script.js file and reference it in default.html:

Now in default.html, lets add following things:

Input field for file name.
Input field for file content to write in file
Button with click event to create file
Button with click event to read file
Div element to display the file content.

Complete html code snippet for default.html is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinJS_FileOperations</title>
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/script.js"></script>
</head>
<body style="margin-left:400px">
<p>WinJS File Read Write Operations</p>
<input id="txtFileName" placeholder="Enter File Name"/>
<br />
<input type="text" id="txtFileContent" placeholder="Enter File Content"/>
<button id="btnCreateFile" onclick="createFile()">Create File</button>
<br />
<br />
<br />
<button id="btnReadFile" onclick="readFile()">Read File</button>
<br />
<br />
<br />
<div id="divFileContent"></div>
</body>
</html>

Step 5:

In script.js, we create a service object of Service class and call the createFile and readFile functions to create and read files respectively. Here we have used then function to achieve asynchronous programming.

Complete code snippet for script.js is:

var service = new WinRuntimes.Service();
function createFile() {
var fileName = document.getElementById("txtFileName").value;
var fileContent = document.getElementById("txtFileContent").value;
service.createFile(fileName, fileContent).then(function (response) {
if (response == "success") {
console.log("File Create Successfully");
}
else {
console.log("File creation failed");
}
});
}
function readFile() {
var fileName = document.getElementById("txtFileName").value;
service.readFile(fileName).then(function (fileContent) {
if (fileContent != "fail") {
document.getElementById("divFileContent").innerHTML = fileContent;
}
});
}

Step 6:

Run the application and enter file name and file content and click Create File button.

You can see the new file just created in: Go to "This PC", C, Users > [Your User Name] > AppData, Local, Packages > [App package name] > LocalState,