handleInputChange - React Redux для загрузки файла

Question

Я пытаюсь загрузить файл и обновить состояние с помощью объекта файла, который был загружен.

Журналы консоли после setState показывают, что состояние не было обновлено.

Каждый раз, когда я пытаюсь console.log событие для загрузки файла в onChange, я получаю круговую ссылку JSON, и если я пытаюсь зарегистрировать event.target, я получаю неопределенное значение.

Как записать загруженный файл в состояние?

import React, { Component } from "react";
import { connect } from "react-redux";
import Button from "@material-ui/core/Button";

class FileUpload extends Component {

  state = {
    myPicture: {}
  };

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });

    console.log(JSON.stringify(this.state))
    console.log(JSON.stringify(this.props))

  }

  render() {
    const {myPicture} = this.props;

    return (
      <div>

        {JSON.stringify(this.state.myPicture)}

        <input
          accept="image/*"
          className={"fileInput"}
          id="myPicture"
          multiple
          type="file"
          onChange={this.handleInputChange}
        />
        <label htmlFor="myPicture">
          <Button variant="contained" color="primary" component="span">
            Upload Picture
          </Button>
        </label>
        </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    myPicture: state.auth.myPicture,
  };
}

export default connect(mapStateToProps)(FileUpload);

Answer 1

Вы не можете напрямую ссылаться на массив файлов или сам файл.

Вы должны ссылаться на определенные c ключи из event.target.files [0].

Пример после загрузки файла:

• Пример: JSON.stringify(event.target.files[0]) === {}
• Пример: JSON.stringify(event.target.files[0].name === 'myFileNameHere'