Upgrading Umbraco 8 with ImageProcessor with media files in Azure blobs to Umbraco 9 and ImageSharp
After upgrading from Umbraco 8 to Umbraco 9 all media I had on my site configured to use Azure Blobs via ImageProcessor.Web and ImageProcessor.Web.Plugins.AzureBlobCache suddenly didn't work any more.
ImageProcessor in Umbraco 9 has been replaced with SixLabors.ImageSharp and it is very clearly stated that ImageProcessor is not supported on dotnet core so apparently it was also the end of the road with that and the ImageProcessor.Web.Plugins.AzureBlobCache plugin.
After reaching out the ImageProcessor’s maintaner (and ImageSharp’s for that matter) @JimBobSquarePants he kindly pointed me to the right direction: SixLabors.ImageSharp.Web.Providers.Azure
I hooked this up to my project (basically cleared and put AzureBlobStorageImageProvider before PhysicalFileSystemProvider of ImageSharp’s) and it worked — I could see all the images loaded — , however when creating uploading new media via Umbraco it always ended up in the ~/media folder in the website’s physical location.
In order to have full CRUD support for media files, as Umbraco 9 documentation points out it uses IFileSystem to access file system content, including media content. After further digging I came across this nuget Umbraco.StorageProviders which does exactly that: combine Umbraco’s IFileSystem over SixLabors.ImageSharp.Web.Providers.Azure.
Only at that point did I find out that this was also rather nicely documented on Umbraco here 🤦♂️. However, I realized that — at least for me — there was another breaking change regarding the structure of media:
The Umbraco 9 implementation with Umbraco.StorageProviders assumes that you configure a blob container to hold your media content under a separate folder called “media”. My Umbraco 8 installation on the other hand had a dedicated “media” container to hold all images directly. So this meant that I could not simply use that container but had to copy / move all content to meet the needs of this new structure.
My original Umbraco 8 structure — media content directly under the Container:
Tip: if you need to do what I had to do I recommend downloading Azure Storage Explorer which will allow you to copy and delete (i.e. move) all your files with just a few clicks.
Re-configuring to my new “umbraco” container with a media folder with all my images under it made it work finally:
- Add nuget reference to
Umbraco.StorageProvidersto your Umbraco 9 project - Update appsettings.config and declare the connection details to the Azure blob i.e.
3. Update Startup.cs and summon the magic
I hope this helps someone who also tries just googling the keywords but not hitting Umbraco 9’s documentation while also making the same mistake of not looking there in the first place 😃
Moral of the story:
