How to Create File in Windows Store Apps Using JavaScript

Introduction

In this article I describe how to create a file using Windows Store apps. In this article I have create a sample.dat file .I assume that you can create simple Windows 8 apps if you face any problem than you can visit for creating this apps you create a simple Windows 8 style app using JavaScript and than add a folder named html by right-clicking on the solution name and than another folder named app-util. In app-util you add the following pages:

Three html pages:

  1. header.html
  2. footer.html
  3. select.html

A JavaScript page:
             util.js

A CSS file:
            util.css

file-create-windows-store-apps.png

In your header.html you write the following code:

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <span>Windows app sample</span>

</body>

</html>

In your footer.html you write the following code:

 

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="company" class="company"><span>Copyright © Middha Corporation. All rights reserved.</span></div>

</body>

</html>

In your select.html you write the following code:

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div class="options">

        <h3 id="listLabel">Select page:</h3>

        <select id="scenarioSelect" aria-labelledby="listLabel">

        </select>

    </div>

</body>

</html>

In your util.js you write the following code:

 

(function () {

 

    var lastError = "";

    var lastStatus = "";

    var ScenarioInput = WinJS.Class.define(

        function (element, options) {

            element.winControl = this;

            this.element = element;

 

            new WinJS.Utilities.QueryCollection(element)

                        .setAttribute("role", "main")

                        .setAttribute("aria-labelledby", "inputLabel");

            element.id = "input";

 

            this.addInputLabel(element);

            this.addDetailsElement(element);

            this.addScenariosPicker(element);

        }, {

            addInputLabel: function (element) {

                var label = document.createElement("h2");

                label.textContent = "Input";

                label.id = "inputLabel";

                element.parentNode.insertBefore(label, element);

            },

            addScenariosPicker: function (parentElement) {

                var scenarios = document.createElement("div");

                scenarios.id = "pages";

                var control = new ScenarioSelect(scenarios);

 

                parentElement.insertBefore(scenarios, parentElement.childNodes[0]);

            },

 

            addDetailsElement: function (sourceElement) {

                var detailsDiv = this._createDetailsDiv();

                while (sourceElement.childNodes.length > 0) {

                    detailsDiv.appendChild(sourceElement.removeChild(sourceElement.childNodes[0]));

                }

                sourceElement.appendChild(detailsDiv);

            },

            _createDetailsDiv: function () {

                var detailsDiv = document.createElement("div");

 

                new WinJS.Utilities.QueryCollection(detailsDiv)

                            .addClass("details")

                            .setAttribute("role", "region")

                            .setAttribute("aria-labelledby", "descLabel")

                            .setAttribute("aria-live", "assertive");

 

                var label = document.createElement("h3");

                label.textContent = "Description";

                label.id = "descLabel";

 

                detailsDiv.appendChild(label);

                return detailsDiv;

            },

        }

    );

 

    var ScenarioOutput = WinJS.Class.define(

        function (element, options) {

            element.winControl = this;

            this.element = element;

            new WinJS.Utilities.QueryCollection(element)

                        .setAttribute("role", "region")

                        .setAttribute("aria-labelledby", "outputLabel")

                        .setAttribute("aria-live", "assertive");

            element.id = "output";

 

            this._addOutputLabel(element);

            this._addStatusOutput(element);

        }, {

            _addOutputLabel: function (element) {

                var label = document.createElement("h2");

                label.id = "outputLabel";

                label.textContent = "Output";

                element.parentNode.insertBefore(label, element);

            },

            _addStatusOutput: function (element) {

                var statusDiv = document.createElement("div");

                statusDiv.id = "statusMessage";

                element.insertBefore(statusDiv, element.childNodes[0]);

            }

        }

    );

 

    var ScenarioSelect = WinJS.UI.Pages.define("/app-util/select.html", {

        ready: function (element, options) {

            var that = this;

            var selectElement = WinJS.Utilities.query("#scenarioSelect", element);

            this._selectElement = selectElement[0];

 

            SdkSample.scenarios.forEach(function (s, index) {

                that._addScenario(index, s);

            });

 

            selectElement.listen("change", function (evt) {

                var select = evt.target;

                if (select.selectedIndex >= 0) {

                    var newUrl = select.options[select.selectedIndex].value;

                    WinJS.Navigation.navigate(newUrl).then(function () {

                        setImmediate(function () {

                            document.getElementById("scenarioSelect").setActive();

                        });

                    });

                }

            });

            selectElement[0].size = (SdkSample.scenarios.length > 5 ? 5 : SdkSample.scenarios.length);

            if (SdkSample.scenarios.length === 1) {

                // Avoid showing down arrow when there is only one scenario

                selectElement[0].setAttribute("multiple", "multiple");

            }

        },

 

        _addScenario: function (index, info) {

            var option = document.createElement("option");

            if (info.url === currentScenarioUrl) {

                option.selected = "selected";

            }

            option.text = (index + 1) + ") " + info.title;

            option.value = info.url;

            this._selectElement.appendChild(option);

        }

    });

 

    function activated(e) {

        WinJS.Utilities.query("#featureLabel")[0].textContent = SdkSample.sampleTitle;

    }

 

    WinJS.Application.addEventListener("activated", activated, false);

 

    // Export public methods & controls

    WinJS.Namespace.define("SdkSample", {

        ScenarioInput: ScenarioInput,

        ScenarioOutput: ScenarioOutput

    });

 

    // SDK Sample Test helper

    document.TestSdkSample = {

        getLastError: function () {

            return lastError;

        },

 

        getLastStatus: function () {

            return lastStatus;

        },

 

        selectScenario: function (scenarioID) {

            scenarioID = scenarioID >> 0;

            var select = document.getElementById("scenarioSelect");

            var newUrl = select.options[scenarioID - 1].value;

            WinJS.Navigation.navigate(newUrl).then(function () {

                setImmediate(function () {

                    document.getElementById("scenarioSelect").setActive();

                });

            });

        }

    };

})(); 


