How to show the multiple files using select field, want to display the no of files which i have been selected but it is only showing single file
const [lessonImage, setLessonImage] = React.useState([]);
const handleLessonImage = (event) => {
setLessonImage(event.target.files);
}
<input
type="file"
onChange={handleLessonImage}
multiple
/>
You can access name of file from File Object.
Link to CodeSandBox
import React from "react";
export default function App() {
const [lessonImage, setLessonImage] = React.useState([]);
const handleLessonImage = (event) => {
const data = [];
for (let i = 0; i < event.target.files.length; i++) {
data.push(event.target.files[i]);
}
setLessonImage((old)=> […old,data]);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<input type="file" onChange={handleLessonImage} multiple />
{lessonImage.map((item, index) => {
return (
<div key={index}>
<h3>{item.name}</h3>
</div>
);
})}
</div>
);
}
setLessonImage((old)=> [...old,...data]) it worked