How to add custom validation for form.item ANTD-CodePudding

How to add custom validator for form.item in ANTD. I have a form item with image upload. But because it's not textfield it doesn't work as should have. Is there are any ways to add custom validator and condition true/false to form item ?

<Form.Item
  name='photo'
  label={'photo'}
  rules={[
    {
      required: true,
      message: 'upload Photo',
     },
   ]}
 >

   <ImgCrop rotate>
     <Upload
       listType="picture-card"
       fileList={fileList}
       beforeUpload={beforeUpload}
       onChange={onChange}
       onPreview={onPreview}
       maxCount={1}
      >
        UPLOAD
      </Upload>
  </Form.Item>

CodePudding user response：

You can use beforeUpload prop of Upload component as custom validator. Suppose, if you want to restrict files less than 200 mb. try the below.

   <Upload
  name="file"
  accept=".mov,.mp4,.mpeg-ts,.avi,.png,.jpg,.jpeg,.bmp"
  showUploadList={false}
  beforeUpload={(file) => {
    if (file.type.includes("video")) {
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        message.error(
          intl.formatMessage({
            defaultMessage: "Video must smaller than 200MB!",
          })
        );
        setDefaultFileList(null);
        return false;
      }
      return true;
    }
    return true;
  }}
  customRequest={handleUploadMedia}
  css="margin-top:20px;display:block"
></Upload>