So, as part of my on-going project I’ve recently made the decision to shift all my images (uploaded by ME and my USERS) to Azure Blob Storage, instead of the quite frankly ridiculous ‘unique folder system’ ™ that I had been using.
Now, originally I’d been using ImageResizer which was working well, buut, it didn’t work (the way I was using it) with Azure Blobs (at least not in an efficient way).
So.
I do the standard of searching for ‘ImageResizer Azure’ on google, and first on the list: AzureReader plugin, which being me, before I’ve actually clicked on the link I’ve switched to Visual Studio and added the AzureReader nuget package to my site (which is MVC4, using Azure SDK 2 by-the-by). Whilst that installs, I switch back to the browser, and read this: See AzureReader2 if you're using the Azure SDK 2.0. ah.
Uninstall the AzureReader package, install AzureReader2 package.
Bump.
That’s the sound of me hitting a wall. The documentation for both the AzureReader and AzureReader2 plugins are – well – minimalist, sure, they explain about the config settings (and the AzureReader page even explains how to add to azure) but not really on how you would use it. LUCKILY it’s pretty simple, so here goes, this is how to setup AzureReader2 with ImageResizer on an MVC4 Website.
1. Create a new Mvc4 site
(obviously if you have a site already, you can skip this bit) I’m going with an Empty site in my one (with no test project – basically because I’m lazy).
2. Add the nuget packages you need
- Windows Azure Storage (>= 2.0.4.0)
- ImageResizer Web.Config Installation for MVC
- ImageResizer Web.Config Installation
- ImageResizer.Mvc – MVC-friendly utilities
- ImageResizer
- ImageResizer.Plugins.AzureReader2 – Process images from the Azure blobstore
- Image Resizer Fluent Extensions for ASP.NET MVC
- Image Resizer Fluent Extensions
(if you search for and install the ones in blue, you will get the others installed)
3. Start the Storage Emulator
(Yes – I have made a big assumption here that you have the Azure SDK installed – if you don’t – now would be a good time to install it, then come straight back here)
4. Create a container on the development storage
Easiest way to do this (for me) was to use Visual Studio’s Server Explorer:
Give it any name you want, I’ve gone with: imageresizer-example
5. Upload an image to your blob container
Double click on the container, and click on the Upload Blob button:
Then select a biggish image, and whack it in…
So now you should have something like: 
6. Web.Config Edits
They gotta be done, and this is where the meat is, if we go down to the bottom of our Web.Config file, we should see a ‘resizer’ element, which will look something like:
<resizer>
<plugins>
<add name="MvcRoutingShim" />
</plugins>
</resizer>
We need to add our AzureReader2 plugin:
<add name="AzureReader2" connectionString="UseDevelopmentStorage=true" endpoint="http://127.0.0.1:10000/devstoreaccount1/" />
This is the minimum you need to get working.
7. Run
Press CTRL+F5 and ignore any errors you see – there’s no page to display in an empty solution – but that’s of no concern to us. My one started up on port 4598, so replace 4598 with whatever your port is.
In the browser you have open – navigate to: http://localhost:<PORT>/azure/<container>/<file>, so in my case I’m going to: http://localhost:4598/azure/imageresizer-example/example.jpg
Did you get a 404 error? This is because the container we created earlier doesn’t have public permissions. To change this, we’re going to make it public at the blob level, (you can go container if you really want to).
8. Change public access
Right click on the container in the server explorer within visual studio, and go to the ‘Properties’ page. Here, set the PublicAccess property to ‘Blob’:
Go back to your browser and refresh the page
One thing to note is that the URL despite what you typed in, now points to the Azure Blob url directly:
This is because we’re not doing any modifications to the picture, so ImageResizer has just forwarded us directly to the blob, which is nice. But lets get ImageResizer doing a resize:
9. Resizing
Very VERY simple. Just add ?width=200 to the end of your url (obviously if the picture you are pulling isn’t at least 200 pixels wide this will have no effect). So:
http://localhost:<PORT>/azure/<container>/<file>?width=200,
Aceness!
Now – yes – I’m using Azure (now), but personally I’d rather hide that fact so if I decide to go S3, I don’t have to update all my URLs, luckily – this is all in the config, so last thing:
10. Web.Config changes (again)
Let’s edit our plugin line and add the ‘prefix’ attribute.
<add name="AzureReader2" prefix="~/cloud/" connectionString="UseDevelopmentStorage=true" endpoint="http://127.0.0.1:10000/devstoreaccount1/" />
now all the links will look like:
http://localhost:<PORT>/cloud/<container>/<file>?width=200
which is pretty cool.
Conclusions
ImageResizer is – well, Awesome. I’m personally going to be getting a license soon (I’ve not used this in production yet), but I can’t see any reason why I wouldn’t.
If you need ImageResizing I have yet to find a better alternative – and it’s really not that expensive (by the by – full disclosure – I have not received anything to influence me. This is all from personal research)
I’ve put my files here: http://sdrv.ms/V4DSnV but you’ll still need to create the azure container yourself. 7Zip appears to do a weird unzip and doesn’t create the empty folders as folders, so if it doesn’t load with a ‘missing app_data’ folder error – that’s why.
Addendum
I believe – if you are looking for a connection config element for a production system you want something like this:
<add name="AzureReader2" connectionString="DefaultEndpointsProtocol=https;AccountName=NAME;AccountKey=KEY" endpoint="http://NAME.blob.core.windows.net/" />
Though – this is speculation – I can’t confirm the results as I’m not running this against a production server at the moment. I’ll let you know if it’s NOT that.