I kindly request a review of my code prior to making any changes.
const test = () => {
const [files, setFiles] = useState ([]);
//I believe I need to modify the following statement.
const handleFile = (e) => {
const newFiles = []
for (let i=0; i < e.target.files.length; i++) {
newFiles.push(e.target.files[i])
}
setFiles(newFiles)
};
return (
{files.map((file, index) => (
<div>
<div key={index}>
<p>
{file.name}
</p>
<Button size='small' onClick={() => {deleteSelectedFile(file.name)}}>
Delete
</Button>
</div>
</div>
))}
<div>
<label onChange={handleFile}>
<input type='file' multiple />+ Attach File
</label>
</div>
)
}
by using the handleFile function, I am able to successfully retrieve the files.
However, if I upload one file and then another file separately,
the second file replaces the first instead of being added alongside it.
No issues arise when uploading multiple files at once.
For example, after uploading 'hello.jpg', it displays correctly on the screen. Then, upon uploading 'goodbye.jpg', it shows up as expected, but it replaces 'hello.jpg'.
Thus, only 'goodbye.jpg' is displayed with a button, not
'hello.jpg' with a button
'goodbye.jpg' with a button
.
My objective is to have the files accumulate without overwriting each other.
Your insights would be greatly appreciated!