最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Validate File Upload in ReactJs - Stack Overflow

programmeradmin4浏览0评论

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;
Share Improve this question asked Nov 24, 2018 at 13:47 BradBrad 1333 gold badges5 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

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.

发布评论

评论列表(0)

  1. 暂无评论