How can I upload a file to Blade Azure storage from MVC view

Question

I am encoding an MVC5 Internet application and would like to help upload a file from my own file system to Azure Blob.

Here is my upload function in Azure:

public void UploadFileToBlobStorage(string containerName, string blockBlogName, string fileName) { // Retrieve storage account from connection string. CloudStorageAccount storageAccount = CloudStorageAccount.Parse( CloudConfigurationManager.GetSetting("StorageConnectionString")); // Create the blob client. CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); // Retrieve reference to a previously created container. CloudBlobContainer container = blobClient.GetContainerReference(containerName); // Create the container if it doesn't already exist. container.CreateIfNotExists(); container.SetPermissions( new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob }); // Retrieve reference to a blob named "myblob". CloudBlockBlob blockBlob = container.GetBlockBlobReference(blockBlogName); // Create or overwrite the "myblob" blob with contents from a local file. using (var fileStream = System.IO.File.OpenRead(fileName)) { blockBlob.UploadFromStream(fileStream); } } 

Here is my function to download the test file:

 public void UploadTestFile(string localFileName) { string containerName = "TestContainer"; string blockBlogName = "Test.txt"; AzureService azureService = new AzureService(); azureService.UploadFileToBlobStorage(containerName, blockBlogName, localFileName); } 

I'm not sure how to call the UploadTestFile () function from MVC View, where the user can navigate to the file being uploaded.

Do I need to use Ajax, or can I just upload the file by calling a method from the MVC view? Can I please help with this?

Thanks in advance

Answer 1

One way to call the UploadTestFile () function from MVC View is by using the Html.BeginForm () method. I will give an example below:

 @using (Html.BeginForm("UploadTestFile", "INSERT_YOUR_CONTROLLER_NAME_HERE", FormMethod.Post, new { enctype = "multipart/form-data" })) { <span> <input type="file" name="myFile" multiple /> <br> <input type="submit" value="Upload" /> </span> } 

In addition, a few suggestions for your code:

• UploadFileToBlobStorage (): the code checks for the presence of a container and sets permissions for each request. I would recommend separating the logic container.CreateIfNotExists () and container.SetPermissions (...) into a separate initialization function that should only be executed once during the first deployment.

• UploadFileToBlobStorage (): it looks like the code will try to load localFileName from the VM file system, and not from data with several parts. One approach is to use the HttpFileCollectionBase class and the Controller.Request property. Example below:

   public void UploadFileToBlobStorage(string containerName, string blockBlogName, HttpFileCollectionBase files) { // ..... // Use this: blockBlob.UploadFromStream(files[0].InputStream); // uploading the first file: you can enumerate thru the files collection if you are uploading multiple files // Instead of this: Create or overwrite the "myblob" blob with contents from a local file. using (var fileStream = System.IO.File.OpenRead(fileName)) { blockBlob.UploadFromStream(fileStream); } } [HttpPost] public void UploadTestFile() { string containerName = "TestContainer"; string blockBlogName = "Test.txt"; AzureService azureService = new AzureService(); // Notice the Request.Files instead of localFileName azureService.UploadFileToBlobStorage(containerName, blockBlogName, Request.Files); } 

Please let me know if this works on your part.