Блог

Есть несколько полей ввода в виде текста / целого числа / даты … и изображения, все работает просто отлично, выбор файла плавный, но загрузка его в базу данных выдает ошибку, которая гласит:

  TypeError: _this.state.selectedFile is null


// ************Pets
>
onSubmit = evt => {
    evt.preventDefault();
    const {
      name ``
      `
  

Вот код (ошибка, скорее всего, связана с состоянием):

 const endpoint = "http://localhost:8000/upload";

class Pets extends Component {
state = {
// error_message: "",
pets_list: [],
selectedFile: null,
loaded: 0
 };

//For image upload with Loading bar

 handleSelectedFile = event => {
 this.setState({
  selectedFile: event.target.files[0],
  loaded: 0
   });
  };
  handleUpload = () => {
   const data = new FormData();
    data.append("file", this.state.selectedFile,       
   this.state.selectedFile.name);
   axios
  .post(endpoint, data, {
    onUploadProgress: ProgressEvent => {
      this.setState({
        loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100
      });
    }
  })
  .then(res => {
    console.log(res.statusText);
  });
 };
   ...
  

Затем позже при вводе мы имеем:

    <div>
          <input
            style={{ margin: "10px" }}
            type="file"
            name=""
            id=""
            onChange={this.handleSelectedFiles}
          />
          <button onClick={this.handleUpload}>Upload</button>
          <div>{Math.round(this.state.loaded, 2)} %</div>
        </div>
      </div>
  

Ошибка указывает здесь

 onSubmit = evt => {
evt.preventDefault();
const {
  name,
  image,
  gender,
  date_of_birth,
  species,
  info,
  availabilty
} = this.state;
  

Дайте мне знать, если потребуется дополнительный код.