Create a File Type Plugin

Overview

By default, the Webiny File Manager has a preconfigured plugin for image files, and a fallback plugin to render any other file type using a default icon. Out of the box, it looks like this:

Default File Type Plugins

(click to enlarge)

In this guide, we go through ways of implementing your own renderers for file types of your choice.

Using the Built-in Plugin

The easiest way is to use the built-in FileManagerFileTypePlugin class. Let’s configure a plugin that will render files of type video/mp4:

Now your File Manager will display files like this:

Custom video/mp4 Renderer

(click to enlarge)

Using Glob Patterns

You can also define types using globs, which will be matched using the minimatch library.

You can define multiple file type plugins, and your plugins may have overlapping types definitions. Webiny will go through all of your plugins, and the last one to match wins.

Custom File Actions

When you open the file details sidebar, you’ll notice there are several actions available out of the box:

Default File Actions

(click to enlarge)

You can add your own actions here using the same file type plugin you used to define the custom renderer:

Now your file details sidebar will contain this new custom action:

Custom File Action

(click to enlarge)

Custom Plugin Classes

The FileManagerFileTypePlugin class can be used as is, but you can also extend it and create your own classes for different file types: