Fileitem Formitem component
The component is used for file handling. The file item component enables the user to upload files to the server and also to display previously uploaded files. The component updates previously updates files: files can be deleted and new ones can be uploaded.
This component is a form item and is a part of a Form. The form item value is one or more JBFile objects representing uploaded files. The uploaded file is stored in a temporary file store on the server. Multiple file uploads are executed simultaneously. The upload progress is displayed on a progress bar. If the component displays a previously uploaded file or the current file upload is finished, the progress bar under the file name disappears and a delete button is shown next to the file name. The file can be deleted using this button.
If the component displays a previously uploaded file, the user is able to download it by clicking on the file name.
If the FileItem component is used as part of a Form, the Form.save() synchronizes the file with the one stored on the server. A FileItem component can also be a standalone component and used not just on a form. Uploaded files are saved and deleted files are removed. The form is saved using the DAO layer. File handling methods are executed by the specified JBStrapParamType.FILE_HANDLER . If the component is not a part of a Form, uploaded files must be saved by an own code implementation.
Supported events:
Show, Hide, Change, Focus, Animations, MouseEvents, HotKey, Drag&Drop, UploadError
Style customization
Name |
Type |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|---|
| $file-item-color | $gray-500 | $file-item-color-->$gray-500-->#adb5bd | #adb5bd | FileItem color. | |
| $file-item-hover-color | $primary | $file-item-hover-color-->$primary-->#079e97 | #079e97 | FileItem hover color. | |
| $file-item-border-color | $border-color | $file-item-border-color-->$border-color-->#e9ecef | #e9ecef | FileItem border color. | |
| $file-item-detail-color | $gray-500 | $file-item-detail-color-->$gray-500-->#adb5bd | #adb5bd | FileItem detail color. | |
| $file-item-detail-hover-color | $primary | $file-item-detail-hover-color-->$primary-->#079e97 | #079e97 | FileItem detail hover color. | |
| $file-item-danger-color | $danger | $file-item-danger-color-->$danger-->#D9230F | #D9230F | FileItem danger color. | |
| $file-item-dnd-upload-btn-color | $primary | $file-item-dnd-upload-btn-color-->$primary-->#079e97 | #079e97 | FileItem button color. | |
| $file-item-dnd-upload-btn-bg-color | transparent | transparent | FileItem button hover color. | ||
| $file-item-dnd-upload-btn-color-hover | $white | $file-item-dnd-upload-btn-color-hover-->$white-->#fff | #fff | - | |
| $file-item-dnd-upload-btn-bg-color-hover | darken($primary, 4%) | $file-item-dnd-upload-btn-bg-color-hover-->darken($primary, 4%)--> | darken(#079e97, 4%) | - |