0

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.

Tan
  • 1,433
  • 5
  • 27
  • 47

1 Answers1

1

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.

Ahmed amin shahin
  • 857
  • 6
  • 15
  • Yes, if you could put your thoughts in the code, that would be great. Thanks! `you cannot prevent them from clicking the button again unless you disable the button once the file is uploaded successfully`Actually, it's happening before they click the Upload button. So I think we would want to disable the Choose button as soon as user is done selecting first file. – Tan Dec 17 '21 at 22:42
  • Also you need to set the button back to be clickable when they remove the picture from the list :) – Ahmed amin shahin Dec 17 '21 at 23:30
  • I am at mobile right now , at the end of the page make Java script function and select element by class where the choose button is located , press f12 to find class name and add .onclick at the end – Ahmed amin shahin Dec 17 '21 at 23:32
  • Do I need to define a `className`, first here ` ` or the `onUpload` handler can act as an `.onClick` that you are saying? – Tan Dec 18 '21 at 01:05
  • Here is my updated codesandbox where I attempted to disable the Choose button. However, it is disabling upload and cancel button as well which I don't want. It seems like there is no solution to what I am looking for. https://codesandbox.io/s/epic-chandrasekhar-qz9tg?file=/src/demo/FileUploadDemo.js – Tan Dec 18 '21 at 03:51
  • have you noticed that upload button and clear are disable on page load ? it's possible its matter of syntax that's all , i will try to work arround this and make it work for you . – Ahmed amin shahin Dec 18 '21 at 10:19
  • may you can set the property display to hidden for the upload button on select/click cus i cant find the code js . so i will try doing this from css files that if user click on upload button it will hide it something like this link https://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css – Ahmed amin shahin Dec 18 '21 at 10:28
  • Ok, please take a look at it when you get a chance and let me know. Thanks for your time. – Tan Dec 18 '21 at 21:01