Блог

Эй, ребята, я использую кнопку загрузки MaterialUI отсюда: https://material-ui.com/components/buttons /

Как вы можете видеть ниже, я скопировал вставил эту кнопку, и теперь я хочу загрузить ее в Firebase Firestorage, используя мой хук. При нажатии на кнопку он меняет класс фото

   <input
            accept="image/*"
            className={classes.input}
            id="contained-button-file"
            multiple
            type="file"
            onChange={(e) => changeFoto(e)}
          />
          <label htmlFor="contained-button-file">
            <Button className={classes.fotoButton} component="span">
              Foto
            </Button>
          </label>
 

Здесь вы можете увидеть функцию изменения фотографии:

(setFoto — это хук в этом случае, а foto — переменная useState)

 const changeFoto = (e) => {
    setFoto(e.target.files[0]);
    const pflegeengelRef = storage.child(
      "pflegeengel/"   pflegeengelDocumentIDs[selectedIndex]
    );
    pflegeengelRef.put(foto).then(function (snapshot) {
      console.log("Uploaded a file!");
    });
  };
 

И действительно, что-то загружается, когда я иду смотреть в хранилище, там есть файл. Но это не мой файл изображения, это был какой-то странный формат файла, в котором был только текст «undefined». Так что, я думаю, это моя проблема

Это происходит потому setFoto , что это асинхронная функция. Он обновляется не foto сразу — он запускает рендеринг с новым foto значением в качестве нового значения.

Когда вы пытаетесь загрузить foto , он еще не обновился. Использование put(e.target.files[0]) решило бы вашу проблему.