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-ponents';
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/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;

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-ponents';
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./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;

• javascript
• reactjs
• react-native
• ecmascript-6
• mean-stack

Share Improve this question Follow asked Nov 24, 2018 at 13:47 BradBrad 13333 gold badges55 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

Looks like you're looking for beforeUpload function (scroll down a bit).

Add that function to props and check the content of form inside it (validate it). According to the docs, returning false should stop the upload.

Edit: I really shouldn't write code for you. Anyway, something like this should work:

const { propss } = {
    ...code you've got so far,
    beforeUpdate(file) {
        if (file === '') {
            message.error('your error message');
            return false;
        }
    }
};

There is an an example - click on < > symbol to see the code. Before upload function takes file argument, adds it to the list, and returns false, thus preventing upload. User needs to press the button to do so. You should instead check the variable (if it's not empty), show a message (message.error()) and return false.