I am using in my application an uploader from Ant Design.
function beforeUpload(file) {
const filesFormats = [".doc", ".docx", "application/pdf"];
console.log(file);
const isRightFormat = filesFormats.includes(file.type);
console.log(isRightFormat);
if (!isRightFormat) {
message.error("You can only upload pdf and doc files");
return;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("Image must smaller than 2MB!");
}
return isRightFormat && isLt2M;
}
class Avatar extends React.Component {
state = {
loading: false
};
handleChange = (info) => {
console.log("info, ", info);
if (info.file.status === "uploading") {
this.setState({ loading: true });
return;
}
if (info.file.status === "done") {
// Get this url from response in real world.
this.setState({ loading: false });
}
};
render() {
const { loading } = this.state;
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={true}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={beforeUpload}
onChange={this.handleChange}
>
{uploadButton}
</Upload>
);
}
}
What I am trying to do is to restrict some formats of files that can be uploaded. For example, images should't be uploaded according to my restriction:
const filesFormats = [".doc", ".docx", "application/pdf"];
console.log(file);
const isRightFormat = filesFormats.includes(file.type);
console.log(isRightFormat);
if (!isRightFormat) {
message.error("You can only upload pdf and doc files");
return;
}
The code works but when I upload an image, it still appears in the uploader icon as a list item, but it should't be possible, because I set the restriction.
Why does it happen and how to achieve what I described above?
