how to change the size of the drag and drop of antd Upload?

Question

I use Antd to upload pictures. I don't know how to update the style of the Upload component

I want to change the width and size of the drag and drop box but I don't see the option.

Here is the example

Thanks in advance,

Answer 1

You can achieve this in two ways: You can directly modify ant-upload css class, but this will override every upload component you have:

// css file
.ant-upload {
  // don't forget to add !important or
  // antd will override your styles
  width: 300px !important;
  height: 300px !important;
}

Or you can assign a custom css class to your upload component and then modify only ant-upload wich is child of your custom class:

<Upload
  ... other props
  className={"customSizedUpload"}
>
  { .... }
</Upload>

// css file
.customSizedUpload .ant-upload {
  width: 300px !important;
  height: 300px !important;
}

Result: