Skip to main contentCarbon Design System

Import pattern

The import action transfers data or objects from an external source into a system.

Status:

Maintainers:

Example of an import modal

Example of an import modal

Choose a file (modal)

Where a single file is imported, import can take place in a modal.

When importing, users should have the option of uploading a local file using the file upload component, offering file drag and drop and the ability to browse locally to select a file. Additionally, provide the ability to add a file from an external resource.

If additional actions (e.g. adding metadata) are required to be performed on the file(s), consider whether it would be more appropriate to use a side panel or full page instead of a modal.

Example of an import modal

Example of an import modal

Example of drag and drop file import

Example of drag and drop file import

Example of loaded files in the import modal

Example of a loaded file in the import modal

Import from a URL (modal)

If your product supports importing from a URL, use this method.

Example of importing with a URL

Example of importing with a URL

Example of a file imported by URL

Example of a file imported by URL

Choose a file (full page or side-panel)

Use the drag and drop file upload component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.

If additional actions (e.g. adding metadata) are required to be performed on the file(s) they should be done separately to the file upload, prior to the import action being completed. This could be in a subsequent step or if there is sufficient space include those actions in a single step.

Example of an import dialog in a full page view

Example of an import dialog in a full page view

Example of drag and drop file import in a full page view

Example of drag and drop file import in a Slide over panel

Example of files loading into the import dialog

Example of files loading into the import dialog

Example of files loaded in the import dialog

Example of files loaded in the import dialog

Import from a URL (full page or side-panel)

If your product supports importing from a URL, use this method.

Example of importing with a URL

Example of importing with a URL

Example of importing with a URL

Example of importing with a URL