Listing the contents of a container with Azure Blob storage

Question

I am creating a cloud storage app using an ASP.NET MVC written in C#. I can currently upload files to an Azure storage blob container, but each file name is displayed as the word "images" on the upload page itself. The file names are correct within Azure.

I am wanting to display the actual name of the file rather than the word, "images".

A snippet of code from my controller:

    public ActionResult Upload()
    {
        // Retrieve storage account from connection string.
        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
            CloudConfigurationManager.GetSetting("AzureString"));

        // Create the blob client.
        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

        CloudBlobContainer blobContainer = blobClient.GetContainerReference("Container");

        List<string> blobs = new List<string>();
        foreach (var blobItem in blobContainer.ListBlobs())
        {
            blobs.Add(blobItem.Uri.ToString());
        }
        return View(blobs);
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase image)
    {
        if (image.ContentLength > 0)
        {
            // Retrieve storage account from connection string.
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                CloudConfigurationManager.GetSetting("AzureString"));

            // Create the blob client.
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

            // Retrieve a reference to a container.
            CloudBlobContainer blobContainer = blobClient.GetContainerReference("Container");

            CloudBlockBlob blob = blobContainer.GetBlockBlobReference(image.FileName);
            blob.UploadFromStream(image.InputStream);
        }
        return RedirectToAction("Upload");
    }

The relevant view:

    @{
        ViewBag.Title = "Upload";
    }

    @if (Request.IsAuthenticated)
    {
        <h2>Upload</h2>
        <p>
            @using (Html.BeginForm("Upload", "Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <input type="file" name="image" />
                <input type="submit" value="Upload" />
            }
        </p>
        <ul style="list-style-type: none; padding:0">
            @foreach (var item in Model)
            {
                <li>
                    <img src="@item" alt="images" width="100" height="100" />
                    <a id="@item" href="#" onclick="deleteImage('@item');">Delete</a>
                </li>
            }
        </ul>

        <script>
        function deleteImage(item)
        {
            var url = "/Files/DeleteImage";
            $.post(url, {Name: item}, function (data) {
            window.location.href = "/Files/Upload";
            alert(data);
            })
        }
        </script>
    }
    else
    {
        <ul class="nav navbar-nav navbar-right">
            <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
            <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
        </ul>
    }

Apologies in advance if this is a simple mistake. I am new to ASP.NET, C# and Azure.

Answer 1

Was able to get it working by making the container publicly viewable

container.SetPermissions(
new BlobContainerPermissions 
    { PublicAccess = BlobContainerPublicAccessType.Blob});