Back to Directus

Upload & Access Files

content/getting-started/6.upload-files.md

latest2.0 KB
Original Source

:video-embed{video-id="43612e4c-1bd9-411e-bd73-9c835a9b51e0"}

This guide will cover importing a file via URL, requesting assets, and using transformation parameters.

:cta-cloud

Import a File

In the module bar, click :icon{name="material-symbols:folder-outline-rounded"} to go to the files module. Click the :icon{name="material-symbols:add"} button and :icon{name="material-symbols:link"} to import a file via URL.

Use https://directus.io/docs/img/examples/files-import.png and the file will be uploaded to your asset storage.

Access a File

The uploaded file is immediately available via the Data Studio for users with the correct access control. From here, you can download, edit, or replace files.

<!-- IMAGE OF FILE DETAIL PAGE SHOWING ID -->

You can access files via URL in your applications by using the following URL pattern:

https://example.directus.app/assets/<file-id>?access_token=token

The token must belong to a user who has access to read files in the directus_files collection. If the public role has read access, you can omit the access_token parameter.

::callout{icon="material-symbols:menu-book-outline" color="primary" to="/guides/auth/access-control"} Learn how to limit access to data in your project through custom permissions. ::

Transform an Image

Directus can transform images via query parameters, commonly used to provide the most suitable size and file format.

Add the following query parameter to the end of your file URL:

width=200

Your new URL should look like this:

https://example.directus.app/assets/<file-id>?access_token=token&width=200

The asset will be transformed, saved to your asset storage, and returned to the user. On subsequent requests, the already transformed asset will be returned.

Next Steps

Read more about uploading files, advanced transformations, and then refer to the Files API reference to manage user accounts.

::callout{icon="material-symbols:code-blocks-rounded" color="green" to="/api/files"} Explore the Files API Reference. ::