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 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



Default value

Derived value

Computed value


$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%) -

Related pages