I Wanna Select Multiple Image from one input And Read It With File Reader , and if i leave it like this, it give me one picutre
const [image , setImage] = useState('');
const [imageSelected , setImageSelected] = useState(null);
const onImageChange = event => {
const reader = new FileReader();
reader.onload = () => {
if(reader.readyState === 2){
setImageSelected(reader.result)
console.log(reader.result)
}
}
setImage(event.target.files[0]);
reader.readAsDataURL(event.target.files[0])
console.log(image)
}
HTML
<label htmlFor="image" className = "col-span-3 ">
{
!imageSelected ? <PhotoCameraIcon fontSize="120" className ="border rounded p-2 h-24 text-8xl text-gray-600 cursor-pointer" /> : (
<img src={imageSelected} alt="" className = "h-44" />
)
}
<input hidden multiple onChange={onImageChange} type="file" name="image" id="image" />
</label>
import "./styles.css";
import React, {Component} from 'react';
export default class App extends Component {
constructor (props){
super(props);
this.state={
images: null
}
}
readFileContents = async (file) => {
return new Promise((resolve, reject) => {
let fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = reject;
fileReader.readAsDataURL(file);
});
}
readAllFiles = async (AllFiles) => {
const results = await Promise.all(AllFiles.map(async (file) => {
const fileContents = await this.readFileContents(file);
return fileContents;
//let a = URL.createObjectURL(fileContents);
//return a;
}));
console.log(results, 'resutls');
return results;
}
handleUpload = (e) => {
let AllFiles = [];
[...e.target.files].map(file => AllFiles.push(file));
this.readAllFiles(AllFiles).then(result => {
let allFileContents = [];
result.map(res =>{
allFileContents.push(res);
})
this.setState({images: allFileContents});
}).catch(err => {
alert(err);
});
}
render = () => {
return (<div>
<input type="file" multiple onChange={(e) => this.handleUpload(e)}/>
{this.state.images && this.state.images.map((img, idx)=>{
return <img width={100} height={50} src={img} alt={idx} key={idx} />
})
}
</div>
)
}
}