React + Redux + Firebase простая загрузка файлов

Question

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

const Input = (props) => (
  <input type="file" name="file-input" multiple {...props} />
)

function ProjectPage() {
  const { projectId } = useParams()
  const classes = useStyles()
  const firebase = useFirebase()

  var fileInput = [];

  const onSubmit = (e) => {
    e.preventDefault()
    console.log(fileInput[0])
    const storageRef = firebase.storage().ref()
    const fileRef = storageRef.child(fileInput[0])
    return fileRef
      .then(snap => console.log('upload successful', snap))
      .catch(err => console.error('error uploading file', err))
  }

  const onChange = (e) => {
    fileInput = e.target.files
  }

  // Create listener for projects
  useFirebaseConnect(() => [{ path: `projects/${projectId}` }])

  // Get projects from redux state
  const project = useSelector(({ firebase: { data } }) => {
    return data.projects && data.projects[projectId]
  })


    return (
   <div className={classes.root}>
    <form className="form" onSubmit={onSubmit}>
    <div>
      <Input onChange={onChange} />
      <button type="submit">Submit</button>
    </div>
   </form>

  </div>
  )
}

Вот ошибка, которую я получаю, и журнал консоли. console.log(fileInput[0]) ИЗОБРАЖЕНИЕ

Я обнаружил, что это возможно, потому что мне нужно добавить путь к файлу здесь "storageRef.child(fileInput[0])", но я просто не знаю, как это сделать.

Answer 1

От Firebase API дочерний метод может получить только string, который является относительным путем от этого местоположения до желаемого дочернего местоположения.

Возвращает ссылку на местоположение ребенка в хранилище Firebase. Ошибка консоли, которую вы видите, говорит нам, что аргумент, переданный потомку, не был string.

В вашем случае вы устанавливаете объект файла, где должно быть имя файла. В частности, попробуйте изменить storageRef.child(fileInput[0]) на storageRef.child(fileInput[0].name).put(fileInput[0]). См. полный пример.

Дайте мне знать, могу ли я помочь вам.