How to write Validations while uploading file in React

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.

You are already checking the file type. what is the problem then ? — Alen.Toma
– Alen.Toma, Commented Aug 10, 2021 at 13:26
@Alen.Toma the issue is that the file prompt doesn't actually restrict the user from submitting files that have a different extension than .png. — Isaac Corbrey
– Isaac Corbrey, Commented Aug 10, 2021 at 13:30

Rlome · Accepted Answer · 2021-08-11 16:01:40Z

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

answered Aug 11, 2021 at 16:01

Rlome

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Isaac Corbrey · Accepted Answer · 2021-08-10 13:29:08Z

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.

Alen.Toma · Accepted Answer · 2021-08-10 13:39:30Z

0

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.
      }
    }

answered Aug 10, 2021 at 13:39

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

1 Comment

Cruse Over a year ago

Hi @Alen.Toma, I tried your code it's not working

Collectives™ on Stack Overflow

How to write Validations while uploading file in React

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related