Previewing Files Inside Your Xamarin.iOS App

Jimmy Garrido

If your app interacts with files, such as email attachments or photos, allowing users to preview those files without leaving your app is a great way to enhance the user’s experience. Fortunately, iOS makes adding this feature simple by providing the document interaction controller and the Quick Look preview controller. In this post, you will learn the differences between the two options and how you can implement them in your app.

All the code below is available as a sample app on GitHub.

Document Interaction Controller

The document interaction controller is the more straightforward option to implement. As the name suggests, not only can it be used for previewing, it can also enable other file interactions, such as opening with another app, copying, or printing.

To use the document interaction controller, start by creating a class that inherits from UIDocumentInteractionControllerDelegate. While most of the delegate methods are optional, in order to enable previewing you must override the ViewControllerForPreview method. This method must return a view controller that the document interaction controller can use as its parent. You can define a constructor with a UIViewController parameter so you can pass in the parent view controller:

public class MyInteractionDelegate : UIDocumentInteractionControllerDelegate
{
    UIViewController parent;

    public MyInteractionDelegate(UIViewController controller)
    {
        parent = controller;
    }

    public override UIViewController ViewControllerForPreview(UIDocumentInteractionController controller)
    {
        return parent;
    }
}

When you are ready to present the preview, create a new document interaction controller by using the UIDocumentInteractionController.FromUrl method and passing it the path to the file. Then set its Delegate property to a new instance of the class above and call PresentPreview:

var previewController = UIDocumentInteractionController.FromUrl(
    NSUrl.FromFilename("sampledocs/gettingstarted.pdf"));

previewController.Delegate = new MyInteractionDelegate(this);
previewController.PresentPreview(true);

Gif demonstrating the document interaction controller opening a preview of a pdf document followed by a photo

Other Interaction Options

As mentioned earlier, the document interaction controller offers more than just previews. Calling PresentOptionsMenu instead will present a menu with apps installed that can open the file and other options such as copying or printing the file. PresentOpenInMenu is similar except it will only show the list of apps that can open the file.

Screenshot of menu options for PresentOptionsMenu and PresentOpenInMenu
Menu options for PresentOptionsMenu (left) and PresentOpenInMenu (right)

Quick Look Preview Controller

Unlike the document interaction controller, the Quick Look preview controller can only preview files. It also requires a data source, however, the benefit of this is that it can preview multiple files at the same time.

To begin, create a class that inherits from QLPreviewControllerDataSource. You will need to override the following methods:

  • PreviewItemCount – returns an nint for the number of files to be previewed.
  • GetPreviewItem – returns the current preview item. The object must implement IQLPreviewItem in order to provide the controller the path to the file.

Create a new class inheriting from QLPreviewItem and override the ItemUrl method to return the file’s path. You can also override ItemTitle if you want to customize the title that is shown for the preview.

public class QuickLookSource : QLPreviewControllerDataSource
{
    List documents;

    public QuickLookSource(List docs)
    {
        documents = docs;
    }

    public override nint PreviewItemCount(QLPreviewController controller)
    {
        return documents.Count;
    }

    public override IQLPreviewItem GetPreviewItem(QLPreviewController controller, nint index)
    {
        return new PreviewItem(documents[(int)index]);
    }
}

public class PreviewItem : QLPreviewItem
{
    NSUrl fileUrl;

    public override NSUrl ItemUrl => fileUrl;
    public override string ItemTitle => fileUrl.LastPathComponent;

    public PreviewItem(string url)
    {
        fileUrl = NSUrl.FromFilename(url);
    }
}

To present a preview, create a new QLPreviewController and set DataSource to you data source class. Since the controller can preview multiple files, make sure to set CurrentPreviewItemIndex before navigating to the controller:

var previewController = new QLPreviewController();
previewController.DataSource = new QuickLookSource(source.Documents);

previewController.CurrentPreviewItemIndex = indexPath.Row;
NavigationController.PushViewController(previewController, true);

// You can present modally instead
// PresentViewController(previewController, true, null);  

Gif showing the Quick Look controller opening a preview of multiple files

Wrap up

Adding file previews to your app can be a quick and simple way to increase user engagement in your app. This post gave you an overview on how to get started with file previews so check out Apple’s documentation to learn even more about interacting with documents on iOS. Happy coding!

2 comments

Discussion is closed. Login to edit/delete existing comments.

  • Sunil Prakash Paudel 0

    Hello Jimmy,
    Can you please share example in Xamarin forms.
    My following code is not working.
     var PreviewController = UIDocumentInteractionController.FromUrl(NSUrl.FromFilename(path));            PreviewController.Delegate = new UIDocumentInteractionControllerDelegateClass(UIApplication.SharedApplication.KeyWindow.RootViewController);            Device.BeginInvokeOnMainThread(() =>            {                PreviewController.PresentPreview(true);            });

  • Jacek Kłobut 0

    Hi Jimmy,
    How about using UIDocumentInteractionController to open PDF or DOCX file in external app to edit/fill form fields and then return to the original Xamarin app like Intent.ActionEdit in Android? Is this right direction or should I go different way?
    Thank You in advance
    JK

Feedback usabilla icon