Как отобразить 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}
/>