Auto save to input?

Question

React

Friends, tell me how to make automatic saving in input when choosing a photo!
Now there is a form where the user selects a photo, presses to save. Everything works great.
It is necessary that after selecting a photo, it is instantly applied.
My input

<Input
  type="file"
  id="picture"
  name="picture"
  accept="image/*"
  onChange={this.onChangePicture}
/>

Preservation

onChangePicture = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.files[0] }
    });
  onSubmit = e => {
    e.preventDefault();
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props.submit(this.state.data);
    }
  };

Answer 1

Do you want to trigger a submit on uploading a photo? You can pass any handler to the callback of the setState function.

onChangePicture = e =>
    this.setState(
        { data: { ...this.state.data, [e.target.name]: e.target.files[0] } },
        this.onSubmit
    );

onSubmit = e => {
    if (e) e.preventDefault();
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props.submit(this.state.data);
    }
  };