In some cases the data or file import requires more parameters, and therefore, the flow cannot just be covered with a simple upload component. The below examples show some tips and best practices for those cases.
Initiating the import
Use the Button component to start the import flow. As a general best practice, evaluate the hierarchy of all the buttons in the layout and choose primary, secondary or tertiary accordingly. The below example shows a use case where importing data is the highest in hierarchy.
Display the import form in a modal
In case a relatively short form is required to import data, a Modal dialog could be a good place to host the related form. In Forms, usually the primary button is used for navigating for submit actions, therefore, in order to not to interfere with the action hierarchy, use the tertiary button instead.
Displaying the import form in a side panel
In case the import requires a longer form or the user has a benefit from seeing more in the background, placing the import form in a side panel could be a good solution.
Importing data by uploading file(s) or from a URL
Depending on the use case and requirements, a file can be added either by uploading a fole fromt he user’s machine or by importing them from a URL. There could be cases when both methods are supported.
Indicating overall data import status
Communicate the export status to the user, it is recommended to use the Progress and Loading components and guidelines.
If possible, provide information on:
- How much time the export will take approximately
- Where the process currently stands
- Any details about the data that is relevant for the user at this point
In case this data is not available to the UI, use a simpler indicator.
Successful and failed imports
Similarly to the loading indication, it is recommended to provide relevant information to the user upon success or failure. If possible, show the filename (for both success and failure) and the reason for the error.
