Blob Storage Images - Azure

2
votes

I have some problems with images that I upload through my web api to a public container in my blob storage. The problem is that i need the image i uploaded through my api have to be browseable, i mean when put the public link in a browser you can see the image in the browser, but the actual behavior is that when i put the link the image make a download of the image and doesnt show me nothing in the browser But when i Upload the image through the azure portal i can see the image as I want.... I have my container public and i dont know what else to do.... my code to upload a image is this:

    private readonly CloudBlobContainer blobContainer;

    public UploadBlobController()
    {
        var storageConnectionString = ConfigurationManager.AppSettings["StorageConnectionString"];
        var storageAccount = CloudStorageAccount.Parse(storageConnectionString);
        var blobClient = storageAccount.CreateCloudBlobClient();
        blobContainer = blobClient.GetContainerReference("messagesthredimages");
        blobContainer.CreateIfNotExists();
        blobContainer.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
    }

    [HttpPost]
    [Route("UploadImagetoBlob")]
    public async Task<IHttpActionResult> UploadImagetoBlob()//string imagePath
    {
        try
        {
            var image = WebImage.GetImageFromRequest();
            var imageBytes = image.GetBytes();
            var blockBlob = blobContainer.GetBlockBlobReference(image.FileName);
            blockBlob.Properties.ContentType = "messagesthreadimages/" + image.ImageFormat;
            await blockBlob.UploadFromByteArrayAsync(imageBytes, 0, imageBytes.Length);
            return Ok(blockBlob.Uri.ToString());
        }
        catch (Exception)
        {
            return BadRequest();
        }

    }

Examples, I hope somebody can help me with this.

What I Want => Correct
What I dont Want => Incorrect

2
blobazure-blob-storageblobstorage
do you have the azure storage desktop app? – Neville Nazerane
Nop, the services is azure blob storage, but my app upload images to that storage – eflorespalma
yes there is a desktop app that is handy to monitor the azure blob storage. – Neville Nazerane
@NevilleNazerane yep throught the desktop y through the portal is ok.. The problem is when my web api method upload the image – eflorespalma
well the app helped me debug several such issues. Anyways look at my answer, that should help you figure out your issue – Neville Nazerane

2 Answers

1
votes

I have faced the same issue before. Browsers download a file when they do not know the format (file type). If you monitor the files with the desktop app (no sure where this option is in the portal), you will find the file types.

These file types are set based on the blockBlob.Properties.ContentType you are setting. You need to inspect and check what exactly image.ImageFormat returns. The browser would only display the image if the this value is set to something like "image/jpeg". However since you are using "messagesthreadimages/" + image.ImageFormat, it might be setting something like "messagesthreadimages/image/jpeg".

1
votes

As Neville said, you have some misunderstand when you call SetProperties method like blockBlob.Properties.ContentType.

Content-Type indicates the media type of the message content.

The image content type allows standardized image files to be included in messages. For more detail,you could refer to this link.

image/g3fax [RFC1494]
image/gif [RFC1521]
image/ief (Image Exchange Format) [RFC1314]
image/jpeg [RFC1521]
image/tiff (Tag Image File Format) [RFC2301]

I read this article and it seems that you would customize the ContentType of image. So, you could change code as below:

blockBlob.Properties.ContentType = "image/" + image.ImageFormat;