Manage Files

When a file is clicked in the file listing page, the file details page is shown. This is a custom form for viewing assets and embeds, with core fields included out-of-the-box (see below), and the ability for administrators to add additional custom fields. This page has the same features and functionality as the item page.

Action Buttons

Notice the following buttons in the header:

• :icon{name="material-symbols:check-circle"} – Saves any edits made to the file.
• :icon{name="material-symbols:tune"} – Opens the image editor.
• :icon{name="material-symbols:download"} – Downloads the file to your current device.
• :icon{name="material-symbols:drive-file-move-outline"} – Moves selected file(s) to another folder.
• :icon{name="material-symbols:delete-outline"} – Permanently removes the file and its metadata. This action is permanent and cannot be undone.

::callout{icon="material-symbols:info-outline"} Deleting Files Linked to Items By default, Directus will not allow you to delete a file until you remove it from any and all related items. However, this behavior can be reconfigured so that files automatically update when the image is deleted by setting the relational constraint of your file field to SET NULL or CASCADE when the file is deleted. ::

File Details

The files collection comes pre-configured with the following fields out of the box. New fields can be created and customized as needed in Settings > Data Model under the directus_files collection. However the pre-configured Fields cannot be changed or deleted.

• Preview: a preview of the image or file.
• Title: a title for the File.
• Description: a description of the File.
• Tags: keywords used for search-ability.
• Location: an optional location (e.g. where a photo was taken).
• Storage: which storage adapter is used to store the file asset.
• Filename (Disk): This is the actual name of the file in storage. This cannot be modified.
• Filename (Download): allows you to set the name of the file when it is downloaded.

File Sidebar

The file sidebar also includes the following details, which are not editable and serve as metadata.

• Type: the MIME type of the file, displayed in the App as a formatted media type.
• Dimensions: images only. The width and height of the image in pixels.
• Size: the file-size the asset takes up in the storage adapter.
• Created: the timestamp of when the file was uploaded to the Project.
• Owner: the User that uploaded the file to the Project.
• Modified: the timestamp of when the file was last modified.
• Edited By: the User that modified the File.
• Folder: the current parent folder that contains the File.
• Metadata: metadata JSON dump of the File's Exif, IPTC, and ICC information.

Edit an Image

Rotate, crop, flip, adjust aspect ratios, or set focal points of an image.

1. From the File Library, click a file to open its detail page.
2. Click the :icon{name="material-symbols:tune"} button in the top right to open the image editor.
3. Make your changes and click :icon{name="material-symbols:check"} in the top right to save the updates.

::callout{icon="material-symbols:warning-rounded" color="warning"} Irreversible Change Edits overwrite the original file on disk. This can't be reversed. ::

Set a Focal Point

:video-embed{video-id="fcb6f3f2-d6f3-4905-a3d9-b44aed7bb25c"}

By default, Directus will crop images around the center when specific sizes are requested. Focal points change the center point to specific coordinates.

1. From the File Library, click a file to open its detail page.
2. Click the :icon{name="material-symbols:tune"} button in the top right to open the image editor.
3. Click the :icon{name="material-symbols:location-searching"} button to select a focal point.
4. Make your changes and click :icon{name="material-symbols:check"} in the top right to save the updates.