How to print the name of the file uploaded in react antd?-CodePudding

I am new to react and learning about files. I tried using a variable('filename' in the code) to store the name of the file when the file gets uploaded and print it in the first line of the code shown below but that wasn't working. I am not sure where I am going wrong. This is the basic code I wrote:

<Row> File name: {filename} </Row>
<Row>
  <Form.item name="fileupload"> 
    <Upload name="file" maxCount={1} showUploadList={false} accept=".png" beforeUpload={()=>false}>
      <Button type='primary'> Upload </Button>
    </Upload> 
  </Form>
</Row>

I want to print the name of the file uploaded in the first line. Am I doing it correctly and if so how do I print the uploaded file name over there?

CodePudding user response：

In the onChange handler you'll get the information of the file that is uploaded.

handleFileUpload Function:

const handleFileUpload = (info) => {
  console.log(`File name: ${info.file.name}`)
  // Logic of action you want to perform on file upload
}

Add onChange:

<Row> File name: {filename} </Row>
<Row>
  <Form.item name="fileupload"> 
    <Upload name="file" maxCount={1} showUploadList={false} accept=".png" beforeUpload={()=>false} onChange={handleFileUpload} >
      <Button type='primary'> Upload </Button>
    </Upload> 
  </Form>
</Row>