SAS URL to display in browser rather than downloading

Question

First off, I'm an Azure newbie. I apologize in advance for any part of this that seems overly stupid. I've spent a good bit of time trying to work through this with no luck. It seems it should be easy!

I have been able to create a web page that can upload images into my Blob storage account. I can also successfully download them using a shared access signature. What I need to do, however, is to simply display the image in the browser without downloading it.

Is there a way to display a secure file in the browser (without downloading it first) using an SAS? If so, how do I do so?

Thanks in advance.

Answer 1

Hello @Athelene Gosnell ,
Thanks for your query. I am not sure how the web application was configured. But I was trying out using ASP.net MVC application , which I was able to successfully display the image with out downloading. (I jus tried using account key, you can replace it with SAS URI)

Reference piece of code:

• https://stackoverflow.com/questions/31479517/download-and-display-a-private-azure-blob-using-asp-mvc
  Additional References:
• https://www.edureka.co/community/7243/azure-blob-how-to-open-file-in-browser-without-downloading-it
• https://stackoverflow.com/questions/20572726/how-can-i-view-an-image-from-azure-blob-storage-rather-than-download-it

Couple of points to note:

1. Make sure to set the correct content type (Or Mime Type)
2. Don't use any streaming APIs (i.e. file stream) - those will by default download the files
3. If possible try to add the right header (if needed)

Below is the whole source code (it's the controller part )

//ViewModel
public class ViewModel
{
public string FileUrl { get; set; }
}

public ActionResult Index()

    {  

        var readPolicy = new SharedAccessBlobPolicy()  
        {  
            Permissions = SharedAccessBlobPermissions.Read,  
            SharedAccessExpiryTime = DateTime.UtcNow + TimeSpan.FromMinutes(5)  
        };  
          
        // Retrieve storage account from connection string.  
        string conn = "DefaultEndpointsProtocol=https;AccountName=straccountname;AccountKey=key==;EndpointSuffix=core.windows.net";  
        Microsoft.WindowsAzure.Storage.CloudStorageAccount storageAccount = CloudStorageAccount.Parse(conn);  

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

        // Retrieve reference to a previously created container.  
        CloudBlobContainer container = blobClient.GetContainerReference("test");  

        // Retrieve reference to a blob ie "20200809_125724.jpg".  
        CloudBlockBlob blockBlob = container.GetBlockBlobReference("20200809_125724.jpg");  
        //------  

        var newUri = new Uri(blockBlob.Uri.AbsoluteUri + blockBlob.GetSharedAccessSignature(readPolicy));  

        var viewModel = new ViewModel()  
        {  
            FileUrl = newUri.ToString()  
        };  

        return View("Index", viewModel);  


        // return View();  
    }  

If the above instructions helps out , kindly "Accept the Answer" so that It can help out the community out there.