Aravind Ashokkumar
Aravind Ashokkumar

Reputation: 35

How to limit file upload and display message once in React with AntD?

I want to limit the number of files to be uploaded to 10 and display an error message if the number exceeds 10 only once. But I am getting the error message 11 times on my screen if I try to upload 11 files at once.

const beforeUpload = (file,fileList) => {
        const maxFileSize = 250 * 1024 * 1024; // 250MB limit
        const maxLimit = 10
        if (fileList.length>maxLimit){
            message.error(`Only 10 files allowed`);
            return false;
        }

        if (file.size > maxFileSize) {
            message.error(`${file.name} file upload failed (exceeds 250MB)`);
            console.error("File size exceeds the limit of 250MB");
            return false;
        }
        return true;
    };

I tried handling it in beforeUpload but I am able to disable file upload if it exceeds 10 files. However I am not able to display the message once. It gets displayed 11 times if I try to upload 11 files. Any ideas on how to display message once and limit file upload?

<Upload.Dragger multiple beforeUpload={beforeUpload} customRequest={handleFileUpload} showUploadlist={false}>...</Upload.Dragger>

Upvotes: 1

Views: 1675

Answers (2)

user7630232
user7630232

Reputation: 185

Alternatively (Not using beforeUpload), You can add the uploader inside a Form as a Form.Item. Then just add a custom rules validator for this.

Sample:

            <Form.Item
                label="Upload files"
                name="rfp_documents"
                rules={[
                  {
                    required: true,
                    message: "Please Upload RFP files.",
                  },
                  () => ({
                    validator(_, value) {
                      if ((value || []).length <= 20) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('You can upload up to 20 documents. Please remove some files to proceed.'));
                    },
                  })
                ]}
              >
                <Dragger
                  multiple={true}
                >
                  <>_Uploaded_List_Component_Render_here_</>
                </Dragger>
          </Form.Item>

Upvotes: 0

NoNam4
NoNam4

Reputation: 1805

The easest way to limit how many files can be uploaded at once is to use max count prop but in this case you'll not have your user notificated.

If you need to notify the user you can use a ref to control if you've alread notificated your user about this error:

const notificated = useRef(false)
function beforeUpload(file){
  const index = fileList.indexOf(file);
  const maxLimit = 10
  if (fileList.length > maxLimit){
    if (!notificated.current) {
      notificated.current = true;
      message.error(`Only 10 files allowed`);
    }

    if (index === fileList.lenght - 1) {
      // reached last upload item
      // we must reset notification status now
      notificated.current = false;
    }

    return false;
  }

  const maxFileSize = 250 * 1024 * 1024; // 250MB limit
  if (file.size > maxFileSize) {
    message.error(`${file.name} file upload failed (exceeds 250MB)`);
    console.error("File size exceeds the limit of 250MB");
    return false;
  }
  return true;
};

You can also find a working example here

Upvotes: 0

Related Questions