Set Content-type of media files stored on Blob

Question

We have a website hosted on Azure. It is media based, and we are using JWPlayer to playback media with HTTP pseudostreaming. The media files are stored on blob in 3 formats - mp4, ogg, webm.

The issue is the content type of media files is set as application/octet-stream for all types. Due to this there are some issues in media playback and progress bar.

How can I set the appropriate Content-type of files stored on blob (like - video/mp4, video/ogg, video/webm)?

I do not want to do it manually for each file by going in blob interface. There must be some other way to do it which I am not aware of. Perhaps a config file, settings file, etc sorts. Or perhaps a code block to set up the Content-type for all files stored in a folder.

Any suggestions? Thanks

score 137 · Accepted Answer · edited Apr 28 '17 at 07:28

137

This should work:

var storageAccount = CloudStorageAccount.Parse("YOURCONNECTIONSTRING");
var blobClient = storageAccount.CreateCloudBlobClient();

var blobs = blobClient
    .GetContainerReference("thecontainer")
    .ListBlobs(useFlatBlobListing: true)
    .OfType<CloudBlockBlob>();

foreach (var blob in blobs)
{
    if (Path.GetExtension(blob.Uri.AbsoluteUri) == ".mp4")
    {
        blob.Properties.ContentType = "video/mp4";
    }
    // repeat ad nauseam
    blob.SetProperties();
}

Or set up a dictionary so you don't have to write a bunch of if statements.

edited Apr 28 '17 at 07:28

Dai

141,631
28
261
374

answered Apr 06 '12 at 07:36

user94559

59,196
6
103
103

1

@smarx : Is it also possible to do the same thing in CDN, http://stackoverflow.com/questions/21847663/changing-video-content-type-mime-type-in-cdn-in-drupal-7 – Hitesh Feb 19 '14 at 10:11
1

Isn't there any possibility to set this up on Azure Portal directly? without coding – Emil Oct 19 '16 at 15:54
5

Here is a blog post with a comprehensive list of extension to mimetype mappings. https://ppolyzos.com/2015/10/27/apply-proper-content-type-to-files-in-azure-storage-containers-based-on-file-extensions/ – dragon788 May 01 '17 at 18:08
2

