I am Brad, I am new to ReactJS currently i am working on ant-design form. I want to validate the input file validation for empty file input fields and display the message please attach a file, I am not able to write code for this module please help me and i am very stuck

My Form Code

import React from 'react';

import styled from 'styled-components';

import 'antd/dist/antd.css';

import { Upload, message, Button, Icon } from 'antd';



const PhotoText = styled.div`

  font-size: 16px;

  font-weight: bold;

  padding: 2rem 0 1rem 0;

  display: block;

  text-align: -webkit-auto;

`;



const ButtonWrapper = styled.div`

  text-align: center;

`;



let file = { id: 'test' };

const { propss } = {

  name: 'file',

  action: '//jsonplaceholder.typicode.com/posts/',

  headers: {

    authorization: 'authorization-text',

  },

  onChange(info) {

    file = info.file;

    if (info.file.status !== 'uploading') {

    }

    if (info.file.status === 'done') {

      message.success(`${info.file.name} file uploaded successfully`);

      file = info.file;

    } else if (info.file.status === 'error') {

      message.error(`${info.file.name} file upload failed.`);

    }

  },

};

class RegisterStepTwo extends React.Component {

  constructor(props) {

    super(props);

    this.saveData = this.saveData.bind(this);

  }



  saveData(e) {

    this.props.addData(e, file);

  }



  render() {

    return (

      <div>

        <PhotoText>Select a Photo to Upload</PhotoText>

        <Upload {...propss}>

          <Button>

            <Icon type=upload /> Click to Upload

          </Button>

        </Upload>

        <br />

        <PhotoText>Select a Video to Upload</PhotoText>

        <Upload {...propss}>

          <Button>

            <Icon type=upload /> Click to Upload

          </Button>

        </Upload>

      </div>

    );

  }

}

export default RegisterStepTwo;