CODEWITHSUNDEEP
c#asp.netfile-uploadazure-blob-storage
Matthew Verstraete
Matthew Verstraete

Reputation: 6791

Unable to upload images to Azure blob from HTML upload

I am trying to save images that users upload via a webpage to Azure Storage as a blob. I have built the code and tested it out, I am connecting and creating the blob with no problems but it does not seem to be saving the file correctly as when I access the file via HTTP I just get the "Broken image" icon. If I download the file directly form the Azure Portal and try to open it in an image editor (paint) I get a message saying the file is not a valid bitmap file. You can see the file I just tried to upload at

https://gisstore01.blob.core.windows.net/ffinfofiles/Test/Core/Logo.jpg

and here is the code I am using to upload the files. I have no idea what is wrong here, any advice?

        var StorageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"].ToString());
        var BlobClient = StorageAccount.CreateCloudBlobClient();
        var Container = BlobClient.GetContainerReference("ffinfofiles");
        var FileExtension = Path.GetExtension(UploadedFile.FileName.ToLower());
        var BlobBlock = Container.GetBlockBlobReference(FileName + FileExtension);
        BlobBlock.Properties.ContentType = UploadedFile.ContentType;

        using (UploadedFile.InputStream)
        {
            BlobBlock.UploadFromStream(UploadedFile.InputStream);
        }

O, this is an ASP.Net 4.6 application using C#.

Upvotes: 0

Views: 1618

Answers (1)

Matheus Guimaraes
Matheus Guimaraes

Reputation: 96

I've run a quick prototype and I managed to upload and download the image just fine, so I suspect your problem could be one of the following:

1)Blob containers don't allow public access by default. It may be that the image is stored fine at the moment, but your browser just doesn't have permission to see it. Have a look at your "ffinfofiles" blob container setting and make sure that "Public Read Access" is set to true

2)The information that you are using to set up the upload call is all dynamic so there is always the possibility that the data you are passing in as arguments is wrong. Double check that UploadedFile.FileName.ToLower() s correct ad more importantly that UploadedFile.ContentType is correct

3)Continuing the thought from item 2 above, you have to make sure that UploadedFile.InputStream is valid. Unless you are indeed streaming the file content from another source other than your local disk, I would actually just read the file bytes and use the BlobBlock.UploadFromByteArray() overload. Keep in mind that by doing this though you are effectively reading files into memory first, but it shouldn't be a problem if your files are small enough like a jpg in this case

Conclusion:

Here's the code I used as proof of concept. 

var StorageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"].ToString());
var BlobClient = StorageAccount.CreateCloudBlobClient();
var Container = BlobClient.GetContainerReference("ffinfofiles");
Container.CreateIfNotExists();

var BlobBlock = Container.GetBlockBlobReference(filename);
BlobBlock.Properties.ContentType = "image/jpg";
var fileContent = System.IO.File.ReadAllBytes(Server.MapPath("~/images/" + filename));
BlobBlock.UploadFromByteArray(fileContent,0,fileContent.Length);

PS: To improve this further, consider using the Async overload, namely BlobBlock.UploadFromByteArrayAsync()

Upvotes: 1

Related Questions