Upload

File Types for accept

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

Rules

Basic Example

const rule = {
    type: "upload",
    field: "pic",
    title: "Carousel Images",
    value: [
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
        ],
    props: {
        action: "/upload.php",
        limit: 2,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Props Configuration Examples

Image Upload

const rule = {
    type: "upload",
    field: "image",
    title: "Product Images",
    value: [],
    props: {
        action: "/upload.php",
        listType: "picture-card",
        accept: "image/*",
        limit: 5,
        multiple: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

File Upload

const rule = {
    type: "upload",
    field: "file",
    title: "Attachment Upload",
    value: [],
    props: {
        action: "/upload.php",
        listType: "text",
        accept: ".pdf,.doc,.docx",
        limit: 3,
        multiple: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Limit File Size

const rule = {
    type: "upload",
    field: "file",
    title: "File Upload",
    value: [],
    props: {
        action: "/upload.php",
        accept: "image/*",
        onBeforeUpload: function (file) {
            if (file.size > 2 * 1024 * 1024) {
                return false; // Limit to 2MB
            }
            return true;
        },
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Drag and Drop Upload

const rule = {
    type: "upload",
    field: "file",
    title: "Drag and Drop Upload",
    value: [],
    props: {
        action: "/upload.php",
        draggable: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Events Examples

Handle Upload Status

const rule = {
    type: "upload",
    field: "file",
    title: "File Upload",
    value: [],
    props: {
        action: "/upload.php",
        onSuccess: function (file) {
            file.url = file.response.url;
        },
    },
    on: {
        change: (fileList, fileItem) => {
            console.log('File status changed:', fileItem.status);
        },
        error: (fileItem) => {
            console.log('Upload failed:', fileItem);
        },
        progress: (fileItem) => {
            console.log('Upload progress:', fileItem.percent);
        },
    },
}

Update Other Fields After Upload

const rule = [
    {
        type: "upload",
        field: "cover",
        title: "Cover Image",
        value: [],
        props: {
            action: "/upload.php",
            listType: "picture-card",
            accept: "image/*",
            limit: 1,
            onSuccess: function (file) {
                file.url = file.response.url;
            },
        },
        inject: true,
        on: {
            change: ($inject, fileList, fileItem) => {
                // Fill image URL after successful upload
                if (fileItem.status === 'done' && fileItem.url) {
                    $inject.api.setValue('coverUrl', fileItem.url);
                }
            },
        },
    },
    {
        type: "input",
        field: "coverUrl",
        title: "Cover URL",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Upload

value: Array | String

Note

After a successful upload, assign the URL from the API response to file.url via the onSuccess callback. Otherwise, the form cannot retrieve the component's data.

Props

Parameter	Description	Type	Default	Version
onSuccess	Callback when upload succeeds	(fileItem: FileItem) => void	-
accept	Accepted upload file types, refer to HTML Standard	string	-
action	Upload URL	string	-
disabled	Whether disabled	boolean	false
multiple	Whether to support multiple file upload	boolean	false
directory	Whether to support folder upload (requires browser support)	boolean	false
draggable	Whether to support drag and drop upload	boolean	false
tip	Tip text	string	-
headers	Additional header information for upload request	object	-
data	Additional data for upload request	Record<string, unknown>| ((fileItem: FileItem) => Record<string, unknown>)	-
name	Uploaded file name	string | ((fileItem: FileItem) => string)	-
with-credentials	Whether upload request carries cookies	boolean	false
custom-request	Custom upload behavior	(option: RequestOption) => UploadRequest	-
limit	Limit the number of uploaded files. 0 means unlimited	number	0
auto-upload	Whether to automatically upload files	boolean	true
show-file-list	Whether to show file list	boolean	true
show-remove-button	Whether to show remove button	boolean	true	2.11.0
show-retry-button	Whether to show retry button	boolean	true	2.11.0
show-cancel-button	Whether to show cancel button	boolean	true	2.11.0
show-upload-button	Whether to show upload button. Version 2.14.0 added showOnExceedLimit support	boolean | { showOnExceedLimit: boolean }	true	2.11.0
download	Whether to add download attribute to <a> link	boolean	false	2.11.0
show-link	In list mode, if uploaded file has URL, show link. If disabled, only show text and clicking can trigger preview event.	boolean	true	2.13.0
image-loading	Native HTML attribute for <img>, requires browser support	'eager' | 'lazy'	-	2.11.0
list-type	Image list type	'text' | 'picture' | 'picture-card'	'text'
response-url-key	Key to get image URL from Response, when enabled, uploaded images will replace preloaded images	string | ((fileItem: FileItem) => string)	-
custom-icon	Custom icon	CustomIcon	-
image-preview	Whether to use ImagePreview component for preview	boolean	false	2.14.0
on-before-upload	Triggered before uploading image	(file: File) => Promise<boolean>	-
on-before-remove	Triggered before removing image	(fileItem: FileItem) => Promise<boolean>	-
on-button-click	Triggered when upload button is clicked (if returns Promise, default input upload will be disabled)	(event: Event) => Promise<FileList> | void	-

Events

Event Name	Description	Parameters
exceed-limit	Triggered when uploaded images exceed limit	fileList: FileItem[] files: File[]
change	Triggered when uploaded image status changes	fileList: FileItem[] fileItem: fileItem
progress	Triggered when upload progress changes	fileItem: fileItem event: ProgressEvent
preview	Triggered when clicking image preview	fileItem: FileItem
error	Triggered when upload fails	fileItem: FileItem