0
160
Viewsreact state not updating properly for file uploader
I am trying to make a drag and drop feature with some files. I want to make it so that when a user drags and drops multiple files, those files are all added to a list. However, only one of the files that are dragged end up being added to the list and I am not sure why. here is how I am updating the state for the list of files:
files.forEach(element => {
onFileAdded({
file_list: [
...file_list,
element
]
})
});
Files is essentially what the user drags and when I log it, it looks something like this:
In my head I would assume that each file in files would be iterated through and added to file_list.
onFileAdded is the method im using to update the state for file_list. If I drag and drop multiple files however, I notice that instead of all of the files being added to the file_list, only one of them is. I have a feeling this has something to do with how im using the spread operator but I am not 100% sure. Any insights would be helpful.
1 answers
Answer question0
I guess you used <input type={"file"} multiple /> element. Let's say you have empty array and you want to update it.
const [arr,setArr] = useState([])
const onChange = e=> {
const {files} = e.target;
const tempArr = [];
for (let i = 0, len = files.length; i < len; i++) {
tempArr.push(files[i]);
}
setArr(prev=> ([...prev,...tempArr]))
}
return (
<input onChange={onChange} type={"file"} multiple />
)