This article will focus on copying a file from one location and save it to another location using WinJS Metro Style Applications.
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