axrising
@axrising

Как отобразить multiple images в ReactJS?

Как отобразить multiple images в ReactJS
Пример с single загрузкой ниже, как я могу сразу выбирать несколько изображений за раз и далее отображать их в ui,
храня при этом blobUrl в useState для дальнейшей отправки на сервер, буду очень признателен за помощь

interface ImageObj {
  blobUrl: string
  file: File
}
  const [images, setImages] = React.useState<ImageObj[]>([])

  const onSelectImage = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.length) {
      const file = e.target.files[0]
      if (file) {
        const fileObj = new Blob([file])
        setImages((prev) => [
          ...prev,
          {
            blobUrl: URL.createObjectURL(fileObj),
            file,
          },
        ])
      }
    }
  }, [])

<input
                accept='image/*'
                style={{ display: 'none' }}
                id='icon-button-file'
                type='file'
                onChange={(e) => {
                  onSelectImage(e)
                }}
                disabled={images.length >= 4}
              />
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
profesor08
@profesor08
Тут описаны все доступные атрибуты для инпута, включая тот, что тебе нужен `multiple` https://developer.mozilla.org/en-US/docs/Web/HTML/...

А код выбора файла переделать на работу с массивом файлов.
const ImageSelect: React.FC<{
  max?: number;
}> = ({ max = 4 }) => {
  const [images, setImages] = React.useState<ImageObj[]>([])

  const onSelectImage = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []).slice(0, max);

    setImages(files.map((file) => ({
      file,
      blobUrl: URL.createObjectURL(new Blob([file]))
    })));
  }, [])

  return <input type="file" accept="image/*" onChange={(e) => { onSelectImage(e) }} />
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы