I have been working on a project, that displays all the images which have been added by the user in the input field of the type "file". I referred to the stackoverflow ans as shown here, which shows the first uploaded image. Taking inspiration from the given method, I used a custom method to show added files, as shown below.
I have been using react js to list all such files which have been uploaded. The code, that I wrote is as shown:
const [images, setImages] = useState([]);
function ImageUpload (e) {
if (e.target.files && e.target.files[0]) {
for (let i = 0; i < e.target.files.length; i++) {
let reader = new FileReader();
reader.onload = e => {
let updated_ar = images
images.push(e.target.files[i])
setImages(images)
}
reader.readAsDataURL(e.target.files[i])
}
}
}
I have been unable to grasp the exact error in this code. the above function ImageUpload
is called, when the images are uploaded in the input type file, as shown below:
<input
type="file"
onChange={ImageUpload}
className="fileUpload"
id="group_image"
accept="image/x-png, image/gif, image/jpeg"
/>
Looking for the best solution to the above problem.