🌏 Translated with the assistance of DeepSeek and ChatGPT

PromptAttachment

The attachment ability of Prompt is enabled by uploadConfig, and the attachment list is rendered by PromptAttachment. It reads the file list of the upload module inside Prompt and shows the thumbnail, the name, the progress and the actions of every file, keeping no file data of its own.

Basic Usage

Once uploadConfig is given to Prompt, the selected files are handed to the upload module and the attachment area renders PromptAttachment by default. The type of uploadConfig is PromptUploadConfig: it extends the upload configuration (accept, multiple, action, customRequest, defaultFileList and so on) and adds draggable and pasteable to control dropping and pasting.

abortable controls whether the running and the queued uploads can be aborted, showProgress controls the upload progress and previewable controls whether the image thumbnails can be previewed. Place your own PromptAttachment in the attachment slot to change these defaults.

Attachment

abortable

showProgress

previewable

• 
  preview.png
• notes.md

Attach files with the button, by drag or by paste

Hide source code

Attachment Actions

The scope of the attachment, start, end and send slots provides the attachment actions: fileList is the current file list, open and addFiles add files, submit, retry and abort control the uploads, remove and clear drop files, and download is handed to customDownload. submit, retry and abort run on every matching file when no file id is given.

The following example turns autoUpload off, so new files stay pending until the submit of the scope uploads them all.

1 file(s)

• notes.md

Use the actions above the attachment list

Hide source code

Standalone Usage

PromptAttachment reads its file list from the upload context, so it is not limited to Prompt: placed in the file-list slot of Upload, it replaces the default file list with the same cards, while the accept, multiple, customRequest, draggable and other options of Upload keep working.

• 
  preview.png
• notes.md

Hide source code

API

PromptAttachmentProps

Attribute	Type	Optional	Default	Description	Version
abortable	boolean	True	true	Whether the running and the queued uploads of the attachment list can be aborted.	0.2.1
showProgress	boolean	True	true	Whether the upload progress is shown in the attachment list.	0.2.1
previewable	boolean	True	true	Whether the images of the attachment list can be previewed.	0.2.1

PromptUploadConfig

Attribute	Type	Optional	Default	Description	Version
draggable	boolean	True	true	Whether files can be dropped into the input area of Prompt.	0.2.1
pasteable	boolean	True	true	Whether files can be pasted into the input area of Prompt.	0.2.1

PromptUploadScope

The scope type of the attachment slots; PromptAttachment reads its file list from it as well.

export type UploadProviderScope = {
	fileList: FileInfo[]
	mode: UploadProviderProps['mode']
	size: UploadProviderProps['size']
	disabled: boolean | undefined
	abortable: boolean | undefined
	download: (file: FileInfo) => void
	open: () => void
	addFiles: (files: File[], e?: Event) => void
	submit: (fileId?: string) => void
	retry: (fileId?: string) => void
	abort: (id?: string) => void
	remove: (id: string, e?: MouseEvent) => Promise<void>
	clear: () => void
}

export type PromptUploadScope = UploadProviderScope

FileInfo

export interface FileInfo {
	id: string
	name: string
	type?: string
	file?: File
	state: 'pending' | 'queueing' | 'uploading' | 'finished' | 'error'
	progress: number
	url?: string
	thumbnailUrl?: string
	response?: any
}