In your html folder add a new HTML page named page1.html and use the following code in it:
 

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <script src="/js/page1.js"></script>

    </head>

    <body>

         <div data-win-control="SdkSample.ScenarioInput">

        <p>Creates a'sample.dat'file</p>

        <button id="createFile">Create </button>

        <br /><br />

    </div>

    <div data-win-control="SdkSample.ScenarioOutput">

        <div id="output"></div>

    </div>

    </body>

</html>

In your default.html you write the following code:
 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>SDK Sample</title>

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link rel="stylesheet" href="/app-util/util.css" />

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/app-util/util.js"></script>

    <script src="/js/default.js"></script>

</head>

<body role="application">

    <div id="rootGrid">

        <div id="header" role="contentinfo" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/app-util/header.html'}"></div>

        <div id="content">

            <h1 id="featureLabel"></h1>

            <div id="contentHost"></div>

        </div>

        <div id="footer" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/app-util/footer.html'}"></div>

    </div>

</body>

</html>



In your default.js you write the following code:

(function () {

    "use strict";

 

    var sampleTitle = "File access JS sample";

 

    var sampleFile = null;

    var mruToken = null;

    var falToken = null;

 

    var scenarios = [

        { url: "/html/page1.html", title: "Creating a file" }

    ];

    function activated(eventObject) {

        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

 

            eventObject.setPromise(WinJS.UI.processAll().then(function () {

 

                var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;

                return WinJS.Navigation.navigate(url);

            }));

        }

    }

    WinJS.Namespace.define("SdkSample", {

        sampleTitle: sampleTitle,

        scenarios: scenarios,

        sampleFile: sampleFile,

        mruToken: mruToken,

        falToken: falToken

    });

    WinJS.Application.addEventListener("activated", activated, false);

    WinJS.Application.start();

})();

Add aonther JavaScript file named page1.js and the following code:

(function () {

    "use strict";

 

    var page = WinJS.UI.Pages.define("/html/page1.html", {

        ready: function (element, options) {

            document.getElementById("createFile").addEventListener("click", createFile, false);

        }

    });

 

    function createFile() {

        Windows.Storage.KnownFolders.documentsLibrary.createFileAsync("sample.dat", Windows.Storage.CreationCollisionOption.replaceExisting).done(

        function (file) {

            SdkSample.sampleFile = file;

            var outputDiv = document.getElementById("output");

            outputDiv.innerHTML = "The file '" + SdkSample.sampleFile.name + "' was created.";

        },

        function (error) {

            WinJS.log && WinJS.log(error, "sample", "error");

        });

    }

})(); 


Run your app; your output will look like the following:

output-windows-store-apps.png

Up Next
    Ebook Download
    View all
    Learn
    View all