Building a Form with File uploads

Ask the Community Customization
1

Hi there, I’d like to see the feature to change the width of the file upload column width and height. I feel like it doesn’t need to be that large and some customization would be great!

3

Hi Ben! Sorry for the delay in getting back to you :downcast_face_with_sweat:

Currently, there is no built-in setting to adjust the file upload field size, but you can customize it with CSS. You can add the CSS codes below to the Custom CSS field, which you can find in the Appearance tab of your widget settings.

To change the width and height of the upload area, you can try this:

[class*="File__DropArea-sc"] {
  padding: 10px 0 !important;
  width: 50%;
}

image
image2050×1648 271 KB

If you’d like to center the upload area, you can also add:

[class*="File__Container-sc"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

image
image2047×1650 281 KB

This will also center the uploaded file list. If you’d like to keep the file list aligned separately, add:

div:has(> [class*="File__FileItem-sc"]) {
  min-width: 100%;
}

image
image2051×1650 280 KB

We’ve also added this idea to our wishlist.

Feel free to vote for it here to support the request and get future updates: Allow adjusting file upload field width and height.