Azure-docs: Content-Type for uploaded images is incorrect

[dpolivy]

While the sample solution seems to work, there are some issues with the way the blobs are stored. They have a Content-Type of application/octet-stream. The browser seems to ignore this when it is in an img src attribute and displays it anyway, but for real-world cases it should instead be set to the actual MIME type of the image, e.g. image/jpeg.

I believe there is some code missing to take the MIME type from multer and pass it along to Azure Blob Storage along with the stream upload. However, from the documentation, I can't quite figure out what the missing piece is (I can't actually find any documentation on the uploadStreamToBlockBlob function -- am I looking in the wrong place?)

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: f1026434-050e-b1d5-7cac-47cf5d5d2cad
• Version Independent ID: bfb4d3c9-af35-f08b-710a-afc3281e3d87
• Content: Upload image data in the cloud with Azure Storage
• Content Source: articles/storage/blobs/storage-upload-process-images.md
• Service: storage
• GitHub Login: @normesta
• Microsoft Alias: normesta

[SumanthMarigowda-MSFT]

@dpolivy Thanks for your question. We are checking on this and will respond to you soon.

[SumanthMarigowda-MSFT]

@dpolivy
Thanks for the feedback! I have assigned the issue to the content author to investigate further and update the document as appropriate.

[normesta]

@dpolivy thank you for reporting this. @KarlErickson is the author of the sample that contains that snippet. @KarlErickson, in the upload.js file of the storage-blob-upload-from-webapp-node-v10 sample, should the line "await uploadStreamToBlockBlob(aborter, stream, blockBlobURL, uploadOptions.bufferSize, uploadOptions.maxBuffers);" be changed to this? - "await uploadStreamToBlockBlob(aborter, stream, blockBlobURL, uploadOptions.bufferSize, uploadOptions.maxBuffers, { blobHTTPHeaders: { blobContentType: "image/jpeg" } });"? I ask only because I see this Github issue where a similar code snippet was recommended - https://github.com/Azure/azure-storage-js/issues/23. Thx! Norm E.

[normesta]

assign:KarlErickson

[dpolivy]

@normesta Yes, the { blobHTTPHeaders: { blobContentType: "image/jpeg" } } line should do the trick to set the MIME type properly. Note, there's another code sample for the Azure function to generate thumbnails that could also benefit from the same fix. I added that to my test code and the browser was able to render the image directly instead of forcing it to download, so that means it's using the correct MIME type.

[KarlErickson]

@dpolivy thanks for the feedback! I've updated the code in the sample repo for this topic and the one for the functions topic.

please-close