Блог

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

 export class KycForm extends React.Component {
    state = {
        adhar_front: undefined,
        adhar_back: undefined,
        avatar: undefined,
        passbook: undefined,
        driving_license: undefined,
        pan_card: undefined

    };
    handleImageChange = (e) => {
        console.log(e.target.files[0])
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state);
        console.log(this.state.images)
        let form_data = new FormData();
        for (let i = 0; i < this.state.images.length; i  ) {
            form_data.append('this is imput file', this.state.images[i], this.state.images[i].name)
        };
        console.log("fORM DTATA APPENDED: "   form_data)
        this.props.createUserKyc(form_data)
    };

   render() {
    return (
      <div className="col-md-6 m-auto">
        <div className="card card-body mt-5">
          <h2 className="text-center">Complete Your KYC</h2>
          <form onSubmit={this.handleSubmit} encType="multipart/form-data">
            <div className="form-group">
              <label>Adhar Front</label>
              <input
                accept="image/png, image/jpeg"
                className="form-control"
                name="adhar_front"
                onChange={this.handleImageChange}
                required
                type="file"
              />
            </div>
            <button>Upload</button>
          </form>
        </div>
      </div>
    );
  }
}
 

Сначала вы должны добавить multiple свои данные, затем вы можете загрузить некоторые файлы и загрузить их все, как я сделал ниже

 class App extends React.Component {
  render() {
    return (
      <div className="App">
        <KycForm />
      </div>
    );
  }
}
class KycForm extends React.Component {
  state = {
    adhar_front: undefined,
    adhar_back: undefined,
    avatar: undefined,
    passbook: undefined,
    driving_license: undefined,
    pan_card: undefined,
    images: []
  };
  handleImageChange = (e) => {
   const copy = { ...this.state };
    for (var i = 0; i < e.target.files.length; i  ) {
      copy.images.push(e.target.files[i]);
    }
    this.setState(copy);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    let form_data = new FormData();
    form_data.append("images", this.state.images);
    console.log("images.length: ", this.state.images.length);

    //you can send form_data to server
  };

  render() {
    return (
      <div className="col-md-6 m-auto">
        <div className="card card-body mt-5">
          <h2 className="text-center">Complete Your KYC</h2>
          <form onSubmit={this.handleSubmit} encType="multipart/form-data">
            <div className="form-group">
              <label>Adhar Front</label>
              <input
                multiple
                accept="image/png, image/jpeg"
                className="form-control"
                name="adhar_front"
                onChange={this.handleImageChange}
                required
                type="file"
              />
            </div>
            <button>Upload</button>
          </form>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("root")
); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>