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?
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>