I have this Upload ponent that I got from antd : react ant design documentation

<Upload
  beforeUpload={()=> {
    return false; }}
  onChange={e => onChangeFile(e, index)}
  onRemove={e => onRemoveFile(e, index)}
>
  <Button
    icon={<UploadOutlined />}
  >
    Upload a file
  </Button>
</Upload>

After uploading the file, a remove icon appears. When I click on the remove button the file does not get removed from the state.

here is the onChange function :

const onChangeFile = (info, index) => {
    console.log("onChange info = " + info);
    const newForm = form;
    newForm.inputs[index].value = info.file;
    setForm({
      ...form,
      from: newForm
    });
    console.log("onChange form = " + form);
};

I tried removing it using onRemove function like this:

const onRemoveFile = (info, index) => {
   console.log("onRemove info = " + info);
   const newForm = form;
   newForm.inputs[index].value = null;
   setForm({
     ...form,
     from: newForm
   });
   console.log("onRemove form = " + form);
};

the output of the console logs :

screenshot of the UI:

feel free to try a few things in this code example provided by antd:

=/index.js

I have this Upload ponent that I got from antd : react ant design documentation

<Upload
  beforeUpload={()=> {
    return false; }}
  onChange={e => onChangeFile(e, index)}
  onRemove={e => onRemoveFile(e, index)}
>
  <Button
    icon={<UploadOutlined />}
  >
    Upload a file
  </Button>
</Upload>

After uploading the file, a remove icon appears. When I click on the remove button the file does not get removed from the state.

here is the onChange function :

const onChangeFile = (info, index) => {
    console.log("onChange info = " + info);
    const newForm = form;
    newForm.inputs[index].value = info.file;
    setForm({
      ...form,
      from: newForm
    });
    console.log("onChange form = " + form);
};

I tried removing it using onRemove function like this:

const onRemoveFile = (info, index) => {
   console.log("onRemove info = " + info);
   const newForm = form;
   newForm.inputs[index].value = null;
   setForm({
     ...form,
     from: newForm
   });
   console.log("onRemove form = " + form);
};

the output of the console logs :

screenshot of the UI:

feel free to try a few things in this code example provided by antd:

https://codesandbox.io/s/qj6n3?file=/index.js

• javascript
• reactjs
• antd

• 1 use it with antd <Form>, it will automatically handle many scenarios – Zain Khan Commented Dec 21, 2021 at 16:08
• I am using it inside a <Form> then a <Form.Item>. But I can't figure out how to delete the uploaded file. – Ala Ben Aicha Commented Dec 21, 2021 at 16:10
• 2 don't create a state for it, get filelist value onsubmit of form – Zain Khan Commented Dec 21, 2021 at 16:16
• 1 posted the answer, I hope you'll find it helpful, thanls – Zain Khan Commented Dec 21, 2021 at 16:21
• 2 maybe your problem is the same as: stackoverflow./questions/70419650/… – Saeed Shamloo Commented Dec 22, 2021 at 3:44

1 Answer 1

You can achieve that by following this example:

const normFile = (e) => {
    if (Array.isArray(e)) {
        return e;
    }
    return e && e.fileList;
};

<Form onFinish={() => {}}>
    <Form.Item
        name="tagList"
        label="Upload"
        valuePropName="list"
        getValueFromEvent={normFile}
        rules={[
            {
                required: true,
                message: 'Tag list is required',
            },
        ]}
    >
        <Upload
            beforeUpload={() => false}
            listType="picture-card"
        >
            <UploadOutlined style={{ marginRight: 5 }} />
            Upload
        </Upload>
    </Form.Item>
</Form>