It might be worth mentioning that if you have access to System.Web and .NET 4.5 or higher, you can call MimeMapping.GetMimeMapping("somefile.mp4") to get the content type. See [MSDN](https://learn.microsoft.com/en-us/dotnet/api/system.web.mimemapping.getmimemapping?view=netframework-4.7.2) for more details. – David Yates Dec 03 '18 at 21:31

score 72 · Answer 2 · edited Sep 28 '21 at 13:10

72

Unfortunately, the accepted answer here is not currently working for the latest SDK (12.x.+)

With the latest SDK, the content type should be set via BlobHttpHeaders.

var blobServiceClient = new BlobServiceClient("YOURCONNECTIONSTRING");
var containerClient = blobServiceClient.GetBlobContainerClient("YOURCONTAINERNAME");
var blob = containerClient.GetBlobClient("YOURFILE.jpg");

var blobHttpHeader = new BlobHttpHeaders { ContentType = "image/jpeg" };
 
var uploadedBlob = await blob.UploadAsync(YOURSTREAM, new BlobUploadOptions { HttpHeaders = blobHttpHeader });

YOURSTREAM could be a new BinaryData(byte[])

edited Sep 28 '21 at 13:10

Softlion

12,281
11
58
88

answered Jun 09 '20 at 21:16

Mehmet Taha Meral

3,315
28
30

2

It's working fine. In my opinion, currently this answer should be mark as accepted. – ElConrado Jun 02 '21 at 10:38
Thank you for this. I couldn't find this anywhere in the 12.x documentation. – Hallmanac Feb 03 '22 at 15:40

score 14 · Answer 3 · answered Aug 14 '13 at 11:09

This is work example to upload video to Azure Blob Storage with right Content-Type:

public static String uploadFile(
     CloudBlobContainer container,String blobname, String fpath) {

    CloudBlockBlob blob;
    try {
        blob = container.getBlockBlobReference(blobname);
        File source = new File(fpath);

        if (blobname.endsWith(".mp4")) {
            System.out.println("Set content-type: video/mp4");
            blob.getProperties().setContentType("video/mp4");
        }

        blob.upload(new FileInputStream(source), source.length());

        return blob.getUri().toString();
    } catch (URISyntaxException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (StorageException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (FileNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    return null;
}

Amrit Pariyar · Answer 4 · 2022-06-03T12:07:00.157

With Azure.Storage.Blogs (12.8.4), We can set content type of file as below. In Default, Azure Storage stores file in application/octet-stream, In case of *.svg file, doesn't properly render in html. So we have to save *.svg file in azure blob storage with content type image/svg+xml while uploading into blob.

Below is the code sample I got working.

  BlobServiceClient blobServiceClient = new BlobServiceClient("CONNECTIONSTRING");
  BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient("CONTAINERNAME");
  BlobClient blobClient = containerClient.GetBlobClient("BLOBNAME");
  try
  {

    Stream stream = file.OpenReadStream();
    await blobClient.UploadAsync(stream, true);
    blobClient.SetHttpHeaders(new BlobHttpHeaders() { ContentType = file.ContentType });
  }

ContentType Set on header should place just below the blobClient.UploadAsync().

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 01 '22 at 07:41

score 1 · Answer 5 · answered Oct 01 '19 at 16:00

With Azure Storage v10 SDK, blobs can be uploaded using BlockBlobURL as instructed in the Node.js quickstart:

const {
  Aborter,
  BlockBlobURL,
  ContainerURL,
  ServiceURL,
  SharedKeyCredential,
  StorageURL,
  uploadFileToBlockBlob
} = require("@azure/storage-blob");

const containerName = "demo";
const blobName = "quickstart.txt";
const content = "hello!";

const credentials = new SharedKeyCredential(
  STORAGE_ACCOUNT_NAME,
  ACCOUNT_ACCESS_KEY
);
const pipeline = StorageURL.newPipeline(credentials);
const serviceURL = new ServiceURL(
  `https://${STORAGE_ACCOUNT_NAME}.blob.core.windows.net`,
  pipeline
);

const containerURL = ContainerURL.fromServiceURL(serviceURL, containerName);
const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, blobName);

const aborter = Aborter.timeout(30 * ONE_MINUTE);
await blockBlobURL.upload(aborter, content, content.length);

Then content type can be set after the upload with the setHTTPHeaders method:

// Set content type to text/plain
await blockBlobURL.setHTTPHeaders(aborter, { blobContentType: "text/plain" });

Files can be uploaded with the uploadFileToBlockBlob method from @azure/storage-blob.

score 1 · Answer 6 · answered Nov 25 '21 at 21:01

In python

azure_connection_str = libc.retrieve.get_any_secret('AZURE_STORAGE_CONNECTION')
blob_service_client = BlobServiceClient.from_connection_string(azure_connection_str)
blobs = blob_service_client.list_blobs()
my_content_settings = ContentSettings(content_type='video/mp4')

for blob in blobs:
    blob_client = blob_service_client.container_client.get_blob_client(blob)
    blob_client.set_http_headers(content_settings=my_content_settings)

score 0 · Answer 7 · answered Mar 19 '14 at 06:52

Using php, one can upload the video by setting the content type as follows

$blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);
//upload
$blob_name = "video.mp4";
$content = fopen("video.mp4", "r");

$options = new CreateBlobOptions();
$options->setBlobContentType("video/mp4");
try {
    //Upload blob
    $blobRestProxy->createBlockBlob("containername", $blob_name, $content, $options);
    echo "success";
} catch(ServiceException $e){
    $code = $e->getCode();
    $error_message = $e->getMessage();
    echo $code.": ".$error_message."<br />";
}

This does not work with current packages as of right now. – Carey Richardson Dec 14 '17 at 20:44 — Carey Richardson, Dec 14 '17 at 20:44

score 0 · Answer 8 · answered Sep 29 '18 at 22:58

here is what i do

BlobHTTPHeaders h = new BlobHTTPHeaders();
String blobContentType = "image/jpeg";
h.withBlobContentType(blobContentType);
blobURL.upload(Flowable.just(ByteBuffer.wrap(Files.readAllBytes(img.toPath()))), img.length(), h, null, null, null)
.subscribe(resp-> {
  System.out.println("Completed upload request.");
  System.out.println(resp.statusCode());
});

score 0 · Answer 9 · answered Mar 29 '23 at 10:13

If you are having API in the middle which is used to upload files you can do something like this.

Using Azure.Storage.Files.Datalake v12.12.1 and Datalake storage Gen v2 you can specify content type using DataLakeFileUploadOptions.

using Azure.Storage.Files
using Microsoft.AspNetCore.StaticFiles;
(...)

public async Task<IActionResult> UploadAsync(string container, string uploadDirectoryPath, 
         IFormFile file) {
     var dataLakeServiceClient = new DataLakeServiceClient(connString);
     var dataLakeFileSystemClient = dataLakeServiceClient.GetFileSystemClient(container);
     var dataLakeFileClient = dataLakeFileSystemClient
                             .GetFileClient(Path.Combine(uploadDirectoryPath, file.FileName));
 
     var fileStream = file.OpenReadStream();
     var mimeType = GetMimeType(file.FileName);
     var uploadOptions = new DataLakeFileUploadOptions()
     {
         HttpHeaders = new PathHttpHeaders() { ContentType = mimeType }                
     };

     await dataLakeFileClient.UploadAsync(fileStream, uploadOptions);
     return Ok();
}

private string GetMimeType(string fileName)
{
    var provider = new FileExtensionContentTypeProvider();
    if (!provider.TryGetContentType(fileName, out var contentType))
    {
        contentType = "application/octet-stream";
    }
    return contentType;
}

More about content types and GetMimeType method that I am using here.

score -1 · Answer 10 · edited Oct 10 '21 at 23:41

-1

You can use Azure Storage Explorer to do this manually. Right-click the file to change and select Properties. Go to ContentType and edit the value to the correct one i.e. "video\mp4"

edited Oct 10 '21 at 23:41

Dharman

30,962
25
85
135

answered Oct 08 '21 at 10:49

Miguel

1

2

Can you edit this post to make it more assertive? Note that the Question says "I do not want to do it manually for each file by going in blob interface" – Scratte Oct 09 '21 at 08:51

Set Content-type of media files stored on Blob

10 Answers10

Linked