In our application we give the user the abilty to upload a document to a windows azure blob storage account. After uploading the document or image it gets assigned some url (https://name.blob.core.windows.net/container/file-name.jpg). If the document is an image or a pdf or some file that can be rendered by the browser we are trying to display it in the browser without requiring the user to download the file. If we just open up a new window or tab and direct the user to the blob uri in IE, the image or pdf renders correctly in the browser. But, if we try to just open a new window pointing to the uri in Chrome, FireFox, or Safari, it just downloads the file instead of displaying it in the browser.
Is there a way to force the latter three browsers to just display the file instead of download it?
You can anonymously read blob storage content directly using a browser if public access to blobs is enabled. The URL to your blob content takes this format: https://<your account name>. blob.core.windows.net/<your container name>/<your path and filename>
In order to download an Azure BLOB Storage item by its URL, you need to instantiate a CloudBlockBlob yourself using the item's URL: var blob = new CloudBlockBlob(new Uri(pdfFileUrl), cloudStorageAccount. Credentials); This blob can then be downloaded with the code you originally posted.
Create Power Automate Desktop Flow Go to containers and create a new container. Open the container and on the and navigate to Shared access signature. Select add, create, and write permission, change the time if needed, and press Generate SAS token and URL. Copy the Blob SAS URL and save it as the variable in the flow.
This is because you didn't set the content type property of the blob (the default is application/octet-stream, which triggers a download in most browsers). If you want PDF files to show correctly you'll need to change the content type of your PDF files to application/pdf (image/jpeg for jpeg files).
You can change the content type with common tools like Azure Storage Explorer, Cloud Storage Studio, CloudBerry, CloudXplorer, ... or by using the SDK. Note that some of these tools will automatically set the content type to the right one after uploading the file.
blob.Properties.ContentType = "application/pdf";
//Get the content type of the file by extension
public static string GetFileContentType(string FilePath)
{
string ContentType = String.Empty;
string Extension = Path.GetExtension(FilePath).ToLower();
switch (Extension)
{
case ConstantUtility.FILE_EXTENSION_PDF:
ContentType = "application/pdf";
break;
case ConstantUtility.FILE_EXTENSION_TXT:
ContentType = "text/plain";
break;
case ConstantUtility.FILE_EXTENSION_BMP:
ContentType = "image/bmp";
break;
case ConstantUtility.FILE_EXTENSION_GIF:
ContentType = "image/gif";
break;
case ConstantUtility.FILE_EXTENSION_PNG:
ContentType = "image/png";
break;
case ConstantUtility.FILE_EXTENSION_JPG:
ContentType = "image/jpeg";
break;
case ConstantUtility.FILE_EXTENSION_JPEG:
ContentType = "image/jpeg";
break;
case ConstantUtility.FILE_EXTENSION_XLS:
ContentType = "application/vnd.ms-excel";
break;
case ConstantUtility.FILE_EXTENSION_XLSX:
ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
break;
case ConstantUtility.FILE_EXTENSION_CSV:
ContentType = "text/csv";
break;
case ConstantUtility.FILE_EXTENSION_HTML:
ContentType = "text/html";
break;
case ConstantUtility.FILE_EXTENSION_XML:
ContentType = "text/xml";
break;
case ConstantUtility.FILE_EXTENSION_ZIP:
ContentType = "application/zip";
break;
default:
ContentType = "application/octet-stream";
break;
}
return ContentType;
}
Use this to set the content type of the blob while saving it.
Set Content-type of media files stored on Blob
For those uploading files via PowerShell, use the below syntax to set content type during the upload.
Set-AzureStorageBlobContent -File <localFilePath> -Container <containerName> -Properties @{"ContentType"="text/plain"} -Context $ctx
Above I set the blob content type to text/plain, useful when uploading JSON and HTML files that will be used with templates. List of more content types header values here.
If using the Azure SDK (12.x+) there is a change that requires the use of BlobHttpHeaders that pass in to the upload method (instead of blob.Properties.ContentType).
For example:
var header = new BlobHttpHeaders();
header.ContentType = "image/jpeg";
var response = await blobClient.UploadAsync(stream, header);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With