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 Image",
    value: [],
    props: {
        action: "/upload.php",
        theme: "image",
        accept: "image/*",
        max: 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",
        theme: "file",
        accept: ".pdf,.doc,.docx",
        max: 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 2MB
            }
            return true;
        },
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Events Examples

Listen to Upload Events

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, context) => {
            console.log('File status changed:', context.file.status);
        },
        fail: (file) => {
            console.log('Upload failed:', file);
        },
        progress: (file) => {
            console.log('Upload progress:', file.percent);
        },
    },
}

Update Other Fields

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

Complete configuration items: TDesign_Upload

value :Array | String

Note

After a successful upload, assign the URL from the response to file.url in the onSuccess callback. Otherwise, the form won't receive the component data.