Skip to main content
Feedback

File upload component CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize file upload components.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to file upload components in a flow running the default player.

Class/SelectorDescription
.page-component-file-uploadThe main class applied to the entire file upload component in a flow.
For example, to increase the padding around all file upload components in a flow:
.page-component-file-upload {padding:15px}
.file-input-drop-targetThe main class applied to the File Upload area of the component.
For example, to set the height of the File Upload area:
.file-input-drop-target {height:400px}
.file-input-file-listThe main class applied to the file list area of the component.
For example, to increase the padding around the file list area:
.file-input-file-list {padding:15px}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to file upload components in a flow running the default legacy player.

Class/SelectorDescription
.mw-bs .dropzoneThe main class applied to the File Upload area of the component.
For example, to set the height of the File Upload area:
.mw-bs .dropzone {height:400px}
.mw-bs .files-progressThe main class applied to the File Progress area of the component that displays the progress of a file as it is being uploaded.
For example, to set the background of the File Progress area:
.mw-bs .files-progress {background:#cccccc}
.mw-bs .progress-barThe main class applied to the progress bar in the File Progress area.
For example, to set the background progress bar:
.mw-bs .progress-bar {background:#cccccc}
On this Page