Many applications make use of a network drive to backup and store files. When I was in university I found myself constantly coding for fun, and one example took the form of a network share for my roommates to share files wrapped in a handy little app.<\/p>\n
Unfortunately, that particular app has long since been erased from whichever hard drive it was initially birthed. Fortunately, I think we can reinvent this magical piece of software (albeit to a scoped degree) with Azure Blob Storage<\/a>. In the past, network drives did the trick, but Azure Storage offers users automatic backups, better flexibility and global availability, all at a very low cost<\/a> (or no cost if you are using free Azure credits<\/a>).<\/p>\n I took my partial memory of the general skeleton of the former masterpiece and rewrote it using Blobs as the backing file store. We are going to build this app as it was in its glory days, which means we need a few things.<\/p>\n I’ll build this app in WPF<\/a> using Visual Studio 2017<\/a> and the Azure Storage for .NET<\/a> library. While I made the choice to build this sample in WPF, the Azure Storage portions work with any .NET app type including Windows Forms, ASP.NET, Console, etc.<\/p>\n At its core, the app needs to display the current state of the blob account in a human-consumable fashion. In a stroke of ingenuity, I decided to represent the containers, directories, and blobs as a TreeView<\/a>.<\/p>\n As expected, we must build a tree for each container. First, we must obtain a flat list of the blobs in the container.<\/p>\n The The above two listings takes a flat list of blobs.<\/p>\n Subsequent to Now that we have built the The first of our three action buttons downloads a blob. As I mentioned earlier, Blob storage makes this task excessively simple.<\/p>\n This method takes the currently selected Both Downloading blobs is only half the excitement: we need the ability to upload blobs, as well.<\/p>\n Upon selecting a directory, the “upload” button enables the user to select a file and upload it into the Storage directory.<\/p>\n Similar to the download method, the upload method prompts the user for a file, and uploads the file into a blob of the same name into the, currently selected, directory. Again, most of the method is simply gathering the proper data, while the Storage library simplifies the operation into one call ( After muddying up my test storage account with a bunch of uploaded files, I decided it was time to implement the ability to delete blobs.<\/p>\n Selecting a block blob in the tree will also allow the user to delete the selected blob.<\/p>\n As was the case for downloading blobs, the As I mentioned previously, the Azure Storage solution we built is applicable to any type of .NET Application. I decided to use WPF, but the choice for this specific endeavour was made out of a personal love for XAML.<\/p>\n As a former developer on the XAML<\/a> Developer Platform Team in Windows, I am always excited to stretch my XAML skills after a long time off. Despite getting back into it, I did not really have much to do. So little, in fact, I decided to completely ignore using So, there we have it. We have built an app that acts as a network drive using Azure Blob Storage. Implementing more operations and polishing th UI is merely an exercise in elbow grease. If you would like to try out this app, or use the code we went through as a base, take a look at the source<\/a>.<\/p>\n I hope the work we did here excites you to take existing applications or ideas and port them to equivalent functionality in Azure!<\/p>\n","protected":false},"excerpt":{"rendered":" Many applications make use of a network drive to backup and store files. When I was in university I found myself constantly coding for fun, and one example took the form of a network share for my roommates to share files wrapped in a handy little app. Unfortunately, that particular app has long since been […]<\/p>\n","protected":false},"author":367,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685],"tags":[37,44,63,129,158,164],"class_list":["post-16665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","tag-azure","tag-blob","tag-dotnet","tag-storage","tag-wpf","tag-xaml"],"acf":[],"blog_post_summary":" Many applications make use of a network drive to backup and store files. When I was in university I found myself constantly coding for fun, and one example took the form of a network share for my roommates to share files wrapped in a handy little app. Unfortunately, that particular app has long since been […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/16665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/367"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=16665"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/16665\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=16665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=16665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=16665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Prerequisites<\/h2>\n
Representing the Account as a TreeView<\/h2>\n
var blobs = container.ListBlobs(useFlatBlobListing: true)\n .Cast<CloudBlockBlob>()\n .Select(b => new TreeViewBlob\n {\n Name = b.Name, \n Blob = b\n });\n<\/code><\/pre>\nTreeViewBlob<\/code> is just a convenient representation for the following tree building algorithm.<\/p>\nIEnumerable<TreeViewNode> BuildTree(IEnumerable<TreeViewBlob> blobs)\n{\n return blobs\n .GroupBy(b => b.Name.Split('\/')[0])\n .Select(g =>\n {\n var children = g.Where(b => b.Name.Length > g.Key.Length + 1).Select(b => new TreeViewBlob\n {\n Name = b.Name.Substring(g.Key.Length + 1),\n Blob = b.Blob\n });\n\n var blob = g.FirstOrDefault(b => b.Name == g.Key)?.Blob;\n\n return new TreeViewNode\n {\n Name = g.Key,\n Blob = blob, \n Children = BuildTree(children)\n };\n });\n}\n<\/code><\/pre>\nmy\/share\/file1.jpg\nmy\/share\/file2.jpg\nmy\/share\/private\/file.jpg\n<\/code><\/pre>\nBuildTree<\/code>, we essentially have the structure of our TreeView<\/code>.<\/p>\nmy\n share\n file1.jpg\n file2.jpg\n private\n file.jpg\n<\/code><\/pre>\nTreeView<\/code>, we need to start implementing our Storage commands.<\/p>\nDownloading Blobs<\/h2>\n
async void DownloadButton_Click(object sender, RoutedEventArgs e)\n{\n var item = View.SelectedItem as TreeViewItem;\n var blob = item.Tag as CloudBlockBlob;\n var name = item.Header as string;\n\n var saveFileDialog = new SaveFileDialog\n {\n FileName = name,\n Title = \"Download...\"\n };\n\n if (saveFileDialog.ShowDialog() != true)\n return;\n\n StatusText = \"Downloading...\";\n await blob.DownloadToFileAsync(saveFileDialog.FileName, FileMode.Create);\n StatusText = \"Success!\";\n}\n<\/code><\/pre>\nBlockBlob<\/code>, displays a prompt to the user, and downloads the blob to the selected file. The real meat of this method is performed during blob.DownloadToFileAsync<\/code>; the rest of the method is just gathering the proper information.<\/p>\nasync<\/code> and await<\/code> have drastically simplified UI thread updates in presentation frameworks, so setting the status text and using await<\/code> gives us the desired UI results.<\/p>\nUploading Blobs<\/h2>\n
async void UploadButton_Click(object sender, RoutedEventArgs e)\n{\n var item = View.SelectedItem as TreeViewItem;\n\n var (containerName, directoryName) = GetContainerAndDirectory(item);\n\n var client = Helpers.Storage.CreateCloudBlobClient();\n var container = client.GetContainerReference(containerName);\n\n var openFileDialog = new OpenFileDialog\n {\n Title = \"Upload...\"\n };\n\n if (openFileDialog.ShowDialog() != true)\n return;\n\n var filePath = openFileDialog.FileName;\n var fileName = filePath.Split(System.IO.Path.DirectorySeparatorChar).Last();\n\n var blobReference = container.GetBlockBlobReference($\"{directoryName}{fileName}\");\n\n StatusText = \"Uploading...\";\n await blobReference.UploadFromFileAsync(filePath);\n await UpdateView();\n StatusText = \"Success!\";\n}\n<\/code><\/pre>\nblobReference.UploadFromFileAsync<\/code>). However, this is the first and only time we will come across a “reference”. Prior to uploading the file into a blob, a local CloudBlockBlob<\/code> reference is ascertained via container.GetBlockBlobReference<\/code>.<\/p>\nDeleting Blobs<\/h2>\n
async void DeleteButton_Click(object sender, RoutedEventArgs e)\n{\n var item = View.SelectedItem as TreeViewItem;\n var blob = item.Tag as CloudBlockBlob;\n var name = item.Header as string;\n\n StatusText = \"Deleting...\";\n await blob.DeleteAsync();\n await UpdateView();\n StatusText = \"Success!\";\n}\n<\/code><\/pre>\nCloudBlockBlob<\/code> is easily attained from the TreeViewItem<\/code>, having been attached previously. Again, performing the actual operation only requires only one call to blob.DeleteAsync<\/code>.<\/p>\nThe User Interface<\/h2>\n
Style<\/code>s. Our XAML looks something like this.<\/p>\n<Grid>\n <StackPanel Orientation=\"Horizontal\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" Margin=\"0,10,10,10\" Width=\"400\" Height=\"30\">\n <Button Name=\"DownloadButton\" Content=\"Download\" IsEnabled=\"{Binding IsBlobSelected}\" Click=\"DownloadButton_Click\" Margin=\"10,0,0,0\" Width=\"100\" Height=\"30\"><\/Button>\n <Button Name=\"UploadButton\" Content=\"Upload\" IsEnabled=\"{Binding IsDirectorySelected}\" Click=\"UploadButton_Click\" Margin=\"10,0,0,0\" Width=\"100\" Height=\"30\"><\/Button>\n <Button Name=\"DeleteButton\" Content=\"Delete\" IsEnabled=\"{Binding IsBlobSelected}\" Click=\"DeleteButton_Click\" Margin=\"10,0,0,0\" Width=\"100\" Height=\"30\"><\/Button>\n <\/StackPanel>\n <TreeView Name=\"View\" Margin=\"10,50,10,50\" SelectedItemChanged=\"View_SelectedItemChanged\" \/>\n <TextBlock Name=\"Status\" Text=\"{Binding StatusText}\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Bottom\" Margin=\"10\" Width=\"400\" Height=\"30\"><\/TextBlock>\n<\/Grid>\n<\/code><\/pre>\nPutting It All Together<\/h2>\n