DEV Community

Filip Němeček
Filip Němeček

Posted on • Edited on

3

iOS: How to generate image previews/thumbnails of various files

Quick Look framework powers file previews across iOS and you can use its power to generate thumbnail images for all kinds of files. For example PDFs, text files, Pages documents, Word documents, Keynote presentations, 3D models for ARKit or images.

Let's look how to use it. The first step is to import QuickLookThumbnailing or QuickLook which includes the thumbnail part and offers more functionality.

The thumbnail generation is responsibility of the QLThumbnailGenerator .
Next step is to create its instance:

let previewGenerator = QLThumbnailGenerator()
let thumbnailSize = CGSize(width: 60, height: 90)
let scale = UIScreen.main.scale
Enter fullscreen mode Exit fullscreen mode

I have also created constant that we will use later on.

This class offers method generateBestRepresentation which will create the thumbnail and report the result with completion handler. It automatically works on background thread so you don't have to worry about it. Just be careful trying to update UI from the handler.

The method takes single parameter and that is special "request" type QLThumbnailGenerator.Request.

Here is an example of one:

let request = QLThumbnailGenerator.Request(fileAt: url, size: self.thumbnailSize, scale: self.scale, representationTypes: .thumbnail)
Enter fullscreen mode Exit fullscreen mode

The most important part is URL of the file for which to create thumbnail. If you have file in memory, you need to save it first and then use its URL to create thumbnail.

We have already specified the size and scale of the thumbnail. The last parameter specifies what kind of thumbnail we are interested in. For example you can ask for .icon or for .lowQualityThumbnail to get the result faster.

self.previewGenerator.generateBestRepresentation(for: request) { (thumbnail, error) in

    if let error = error {
        print(error.localizedDescription)
    } else if let thumb = thumbnail {
        thumb.uiImage // image available
    }

    group.leave()
}
Enter fullscreen mode Exit fullscreen mode

The completion handler will give you instance of QLThumbnailRepresentation if the thumbnail generation was successful. On iOS you can use its property .uiImage to get instance of UIImage.

And that is how you can create thumbnails for your files 🙂

I have more complete example of Quick Look framework on GitHub that covers thumbnails as well as QLPreviewController to open these files in your app.

Thanks for reading!

--
Need to focus on your iPhone? Get free WebBlock app for scheduled website blocking from the App Store!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay