Easy Thumbnail Images with Azure Functions and CloudConvert

This blog is presented as a part of C# Advent 2023. Follow the link to check out the rest of the excellent C# and .NET content coming out as 2 blogs per day between December 1 - 25.

Have you ever built an application that needed to generate and display thumbnail images? Thumbnail images for any type of image: PNG, JPG, GIF, HEIC, HEIF, SVG… And not just thumbnails for image files but for PDFs, documents, and other random files that users may throw at it? Unless you are building a very custom implementation, this is a perfect opportunity to outsource complexity to a service that specializes in what you need.

Architecture Overview

For this article, we’ll be demonstrating asynchronous thumbnail generation using Azure Functions, Azure Blob Storage (to store the source images and thumbnails), Azure Event Grid (for Blob upload event triggers), Cosmos DB (to store image metadata), and CloudConvert for our external thumbnail generation service.

CloudConvert offers a free tier with a daily file conversion limit and paid tiers with the option to purchase credits in bulk or as part of a monthly subscription.

The following diagram gives an overview of the flow:

Step 1: Get the source file

This first step will cover getting the source image or file ready to be converted to a thumbnail. The typical flow we follow includes:

  1. The application or user saves the file/photo to Azure Blob Storage
  2. Configure an Azure Event Grid System Topic to trigger when a new blob is created. When triggered, it will call an Azure Function.
  3. The Azure Function will be notified that a new blob is created. Here we can save metadata to a database (such as Cosmos DB).

Step 2: Call the CloudConvert API

Now our Azure Function can call the CloudConvert API to start the thumbnail generation. CloudConvert offers APIs and a .NET SDK to simplify this process. There are many options for uploading the file to CloudConvert, but the easiest option that moves all of the upload work to the API is to use the Azure Blob Import step. With a SAS Token, CloudConvert will fetch the file you specify, convert it, and then it can save the final thumbnail back to your Blob Storage using the path you specify.

Here is a code snippet for an example CloudConvertAPI.CreateJobAsync() call that will import the file, create the thumbnail, and save the thumbnail back to our blob storage:

jobResponse = await _cloudConvert.CreateJobAsync(new JobCreateRequest
{
    Tasks = new
    {
        import_blob = new ImportAzureBlobCreateRequest
        {
            Storage_Account = _azureOptions.StorageAccountName,
            Sas_Token = _azureOptions.StorageSasToken,
            Container = container,
            Blob = blob
        },
        create_thumbnail = new ThumbnailCreateRequest
        {
            Input = "import_blob",
            Input_Format = inputFormat,
            Output_Format = ThumbnailOutputFormat.png,
            Filename = thumbnailFilename,
            Width = 256,
            Height = 256,
            Fit = ThumbnailFit.max
        },
        export_blob = new ExportAzureBlobCreateRequest
        {
            Input = "create_thumbnail",
            Storage_Account = _azureOptions.StorageAccountName,
            Sas_Token = _azureOptions.StorageSasToken,
            Container = container
        }
    },
    Tag = "jobBuilder"
});

Step 3: Handle the completed thumbnail image

If you use a flow similar to the code above, CloudConvert will save the generated thumbnail in your Azure Blob Storage container. We can use the following steps to respond to the new thumbnail image:

  1. Configure a new Azure Event Grid System Topic or use the same topic as from Step 1 to trigger when a new blob is created. This will trigger when the new thumbnail image is saved.
  2. If needed, you can update your database with the thumbnail metadata and path.
  3. Since this whole process is asynchronous, we need to notify any clients that the thumbnail is ready (if the clients need to respond to the thumbnail being created).
    • For mobile clients, we can use Azure Notification Hub to push a silent notification to a mobile app to notify it that the thumbnail has been generated.
    • For web clients, we can use SignalR to notify the client that the thumbnail has been generated.

Conclusion

Writing your own code to handle every possible file type to generate thumbnails is a complex and error-prone process. If it fits your needs, you can use an existing service and the solution is more about configuring services along with code to connect each part of the flow. Depending on your use case, it may be well worth the small incremental cost of each thumbnail generation rather than building the whole thing yourself.

If you need help with a similar project or deciding what architecture is right for your project, contact Trailhead and we can guide you through it.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore With You

Ready to come with us? 

Together, we can map your company’s software journey and start down the right trails. If you’re set to take the first step, simply fill out our contact form. We’ll be in touch quickly – and you’ll have a partner who is ready to help your company take the next step on its software journey. 

We can’t wait to hear from you! 

Main Contact

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Thank you for reaching out.

You’ll be getting an email from our team shortly. If you need immediate assistance, please call (616) 371-1037.