ImageUploader <Experimental></Experimental>

Demos

Install

npm install antd-mobile@5.43.0

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.

Demos

ImageUploader

Props

Ref

ImageUploadItem

UploadTask

CSS Variables

FAQ

The capture attribute is configured, but why some Android phones will still have the file option?

The capture provided by ImageUploader comes from the native HTML capability, and in some operating systems/browser environments, this attribute may not be supported, so this problem cannot be avoided.

See the discussion in this issue.

Description of the columns Prop

The columns relies on Grid layout and when present, the custom --cell-size is not supported, as the size of image and upload button is calculated automatically.

How to use the client upload capability in the App?

Input native upload can be disabled via the disableUpload and then customise the upload button.

const App = () => {
  const [fileList, setFileList] = useState([])

  const handleUpload = async () => {
    // call app upload
    const url = await hybrid.upload()
    setFileList(fileList => [...fileList, { url }])
  }

  return (
    <ImageUploader
      value={fileList}
      onChange={setFileList}
      disableUpload
    >
      <span
        className='adm-image-uploader-cell adm-image-uploader-upload-button'
        onClick={handleUpload}
      >
        <span className='adm-image-uploader-upload-button-icon'>
          <AddOutline />
        </span>
      </span>
    </ImageUploader>
  )
}