Skip to main content Skip to main navigation

File Uploader

Components / Atoms

Required resources:

Note: The below file uploaders are for visual reference only and are not functional.

Base

Add File

Breakpoints

Sizes

Provide a file upload input for users to inject or attach a document.

For proper styling, use the type="file" class to show the proper input. You can also pass in tons of parameters to customize the look of said input. Of course, you can also add classes to control the size. Examples:

<label class="label margin-top--sibling--smallest" for="file-upload-base">
    Upload Base File
</label>
<input type="file" id="file-upload-base" data-bind="fileInput: $root.FileUploadBase, customFileInput: {
    wrapperClass: 'input-group',
    fileNameClass: 'input disabled',
    noFileText: '',
    buttonGroupClass: 'input-group--action',
    buttonClass: 'button button--primary-color',
    clearButtonClass: 'button button--white',
    buttonText: 'Add File',
    changeButtonText: 'Change',
    clearButtonText: 'Clear',
    fileName: true,
    clearButton: true
}" />

Loading...