For PDF files to display in the browser - instead of downloading - you need to supply them with the application/pdf content type header.

By default, Azure Blob Storage files are set to application/octet-stream. The content type can be changed on the back-end by updating it on the blob ... we want to set it at upload time.

Uploading PDF files using the @azure/storage-blob (documentation) npm package we cannot find the correct way to set this.

Tried many iterations of the following code to no avail.

...
const blobOptions = {
    metadata: { 'contentType': 'application/pdf' },
    ... other options
};

Azure.uploadBrowserDataToBlockBlob(aborter, file, blob, blobOptions)
...

• Note - this can be used to set the correct mime type for anything ... but browsers seem to have no problem converting .jpg, .png etc ... only has issue with .pdf that I have seen.

For PDF files to display in the browser - instead of downloading - you need to supply them with the application/pdf content type header.

By default, Azure Blob Storage files are set to application/octet-stream. The content type can be changed on the back-end by updating it on the blob ... we want to set it at upload time.

Uploading PDF files using the @azure/storage-blob (documentation) npm package we cannot find the correct way to set this.

Tried many iterations of the following code to no avail.

...
const blobOptions = {
    metadata: { 'contentType': 'application/pdf' },
    ... other options
};

Azure.uploadBrowserDataToBlockBlob(aborter, file, blob, blobOptions)
...

• Note - this can be used to set the correct mime type for anything ... but browsers seem to have no problem converting .jpg, .png etc ... only has issue with .pdf that I have seen.

• javascript
• azure
• pdf
• content-type
• azure-blob-storage

1 Answer 1

My colleague found an answer:

...
const blobOptions = {
    blobHTTPHeaders: { blobContentType: 'application/pdf' },
    ... other options
};

Azure.uploadBrowserDataToBlockBlob(aborter, file, blob, blobOptions)
...

and added the x-ms-blob-content-type header to Azure storage CORS settings.