Please take a look at this codesandbox example.
If you see on Line #186 for Advanced uploader, the multiple property is set to false:
<div className="card">
<h5>Advanced</h5>
<FileUpload
multiple={false}
name="demo[]"
url="https://primefaces.org/primereact/showcase/upload.php"
onUpload={onUpload}
accept="image/*"
maxFileSize={1000000}
emptyTemplate={
<p className="p-m-0">Drag and drop files to here to upload.</p>
}
/>
So this won't allow me to press "SHIFT + Down Arrow Key" to select multiple files. However, if I select one file using Choose button and click Open, it shows up in the list. If I again click Choose button and select another file and click Open, that file shows up. So, multiple files are still getting uploaded one at a time. How to fix this?
I was wondering if there is any event fired after the first file shows up in the list so that I can disable the Choose button at that time?
P.S. I am not sure how to convert a codesandbox into the snippet code for react and hence shared a link above for codesandbox example.
Well , setting the multi select to false is suppose to prevent users from selecting multiple files , but you cannot prevent them from clicking the button again unless you disable the button once the file is uploaded successfully . I suggest you to make a variable as a flag = 0 and once you capture a success upload from the user , make the flag = 1 and make if condition if the flag = 1 then disable the button click .
I will check the code and adjust my answer later and write the code for you if this is good solution for you.