How to write Validations while uploading file in React - reactjs

Question

I am working with React, and I am trying to upload a file and that file type should be only png.
When I upload png file it is working fine. but I need to stop uploading other type files. for example if I need to upload png file means, it's needs to work properly. by mistake if I upload audio file means the file should not be uploaded. Please tell me how to write validations like this.
This is my code
This is App.js
import React, { useState } from "react";
import 'antd/dist/antd.css';
import './index.css';
import { Row, Col, Button, Modal, Upload, message } from 'antd';
import { VideoCameraOutlined, AudioOutlined } from '#ant-design/icons';
import "./App.css";
const App = () => {
const props = {
beforeUpload: file => {
const audioValidation = file.type === "image/png"
if (!audioValidation) {
message.error('You can only upload PNG file!');
}
}
}
const [visible, setVisible] = useState(false)
const showPopUp = () => {
setVisible(true)
}
return (
<div>
<Row>
<Col span={24}>
<Button onClick={() => showPopUp()} type="primary">Show PopUp</Button>
<Modal
visible={visible}
>
<Upload {...props}>
<div style={{ display: "flex" }}>
<div>
<VideoCameraOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Video</h6>
</div>
<div style={{ marginLeft: "5px" }}>
<AudioOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Png</h6>
</div>
</div>
</Upload>
</Modal>
</Col>
</Row>
</div>
)
}
export default App
If you have any questions please let me know, thank you.

Answer 1

In the Antd documentation they tell you that you can use the 'accept' property to select the formats to be chosen by the end user, that way you do not have to verify anything, since it will only allow you to select that type of files. Basically as a normal input.
Antd Documentation Here

Answer 2

From the MDN doc page on <input>:
The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.
We can specify that an input should only accept .png files with the following:
<input type="file" accept=".png">
However, it appears that you're using Ant Design, and it doesn't look like the <Upload> component actually has a built-in way to provide accepted file types to the <input> element. Maybe this is something you can work around with the above information.

Answer 3

Ok, I read the code on github and this is what you should do.
beforeUpload: file => {
const audioValidation = file.type === "image/png"
return new Promise((resolve, reject) => {
if (!audioValidation) {
reject(null) // the file is not ok then abort
message.error('You can only upload PNG file!');
}else resolve(file) // the file is ok, so you should proceed.
}
}