Cannot update state with file uploader in reactJS

Question

I created a simple image uploader component that is rendered in a new-image-form that extends a form. but when handling a change(an image upload), the state is updated with an empty opbject (and not with the file object). I tried to debug it but anything goes right until this.setState. Can anyone helps?

NewImagesForm :

class NewImagesForm extends Form {
  state = {
    data: {
      _id: 0,
      name: "",
      file: null,
    },
    errors: {},
    apiEndpoint: "",
  };

  render() {
    return (
      <div className="new-menu-item-form">
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("name", "Name")}
          {this.renderUploadFile("file", "Upload")}
          {this.renderButton("Add")}
        </form>
      </div>
    );
  }

Form

class Form extends Component {
  state = { data: {}, errors: {} };

  handleFileUpload = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.target.files[0];
    this.setState({ data });
  };

  renderUploadFile(name, label) {
    const { data } = this.state;

    return (
      <UploadImage
        name={name}
        label={label}
        value={data[name]}
        onChange={this.handleFileUpload}
      ></UploadImage>
    );
  }
}

export default Form;

File Upload Component

const UploadImage = ({ name, label, error, onChange }) => {
  return (
    <div className="input-group">
      <div className="custom-file">
        <input
          type="file"
          onChange={onChange}
          className="custom-file-input"
          id={name}
          name={name}
        ></input>
        {label && (
          <label className="custom-file-label" htmlFor={name}>
            {label}
          </label>
        )}
      </div>
      <div className="input-group-append">
        <button className="btn btn-outline-secondary" type="button">
          Button
        </button>
      </div>
    </div>
  );
};

export default UploadImage;

wang · Accepted Answer · 2020-04-16 13:03:55Z

0

First of all, react does not recommend the use of extends, because of the combination of extends.

In the Form component, the setState() trigger the render() , but there is no render(). setState does not allow renderUploadFile to be re-executed.

It would be a good idea to use the UploadImage component in the NewImagesForm component. Don't let NewImagesForm extends Form.

answered Apr 16, 2020 at 13:03

wang

6128 silver badges19 bronze badges

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

Comments

Matias K · Accepted Answer · 2020-04-16 13:15:16Z

0

But the exactly same way works for me with custom input text and custom select boxes, see the differences:

  handleChange = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.currentTarget.value;
    this.setState({ data });
  };

  handleFileUpload = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.target.files[0];
    this.setState({ data });
  };

answered Apr 16, 2020 at 13:15

Matias K

115 bronze badges

Collectives™ on Stack Overflow

Cannot update state with file uploader in reactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related