With this piece of code, it works fine when I upload only 1 file at a time, but when I upload multiple files, although console.log shows that the URL is created successfully, but when rendering, it shows failed to load resource err_file_not_found
.
What's the problem with this piece of code?
const handleUpload = (e) => {
const files = [];
for (var i = 0; i < e.target.files.length; i++) {
files.push(URL.createObjectURL(e.target.files[i]));
}
setVideos((prev) => [...prev, files]);
};
<input
type="file"
onChange={handleUpload}
multiple
/>
{videos.map((video) => (
<img src={video} alt={video} key={video} />
))}