Convert ASP.NET Web Form App with Image Uploads to Azure

Question

So I'm working on moving a web app to Azure and the one thing that is tripping me up is how to deal with image uploads. Currently, I'm handling uploads with ImageResizer and saving them to a directory:

    Protected Function DoHeaderUpload() As Guid?
    If HeaderUploadControl.HasFile Then
        If HeaderUploadControl.PostedFile.ContentType.StartsWith("image/") Then
            If HeaderUploadControl.PostedFile.ContentLength < 3145728 Then ' 3MB max size
                Dim myFileGuid = System.Guid.NewGuid()
                Dim i As ImageResizer.ImageJob = New ImageResizer.ImageJob(HeaderUploadControl.PostedFile,
                                                                           "~/Images/Headers/" & myFileGuid.ToString() & ".jpg",
                                                                           New ImageResizer.Instructions("height=100;format=jpg;mode=crop"))
                i.Build()
                Return myFileGuid
            Else
                HeaderUploadError.Text = "<br>File exceeds 3MB maximum size"
                HeaderUploadError.IsValid = False
            End If
        Else
            HeaderUploadError.Text = "<br>Only image uploads are supported"
            HeaderUploadError.IsValid = False
        End If
    End If
End Function

I found a code excerpt that will populate a blob from the memory stream output from ImageResizer (link).

However, I'm a bit unclear on how to embed/reference these images in my site. Currently I'm just doing this (for example):

HeaderImage.Src = String.Format("/Images/Headers/{0}.jpg", .HeaderImage.ToString())

I guess I could just include the full URL prefix to the blob, but that seems like a bad idea (and would break things when running locally for testing).

Could I use a virtual path that points to an Azure Files share instead of Azure Blob?

I saw AzureReader2 for ImageResizer which is tempting, but it seems super expensive. It seems like that could be a pretty easy solution as well, since it looks like it auto-redirects references with a certain prefix to the Azure Blob location.

I guess the question is: what is the easiest way to do this? I've kind of been going in circles with the various options.

Thanks!

score 0 · Accepted Answer · answered Jun 17 '17 at 20:42

I ended up using the solution where I prefix the appropriate URL to get to the blob storage. To make it work locally and remotely, I added a transform:

<appSettings>
   <add key="BlobURLPrefix" value="http://myapp.blob.core.windows.net"
        xdt:Locator="Match(key)"
        xdt:Transform="SetAttributes(value)"/>
</appSettings>

Then when I need to reference an image location, I can do something like this:

FullUrl = ConfigurationManager.AppSettings("BlobURLPrefix") + ImagePath

Not entirely elegant, but it suits my purposes reasonably well and is pretty easy to implement.

Convert ASP.NET Web Form App with Image Uploads to Azure

1 Answers1