48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React,{ useState, useEffect } from 'react'
|
|
|
|
import { InputUploadView } from './inputUploadView'
|
|
|
|
|
|
export default function InputUploadPdf() {
|
|
const [images, setImages] = useState([] as any);
|
|
const [imageURLS, setImageURLs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (images.length < 1) return;
|
|
const newImageUrls: any = [];
|
|
images.forEach((image:any) => newImageUrls.push(URL.createObjectURL(image)));
|
|
setImageURLs(newImageUrls);
|
|
}, [images]);
|
|
|
|
function onImageChange(e: any) {
|
|
setImages([...e.target.files]);
|
|
// console.log(e);
|
|
}
|
|
|
|
return (
|
|
<InputUploadView>
|
|
|
|
<div className='imgContainer'>
|
|
<article>
|
|
{imageURLS.map((imageSrc, index) => (
|
|
<img key={index} className="image" src={imageSrc} alt="not fount" />
|
|
))}
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<div className="update">
|
|
|
|
<form action="">
|
|
<div >
|
|
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p> </label>
|
|
<input type="file" name='arquivo' id='arquivo' onChange={onImageChange} />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</InputUploadView>
|
|
)
|
|
}
|