DEV Community

Discussion on: How to Upload Multiple File with Progress Bar (ReactJS + Redux and ExpressJS)

Collapse
 
devinekadeni profile image
Devin Ekadeni

if you want to upload only 1 file at a time, you should remove props multiple on your input element and for onChange handler, you could just pass e.target.files[0] which contain the file value.
Then you can change the fileProgress structure on the redux into just 1 object value for example just define

const INITIAL_STATE = { 
    fileProgress: { }
    // the file will be 
   // { id: 1, file: file, progress: 0, cancelSource: source, status: 0 }
 }
Enter fullscreen mode Exit fullscreen mode

Then you should adjust the action, reducer, and useEffect of the UploadProgress (and not to mention adjust the components).
I'll just explain the main idea of what I could think of for the data structure perspective, the rest you should be able to tinkering by yourself, after all that's the beauty of programming, isn't it 😁. Goodluck!