Unable to crop image and disable uploading by returning "false" from "beforeUpload"

I am using the Upload component as a local file input and am not using it to actually upload my files. I need to handle the file uploads myself. I am doing this by returning false from beforeUpload. However, if I do this while using antd-img-crop, the cropping functionality does not work.

This is my code:

...

const ImageInput: React.FC<ImageInputProps> = ({ maxCount, onChange }) => {
  const handleChange = { ... };
  const handleRemove = { ... };
  const handlePreview = { ... };
  
  const beforeUpload = () => {
    return false;
  };

  return (
    <ImgCrop grid rotate>
      <Upload
        accept='image/png, image/jpeg'
        listType='picture-card'
        onChange={handleChange}
        onRemove={handleRemove}
        onPreview={handlePreview}
        maxCount={maxCount}
        beforeUpload={beforeUpload}
      >
        <div>
          <Text type='secondary'>
            <PlusOutlined />
          </Text>
          <div style={{ marginTop: 8 }}>
            <Text type='secondary'>Upload Image</Text>
          </div>
        </div>
      </Upload>
    </ImgCrop>
  );
};

export default ImageInput;

The cropping only works if I remove beforeUpload={beforeUpload}. I’ve tried returning a lot of different things from beforeUpload, and nothing has worked.

Any ideas? Any help would be greatly appreciated. I took a look a the source code and I think the issue is that on this line it is just rejecting. The newFile at this point is just being lost. I’m not sure what to do about it, though.

[nanxiaobei]

@nanxiaobei So as an example, in beforeUpload I could set the file or fileList to the local component state and then pass that to the Upload fileList property? And then return false from beforeUpload to prevent the XMLHttpRequest?

You can write beforeUpload in this way:

const [fileList, setFileList] = useState([]);

const beforeUpload = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    setFileList((prev) => [...prev, { url: reader.result }]);
  };

  // then upload `file` from the argument manually
  return false;
};

and remove onChange={onChange} to update fileList manually.

[samyarkd]

There is a problem with this solution. The property called originFileObj in added file will be undefined. How can we achieve it because the url is base64. Also, it’s not type safe and i get many type errors.

@nanxiaobei So as an example, in beforeUpload I could set the file or fileList to the local component state and then pass that to the Upload fileList property? And then return false from beforeUpload to prevent the XMLHttpRequest?

You can write beforeUpload in this way:

const [fileList, setFileList] = useState([]);

const beforeUpload = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    setFileList((prev) => [...prev, { url: reader.result }]);
  };

  // then upload `file` from the argument manually
  return false;
};

and remove onChange={onChange} to update fileList manually.