32

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?

Nick Olsen
  • 6,299
  • 11
  • 53
  • 75

6 Answers6

60

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.

Sandrino Di Mattia
  • 24,739
  • 2
  • 60
  • 65
30
   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

Community
  • 1
  • 1
sudhansu63
  • 6,025
  • 4
  • 39
  • 52
  • 2
    if you use HttpPostedFileBase, it already contain content type attr ex: ``blockBlob.Properties.ContentType = httpPostedFileBase.ContentType;`` – min Jul 11 '16 at 03:42
  • 2
    That worked perfectly; I ended up settling on this to automatically determine the mime type for my file: `blob.Properties.ContentType = MimeMapping.GetMimeMapping(path);` – Lucent Fox Feb 16 '17 at 16:26
3

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.

Sam Murcio
  • 171
  • 2
  • Thank you, this helped me. I just had to change it to -Properties @{"ContentType"="text/html"} for html pages to be browsable rather than display getting displayed as text. – Bedair Nov 09 '21 at 01:39
1

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);
Steve G
  • 151
  • 1
  • 3
-1
public String sasURL(String filePath) throws URISyntaxException, StorageException, InvalidKeyException {
    CloudBlockBlob cloudBlockBlob = cloudBlobContainer.getBlockBlobReference(filePath);
    SharedAccessBlobPolicy sasPolicy = new SharedAccessBlobPolicy();
    GregorianCalendar calendar = new GregorianCalendar();
    calendar.add(Calendar.HOUR, 3);
    sasPolicy.setSharedAccessExpiryTime(calendar.getTime());
    sasPolicy.setPermissions(EnumSet.of(SharedAccessBlobPermissions.READ, SharedAccessBlobPermissions.LIST));
    SharedAccessBlobHeaders sharedAccessBlobHeaders = new SharedAccessBlobHeaders();
    sharedAccessBlobHeaders.setContentType(MediaType.APPLICATION_PDF_VALUE);
    String sas = cloudBlockBlob.generateSharedAccessSignature(sasPolicy, sharedAccessBlobHeaders,null);
    return cloudBlockBlob.getUri()+"?"+sas;
}
David Ramos
  • 1
  • 1
  • 3
    A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Tyler2P Feb 24 '22 at 09:55
-1

Thanks to sudhAnsu63 and Steve G for helpful answers!

Here is a minimum reproducible code solution in visual basic that sets ContentType and uploads to azure blob storage by calling the function "uploadImageBlob", setting the content type will help the browser with knowing what to do with the image, so that it will just display the image/file instead of starting a download when accessed.

As an aside I would not just copy and paste this into your code and would hope you handle your connection strings and file names in a better more dynamic manner.

            Public Function uploadImageBlob() As String
                ' variables we will need in this function
                Const containerName As String = "exampleContainer"
                Dim azureConnectionString As String = WebConfigurationManager.ConnectionStrings("NameOfConnectionString").ConnectionString

                Dim fileNameWithExtension As String = "example.png"
                Dim filePath As String = "/WhereYourImagesAre/"

                ' requires being able to use path
                Dim blobName As String = Path.GetFileNameWithoutExtension(fileNameWithExtension)

                Dim container As BlobContainerClient = New BlobContainerClient(AzureConnectionString, containerName)
                container.CreateIfNotExists()

                Dim blob As BlobClient = container.GetBlobClient(fileNameWithExtension)

                Dim blobHeader = New Models.BlobHttpHeaders
                blobHeader.ContentType = Me.getFileContentType(fileNameWithExtension) '("image/png")

                blob.UploadAsync(filePath & fileNameWithExtension, blobHeader)
                return "bob upload!!!"
            End Function

            Public Function getFileContentType(pFileWithExtension As String) As String
                Dim ContentType As String = String.Empty
                Dim Extension As String = Path.GetExtension(FilePath).ToLower()
                
                ' may want more extension types based on your needs
                Select Case Extension
                    Case ".gif"
                        ContentType = "image/gif"
                    Case ".jpg"
                        ContentType = "image/jpeg"
                    Case ".jpeg"
                        ContentType = "image/jpeg"
                    Case ".png"
                        ContentType = "image/png"
                End Select
                
                return ContentType;
            End Function
diehlmitchell
  • 11
  • 4