How can I mark an Upload/Upload.Dragger component from Ant Design in React as 'Required'?

Question

This is my Form.Item component for example and adding rules doesn't seem to work. I don't want the form to be submitted unless something is uploaded in the Upload area. Tried putting the validation rules inside <Form.Item> as well but that didn't work either.

        <Form.Item
          style={{ display: "inline-block", }}

        >
              <Upload.Dragger
                multiple
                rules={[
                {
                  required: true,
                  message: "Please upload",
                },
              ]}
              >
                <Button icon={<UploadOutlined />}>Add File</Button>
                <div style={{ display: "inline-block", marginLeft: "5px", marginRight: "5px", }}>or drag and drop file here</div>
              </Upload.Dragger >

        </Form.Item>

Update: Using Form component outside the <form.Item> with properties like name etc worked for me.

Answer 1

Check the following code, Use rules property in Form.item component

 <Form.Item
        name="dragger"
        rules={[
          {
            required: true,
            message: 'Please upload',
          },
        ]}
      >
        <Upload.Dragger multiple>
          <Button icon={<UploadOutlined />}>Add File</Button>
          <div
            style={{
              display: 'inline-block',
              marginLeft: '5px',
              marginRight: '5px',
            }}
          >
            or drag and drop file here
          </div>
        </Upload.Dragger>
 </Form.Item>