Copy a file from one location and save it to another location using WinJS Metro Style Applications - Day 9

Niladri.Biswas
Posted by in Windows Metro category on for Beginner level | Points: 250 | Views : 5601 red flag
Rating: 5 out of 5  
 1 vote(s)

This article will focus on copying a file from one location and save it to another location using WinJS Metro Style Applications.


 Download source code for Copy a file from one location and save it to another location using WinJS Metro Style Applications - Day 9

Introduction

In one of my previous article, we have learnt about the usage of File Picker Controls in Windows Metro using HTML, CSS and JavaScript.Armed with the knowledge of that article,this article will focus on copying a file from one location and save it to another location using WinJS Metro Style Applications.

Straight to experiment

We will see the demo by copying a text file from one location to another.Next visit the "default.html" page and write the below code inside the "body" tag

<body>
    <button id="btnOpen">Open an image file</button>
    <button id="btnSave" disabled>Save the file</button>
	<p> <label id="lblSelectedFileName"></label></p>
</body>

When the page loads the first time, the "Save" button is disabled.It will be enabled, once there will be a file to copy.

Now, let us look into the "OpenFile" function as given below

function OpenFile(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) 
		{
			selectedFile = file; //store the selected file
			btnSave.disabled = false;
		} 
	}
	//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 PickSingleFileAsync ensures that we are opening only one file at a time.Once the file is choosen, we are storing it into a shared variable call "selectedFile" and the "Save" button is Enabled.

The Save file function goes as under

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

	//Only the selected image file can be save
	savePicker.fileTypeChoices.insert(selectedFile.displayType, [selectedFile.fileType]);

	//Display the default file name...user can change the name also
	savePicker.suggestedFileName = selectedFile.name;

	//Saves file
	savePicker.pickSaveFileAsync().then(function (file)
		{
			if (file)
			{
				selectedFile.copyAndReplaceAsync(file);
				
				document.getElementById("lblSelectedFileName").innerText = "The file " + file.name + " has been saved";
			}
		}

		//Handle any error
		, function (error)
		{
			document.getElementById("lblSelectedFileName").innerText = error.detail;
		}
	);
}

Once the file has been selected, it is available in the "selectedFile" variable.We are using the copyAndReplaceAsync() method that replaces the specified file with a copy of the current file.

Running the application

Initial screen will look as under

Next click on the "Open an image file" button and choose a file by right clicking on it.Finally click the "Open" button.

We can make out that the "Save" button has now been enabled.

Now click on the "Save" button.And choose a suitable folder where the file needs to be saved.

Click on "Save".A confirmation message about the same will appear

Now visit the location and see the image has been copied over there

Conclusion

So in this article we have seen how to copy a file and save it to a location. Zipped file for the experiment is attached. Thanks for reading

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)