I am putting together a series for people who are excited to bring Azure into their software development life cycle and use Azure cloud’s extensive services to their full potential.
In this series, I will cover as below:
- Getting Started with Azure Development, Create App Service Plan and Publish MVC project using Visual Studio
- Deployment Slots and Slot Swap on Azure App Service using Visual Studio and Azure SDK
- Remote debugging App Service using visual Studio, monitoring and configuring alerts
- Diagnostic logs, live stream, process explorer and KUDU
- How to use Azure SQL Database in Dot.net Applications
- How to use Azure DocumentDB or Azure Cosmos DB in our Dot.net Applications
- How to use Visual Studio Team Service to do continuous Integration and continuous delivery
- Azure storage data services types and how to store files in azure storage account 1/2
- Azure storage data services types and how to store files in azure storage account 2/2
- How to use Azure Functions and trigger on new image/blob creation in Azure Storage using BlobTrigger 1/2
- How to use Azure Functions and trigger on new image/blob creation in Azure Storage using BlobTrigger 2/2
If you do not know where to start, please check my blog post, which covers detail about getting subscription and setting up. In this series, we assume that you already have active Azure subscription and Visual Studio 2013 or later installed on your system.
9. Azure storage data services types and how to store files in azure storage account 2/2
Now we will do the same upload process programmatically in visual studio, we will only focus on the relevant code, and we do not discuss any coding best practices as it is out of scope of this series, it is left on user’s own discretion.
Install WindowsAzure.Storage nugget package
Open your visual studio if you have not opened it already and open the solution with which we are working in this series. Right click on solution | Manage Nugget Packages | click on Browse | search for azure storage. Install latest stable version in our case it is 8.7.0 and accept the license. By the time you read this post, Microsoft may have released new version, so do not worry about it as all the code will still work.
Figure 5 Install Windows AZURE Storage nugget package
Open you Index controller and the code should look like below; all you need to do is modify the highlighted with your credentials to make it work.
Figure 6 Change settings for storage account container
Now to get the Blob service endpoint Go to Storage Account | Blob Service | under Primary blob service endpoint you will have the URL, copy it.
Figure 7 Blob service endpoint
For storage account and keys Go to your storage account | Access keys, although storage account can be retrieved from main overview window, but this view will give you both account name and keys in one location. Please remember that whoever have these keys, will be able to manipulate almost anything in the storage account level so you do not want to give these keys to everyone. Azure provides us SAS (shared access service) which is robust and should be used to limit access in production environments. You also have option to regenerate keys, which will invalidate the previous keys and will provide you new keys.
Figure 8 Blob service Storage account and keys
Coding in Visual Studio
In first Index method, all we are doing is listing the blob files in the container images and making a dictionary, which have image name as key and image URL as value, and we are passing it to view using ViewBag.files.
Figure 9 Get all files in container
In post Index method, we are checking for file first, if exists then we are creating reference to the blob container with file name, but you could also use GUID for your blob name. Note that if a blob/file exists in the container with particular name and you use the same name to upload the file again then existing file will be overwritten. We are also using file stream to mitigate the need to save the file on disk first, you can of course implement your logic accordingly.
Figure 10 Insert Files in container
Full code for home controller is as below:
Now let us move to the view part, it is very simple, we just added the code for form, which will post to index method of home controller and is multipart that means will contain file as post response. We create an input with type file and a submit button. Make sure that your input file name is the same as you have mentioned the parameter to post Index file, otherwise you will not get the file in response.
Figure 11 File Upload code in MVC
We also included the code to display file name and picture along with it.
Figure 12 View all images code
Full code for Index View as below:
Now run the application locally and upload a picture, you will see that the filename is encoded in html friendly name as it have spaces in it and images are shown. There are two pictures as we upload first picture right after we created storage account and the other one is uploaded programmatically.
Figure 13 Complete view of file upload
You can also verify the image upload by going to images container in storage account.
Figure 14 Image uploaded to images container
This code tutorial is just starting point; you can play with it and use this code to modify according to your needs. I hope this being information for you.
Coming up next How to use Azure Functions and trigger on new image/blob creation in Azure Storage using BlobTrigger
