Codestories

The adventures of a brave coder

Swiftui how to show a thumbnail codestory

Generating Thumbnails in SwiftUI with QLThumbnailGenerator (iOS 13+)

Apple provides a number of powerful tools for building modern iOS applications, including the ability to generate thumbnails for files. One way to do this is through the use of the QLThumbnailGenerator class, which is part of the QuickLook framework.

The QLThumbnailGenerator class provides a simple interface for generating thumbnails for a variety of file types, including images, documents, and video files. To generate a thumbnail, you first need to create a QLThumbnailGenerator.Request constant, which specifies the file you want to generate a thumbnail for, the size of the thumbnail, the scale of the thumbnail, and the representation types you want to generate.

In the following code snippet, we use the QLThumbnailGenerator.Request struct to create a thumbnail request for a file located at a given URL. We create a QLThumbnailGenerator instance and use the generateRepresentations(for:completionHandler:) method to generate a thumbnail for the given request. This method takes a closure as an argument, which is called when the thumbnail generation is complete. In the closure, we check for any errors that may have occurred during thumbnail generation and, if no errors occurred, we set the thumbnail image to the cgImage property of the thumbnail object:

import QuickLookThumbnailing

func generateThumbnail(_ fileURL: URL) {
    let size: CGSize = CGSize(width: 68, height: 88)
    let request = QLThumbnailGenerator.Request(fileAt: fileURL, size: size, scale: (UIScreen.main.scale), representationTypes: .all)
    let generator = QLThumbnailGenerator.shared

    generator.generateRepresentations(for: request) { (thumbnail, type, error) in
        DispatchQueue.main.async {
            if thumbnail == nil || error != nil {
                assert(false, "Thumbnail failed to generate")
            } else {
                DispatchQueue.main.async {
                    self.thumbnail = thumbnail!.cgImage
                }
            }
        }
    }
}

Using the QLThumbnailGenerator class is easy to generate thumbnails for files in your SwiftUI app. This can be useful for previewing documents, images, or other types of files without having to open them.

Here is a full testable code:

import SwiftUI
import QuickLookThumbnailing

struct ContentView: View {
    
    @State private var isShowDocumentPicker = false
    @State private var fileURL: URL?
    @State private var thumbnail: CGImage?
    
    var body: some View {
        VStack(spacing: 16) {
            
            if let thumbnail {
                Image(thumbnail, scale: 2, label: Text("PDF"))
                    .border(.blue, width: 4)
            }
            
            Button("Open file") {
                isShowDocumentPicker = true
            }
        }
        .fileImporter(isPresented: $isShowDocumentPicker,
                        allowedContentTypes: [.pdf, .text],
                        allowsMultipleSelection: true) { result in
            fileURL = try? result.get().first
            
            if let fileURL {
                generateThumbnail(fileURL)
            }
        }
    }
    
    func generateThumbnail(_ fileURL: URL) {
        let size: CGSize = CGSize(width: 68, height: 88)
        let request = QLThumbnailGenerator.Request(fileAt: fileURL, size: size, scale: (UIScreen.main.scale), representationTypes: .all)
        let generator = QLThumbnailGenerator.shared

        generator.generateRepresentations(for: request) { (thumbnail, type, error) in
            DispatchQueue.main.async {
                if thumbnail == nil || error != nil {
                    assert(false, "Thumbnail failed to generate")
                } else {
                    DispatchQueue.main.async {
                        self.thumbnail = thumbnail!.cgImage
                    }
                }
            }
        }
    }
}

This code utilizes the fileImporter modifier to choose a file and shows the thumbnail after.

īŖŋ https://developer.apple.com/documentation/quicklookthumbnailing/qlthumbnailgenerator