Implementation
Classes
Upload field
| Name | Description |
|---|---|
qld__form-group--file-upload Copy | This is a modifier class for qld__form-group, specifically tailored for styling the file upload component. |
qld__form-file-wrapperCopy | This class is applied to the container for both the input mechanism and any additional instructions or UI elements related to file uploading. |
qld__accordion-group qld__form-file-wrapper--dark | This class is a modifier to be used when creating dark variants of the file upload. |
qld__form-file-dropzoneCopy | This class is used for the area where users can drag and drop files for uploading. It include styles for border, background, and hover effects to indicate that it is an interactive dropzone. |
qld__form-file-dropzone--disabledCopy | This is a modifier class for the qld__form-file-dropzone it applies the disabled style. |
qld__form-file-dropzone--dragged-overCopy | This is a modifier class for the qld__form-file-dropzone it applies the hover style when files are dragged into the drop zone. |
qld__form-file-dropzone--updatingCopy | This is a modifier class for the qld__form-file-dropzone it applies the disabled by updating style to the drop zone. |
qld__file-input-iconCopy | This class applies to the icon within the file input area and is used to style the size and also to hide the icon on mobile displays. |
qld__file-input-titleCopy | This class is used for the text instructions within the file upload area, guiding users to either drag and drop files or click to open a file selector. It styles the text for clarity and emphasis. |
qld__file-input-constraintsCopy | This class is applied the text styles to the text describing the limitations and constraints of the file upload (e.g., file types, size limits). |
qld__file-input | This class is assigned to the actual file input field. It's described as "visuallyhidden", because it has styles to make it invisible while still being functional and accessible (e.g., for screen readers). |
qld__form-file-preview | This class lis for the container that houses the area where previews of uploaded files are shown. |
File status
| Name | Description |
|---|---|
qld__form-fileCopy | This class styles the overall container that holds individual file upload-related elements. |
qld__form-file-info-wrapperCopyprovides styling and structure for the wrapper that groups together the visual representation of the file (like an icon) and its descriptive information (like the file name and status). | Provides styling and structure for the wrapper that groups together the visual file type icon and its descriptive information such as the file name and status. |
qld__form-file-loaderCopy | This class is used for the spinner icon that visually represents the file being uploaded. |
qld__form-file--completeCopy | This is modifier class applied to the qld__form-file that applies the upload complete state. |
qld__form-file--errorCopy | opy This is modifier class applied to the qld__form-file that applies the upload error state. |
qld__form-file--success | opy This is modifier class applied to the qld__form-file that applies the upload success state. |
qld__form-file--updating | opy This is modifier class applied to the qld__form-file that applies the loading state. |
qld__form-file-infoCopy | This class styles the file's descriptive information |
qld__form-file-info-nameCopy | Class that applies the text styles to the file name |
qld__form-file-actions | his class styles the container for actions that can be taken on the file, such as deleting it. |
qld__form-file-delete-btn | This class is for the delete button associated with the file. |
Setting up the upload constraints
Accepted files
Use the accept and date-file-types props to specify what file types are allowed to be uploaded.
<input type="file" accept=".docx,.doc,.pdf"
data-file-types=".docx,.doc,.pdf"
>
Maximum file size
Use the data-max-size prop to set a maximum size for each file. This value is measured in megabytes (mb).
<input type="file" data-max-size="10" >
Number of allowed files
You can also set data-max-files to limit how many files can be selected. Selecting multiple files is also supported with File upload. Simply add multiple="true".
<input type="file" data-max-files="3" multiple="true">