CODEWITHSUNDEEP
reactjsantd
devb
devb

Reputation: 327

How to restrict upload antd to single file?

 <Form.Item
    name="upload"
    label="Upload"
    valuePropName="fileList"
    getValueFromEvent={normFile}        
    multiple="false"        
  >
    <Upload accept=".csv" name="logo" multiple="false" action="/upload.do" listType="picture">
      <Button icon={<UploadOutlined />}>Click to upload</Button>
    </Upload>
  </Form.Item>
  1. I wan't to allow user to input only one file.
  2. Also how to read that csv file after uploading and send to the backend (just the params)?

mutiple files are allowed as below

multiple files

Upvotes: 3

Views: 5447

Answers (3)

Varun Panchal
Varun Panchal

Reputation: 1

maxCount prop is for single file upload. you check it out.

Upvotes: 0

Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

I handle this problem by Css, Check my list array length, if true define a className to the upload button which prevent to click.

const [list, setList] = useState(null);

<Dragger //its one of antd upload components
  {...settings}
  className={list?.length ? 'blocked' : undefined}
>

.blocked {
  pointer-events: none;
  opacity: 0.5;
}

Upvotes: 0

kelvinelove
kelvinelove

Reputation: 620

The solution to your first question is very simple. The Ant Design Upload component API (now?) contains maxCount, which limits/controls the number of uploaded files.

Set it to 1 and that will limit the amount of files uploaded to just 1. If a user picks up another file, it will replace the one selected before.

So, you should have something like this in the end:

<Form.Item
   name="upload"
   label="Upload"
   valuePropName="fileList"
   getValueFromEvent={normFile}        
   multiple="false">
<Upload 
   accept=".csv" 
   name="logo" 
   multiple="false" 
   action="/upload.do" 
   listType="picture"
   maxCount={1}    //this is what limits the number of files uploaded
>
     <Button icon={<UploadOutlined />}>
        Click to upload
     </Button>
</Upload>
</Form.Item>

Upvotes: 4

Related Questions