CODEWITHSUNDEEP
reactjsantd
SMTP King
SMTP King

Reputation: 528

Issue with onChange event in ant design upload component in react

I am trying to receive the files uploaded in the ant design upload component using the onCHange event but I keep encountering an error

"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')".

The code:

<Form.Item>
    <Form.Item name="dragger" valuePropName="fileList" noStyle>
        <Upload.Dragger // onChange={(e)=> handleInputChange("file", e.target.files[0])}
            beforeUpload={() => false}
            name="files"
            accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
            action=""
            >
            <p className="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p className="text-dark">Click or drag file to this area to upload</p>
            <p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
        </Upload.Dragger>
    </Form.Item>
</Form.Item>

I intend to manipulate the file in a function. I don't want to use the ant design upload component's upload functionality. I only wanted the drag and drop UI.

Upvotes: 0

Views: 3000

Answers (1)

SMTP King
SMTP King

Reputation: 528

The solution:

ant-design doesn't return the usual event object but it's own object. The object has another object called file which would have suited my code.

Therefore, I should have used: e.file instead of e.target.files[0] That solves the error!

Upvotes: 1

Related Questions