Introduction
In this section we will present how to work with a file picker control in Windows 8. We have to develop a simple file picker. Metro Style Applications are powered by HTML 5, CSS 3 and JavaScript, but also by Visual Basic / C# and C / C++. With the help of the simple example we will use a file picker control with a number of items. We have to select an option and give an output according to the given input. We have to choose a folder, file, and any photos in our system where we have to store. The file picker control contains a list of items.
In this example we take four items and choose any items in the given options. After that we get output depending on the input. So, we use these steps for working with the file picker control.
Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File>New>Project
- Choose Template>JavaScript> Blank Application
- Rename this Application
![home.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; .js and .html files. In the images folder add any image in this application.
![solutionexplorer.gif]()
Step 3 : The default.html page contains this body part with the following code:
Code : default.html
<body role="application" style="background-color:#eeee9c">
<div id="rootGrid">
<div id="header" role="contentinfo"></div>
<div id="content">
<h1 id="featureLabel">File picker</h1>
<h2 id="inputLabel">List of Items</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel">Select any Optionss</h3>
<select size="4" id="scenarios" aria-labelledby="listLabel" style="background-color:#eeee9c">
<option selected="selected" value="1" style="background-color:#ff6a00">1) Choose a single photo</option>
<option value="2" style="background-color:#ffd800">2) Choose multiple files</option>
<option value="3" style="background-color:#b6ff00">3) Choose a folder</option>
<option value="4" style="background-color:#4cff00">4) Save a file</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">Description</h3>
<!-- item 1 Input -->
<div class="item" id="scenario1Input">
<p>The user pick a single photo.</p>
<button class="action" id="scenario1Open" style="background-color:#f00">Choose photo</button>
<br /><br />
</div>
<!-- item 2 Input -->
<div class="item" id="scenario2Input">
<p>The user pick one or more files.</p>
<button class="action" id="scenario2Open" style="background-color:#f00">Choose files</button>
<br /><br />
</div>
<!-- item 3 Input -->
<div class="item" id="scenario3Input">
<p>The user pick a folder so its contents can be accessed later.</p>
<button class="action" id="scenario3Folder" class="action" style="background-color:#f00">Choose folder</button>
<br /><br />
</div>
<!-- item 4 Input -->
<div class="item" id="scenario4Input">
<p>The user save a file.</p>
<button class="action" id="scenario4Save" class="action" style="background-color:#f00">Save file</button>
<br /><br />
</div>
</div>
</div>
<h2 id="outputLabel">Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<!-- Item 1 Output -->
<div class="item" id="scenario1Output">
</div>
<!-- Item 2 Output -->
<div class="item" id="scenario2Output">
</div>
<!-- Item 3 Output -->
<div class="item" id="scenario3Output">
</div>
<!-- Item 4 Output -->
<div class="item" id="scenario4Output">
</div>
</div>
</div
<div id="footer" role="contentinfo"></div>
</div>
</body>
Step 4 : In this application the JavaScript file has the following code.
Code : This code is only for one item 1, the same as we have to complete the other part as below.
(function () {
function id(elementId) {
return document.getElementById(elementId);
}
// Item 1
function pickSinglePhoto() {
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
openPicker.pickSingleFileAsync().then(function (file) {
if (file) {
// Application read/write access to the picked file
sdkSample.displayStatus("Picked photo: " + file.name);
} else {
sdkSample.displayStatus("File was not returned");
}
});
}
function initialize() {
id("scenario1Open").addEventListener("click", pickSinglePhoto, false);
id("scenario2Open").addEventListener("click", pickMultipleFiles, false);
id("scenario3Folder").addEventListener("click", pickFolder, false);
id("scenario4Save").addEventListener("click", saveFile, false);
id("scenarios").addEventListener("change", onScenarioChanged, false);
}
function onScenarioChanged() {
sdkSample.displayStatus("");
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();
Step 5 : After running this application we have to see this figure. In this figure there are many options but we have to choose the first option as below:
![output1.gif]()
After choosing a single photo option and clicking on choose photo button we get this screen. In this screen we have to find the photos in the file picture and select this picture. We choose this file sorted by name or sorted by date and click on the save button as in the following figure:
![output2.gif]()
After selecting this picture this file shows in a given screen, then click on the open button.
![output3.gif]()
After clicking on the open button this file is saved and we get an output this file as shown in the following figure. The same as other options as in the first options.
![output4.gif]()