Overview

Often, there is a need to contextualize the AI conversation. This can be done by typing text, setting rules, or requesting a specific response format. Sometimes, contextualization can happen via uploading files.

AI File Upload

2
do
false

Recommended

  • Start file upload when the user drops files in the AI Content area.
  • Provide the option to cancel an upload at any time.
  • Provide the option to delete an uploaded file at any time.
  • When removing a file clear file contents from the AI context.
dont
false

Not recommended

  • Avoid uploading unsupported file formats. Reject the file immediately instead.
  • Avoid cancelling entire batch of file uploads when just a few are showing errors.

See Also

AI Drag and Drop

Anatomy

Image
1
21.33; 36.45
File Name
2
29.33; 58.37
Progress Indicator
3
18.67; 85.86
Cancel Upload
4
46.22; 85.86
Delete Uploaded File
5
69.78; 37.85
Upload Error
6
81.78; 78.88
Retry Upload

The File upload consists of a container containing the File Name, Progress Indicator, and action area. When the File Upload is in an error state, an additional semantic icon for error is displayed to signify the state. The actions in the actions area also change based on the upload state.

2
do
false
  • Always display the action buttons
  • Always display semantic icon in error state
  • Display file content if possible (e.g. images)
dont
false
  • Don't use success and warning semantic states
  • Don't show upload percentage
  • Don't show file extension

Behavior

When the user drops a file in the AI Content area, the File Upload is shown in its uploading state. The component stays in this state until the upload finishes or fails. When the upload finishes, the upload moves to the uploaded state. If the upload fails, the component switches to an error state. The error state provides the option to retry the upload, which returns the File Upload to its uploading state.

When uploading multiple files, this behavior occurs for each File Upload independently and asynchronously.

AI File Upload Behavior

2
do
false
  • Place the request in error state when upload fails
dont
false
  • Don't require confirmation to cancel an upload
  • Don't require confirmation to delete an upload

Responsiveness

The File Upload is innately responsive as it is a content container—all interactive contents of the file upload need to have touch-optimized sizes. In the case of the File Upload, those are the action buttons.

AI File Upload - Responsiveness

Resources

Design Resources

BTP Visual Design - AI File Upload