Let us learn about File Picker Controls in Windows Metro using HTML, CSS and JavaScript - DAY 5

Introduction

Today we will learn about various File Picker Examples which are as under

1. Open a single file
2. Open multiple files
3. Open a folder
4. Save a file

1.Open a single file

In this case we will look into as how we can open a single file .Let us see the javascript file

function OpenSingleFile(event) 
{
	//create an object of FileOpenPicker
	var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

	//restrict the file types to image file types
	openPicker.fileTypeFilter.replaceAll([".png", ".bmp", ".dib", ".jpg", ".jpeg", ".jpe", ".gif", ".tif", ".tiff"]);

	// PickSingleFileAsync method restricts the user to open only one single file at a time
	openPicker.pickSingleFileAsync().then(function (file) {
		if (file) {
			document.getElementById("lblSelectedFileName").innerText = file.name;
		} else {
			document.getElementById("lblSelectedFileName").innerText = "No file selected";
		}
	}
	//Handle any error
	, function (error) {
		document.getElementById("lblSelectedFileName").innerText = error.detail;
	}
	
	);        
}

Now let us understand as what is happening in the function.Initially we are creating an instance of the FileOpenPicker.It has a property call FileTypeFilter that stores a collection of file types that the file open picker displays.In this case we are restricting our file type to the image files.The image files are stored at "Libraries\Pictures".The PickSingleFileAsync ensures that we are opening only one file at a time.Finally depending on the file choosen or not the result will be displayed.

2.Open multiple files

In this case we will look into as how we can open multiple files.Let us see the Javascript function

function OpenMultipleFiles(event) 
{

	//create an object of FileOpenPicker
	var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

	//restrict the file types to image file types
	openPicker.fileTypeFilter.replaceAll([".png", ".bmp", ".dib", ".jpg", ".jpeg", ".jpe", ".gif", ".tif", ".tiff"]);

	// PickMultipleFileAsync method allows the user to choose multiple files
	openPicker.pickMultipleFilesAsync().then(function (files) {

		//if user has choosen atleast one file
		if (files.size > 0) {               
			var filesChoosen = "";

			for (var i = 0; i < files.size; i++)
			{
				filesChoosen += files[i].name + "\n";
			}
			document.getElementById("lblSelectedFileName").innerText = filesChoosen;
		} else {               
			document.getElementById("lblSelectedFileName").innerText = "No file selected";
		}
	}
	 //Handle any error
	, function (error) {
		document.getElementById("lblSelectedFileName").innerText = error.detail;
	}

	);
}

As can be figure out that the program is similar to the previous one.But here we are using the PickMultipleFileAsync method which allows the user to choose multiple files and returns an array.Once done, we are then looping through the files and displaying them

3.Open a folder

In this case we will look into as how we can open a folder.Let us see the Javascript function

function OpenFolder(event) 
{
	// Create the picker object and set options
	var folderPicker = new Windows.Storage.Pickers.FolderPicker;

	//user can choose any files
	folderPicker.fileTypeFilter.replaceAll(["*"]);

	folderPicker.pickSingleFolderAsync().then(function (folder) {
		if (folder) {               
			document.getElementById("lblSelectedFileName").innerText = folder.name;
		} else {
			// The picker was dismissed with no selected file
			document.getElementById("lblSelectedFileName").innerText = "No folder selected";
		}
	}
	 //Handle any error
	, function (error) {
		document.getElementById("lblSelectedFileName").innerText = error.detail;
	}

	);
}

Initially we are creating an instance of the "FolderPicker". The PickSingleFolderAsync function hepls to pick a folder.And once done, we are finally displaying the folder name

4.Save a file

In this case we will look into as how we can save a file.Let us see the Javascript function

function SaveFile(event) 
{
	// Create the picker object 
	var savePicker = new Windows.Storage.Pickers.FileSavePicker();

	//Default location is desktop
	savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;

	//Only text  files can be saved
	savePicker.fileTypeChoices.insert("Plain Text", [".txt", ]);

	// Default file name
	savePicker.suggestedFileName = "Niladri File";

	//Saves file
	savePicker.pickSaveFileAsync().then(function (file) {
		if (file) {


			Windows.Storage.FileIO.writeTextAsync(file, FileContent()) //write the content to file
				.done(function () {
					document.getElementById("lblSelectedFileName").innerText = "The file " + file.name + " has been saved";
				});
		} else {
			document.getElementById("lblSelectedFileName").innerText = "You didnot save the file";
		}
	}
	//Handle any error
	, function (error) {
		document.getElementById("lblSelectedFileName").innerText = error.detail;
	}

	);
}

function FileContent() 
{

	var content = "Hi..Write the content here";
	return content;
}

Intially we are creating an instance of the FileSavePicker object.Then we are specifying the default locatrion of where the file need to be saved (which is Desktop here).After that we are restricting the type of file that needs to be saved(it is only Text here). The PickSaveFileAsync function helps to save a file and set the file name, extension, and location of the file to be saved.The WriteTextAsync function helps to write text to the specified file.Finally we are displaying the successful message.

We will find the file as

For more information, please read 31 Days of Windows 8 | Day #19: File Picker

Conclusion

In this article we have seen some of the functionalities of File Picker Control. We will explore more in subsequent articles.Experimrnt file is attached herewith.Thanks for reading