Theme ➜ Oruga Full
Upload
Upload one or more files
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| disabledClass | Class of the Upload when disabled. | disabled | ||
| draggableClass | Class of the Upload when draggable. | dragDrop | ||
| expandedClass | Class of the Upload when expanded. | expanded | ||
| hoveredClass | Class of the Upload when hovered. 👉 Drag & drop a file to see it in action! | dragDrop | ||
| rootClass | Root class of the element. | |||
| variantClass | Class of the Upload variant. 👉 Drag & drop a file to see it in action! | variant | primary |
Upload component
Upload one or more files
html
<o-upload></o-upload>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| accept | Same as native accept | string | - | |
| disabled | Same as native disabled | boolean | - | false |
| dragDrop | Accepts drag & drop and change its style | boolean | - | false |
| expanded | Upload will be expanded (full-width) | boolean | - | false |
| multiple | Same as native, also push new item to v-model instead of replacing | boolean | - | false |
| native | Replace last chosen files every time (like native file input element) | boolean | - | true |
| override | Override existing theme classes completely | boolean | - | |
| useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
| v-model | object | typeof File | object[] | (typeof File)[] | - | ||
| validationMessage | The message which is shown when a validation error occurs | string | - | |
| variant | Color of the control | string | primary, info, success, warning, danger, and any other custom color | From config: upload: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:modelValue | value Object | Object[] | File | File[] - updated modelValue prop | modelValue prop two-way binding |
| focus | event Event - native event | on input focus event |
| blur | event Event - native event | on input blur event |
| invalid | event Event - native event | on input invalid event |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Default content | onclick (event:Event): void - click handler, only needed if a button is used |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $upload-draggable-border | 1px dashed $grey-light |
| $upload-draggable-border-radius | $base-border-radius |
| $upload-draggable-disabled-opacity | $base-disabled-opacity |
| $upload-draggable-hover-border-color | $grey |
| $upload-draggable-padding | 0.25em |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $upload-draggable-border | 1px dashed $grey-light |
| $upload-draggable-border-radius | $base-border-radius |
| $upload-draggable-disabled-opacity | $base-disabled-opacity |
| $upload-draggable-hover-border-color | $grey |
| $upload-draggable-padding | 0.25em |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $upload-draggable-bg | transparent |
| $upload-draggable-bg-hover | transparent |
| $upload-draggable-border-color | var(--#{$prefix}border-color) |
| $upload-draggable-border-color-hover | var(--#{$prefix}dark-bg-subtle) |
| $upload-draggable-border-width | var(--#{$prefix}border-width) |
| $upload-draggable-border-radius | var(--#{$prefix}border-radius) |
| $upload-draggable-padding | 2em |
| $upload-disabled-opacity | 0.5 |
See ➜ 📄 Full scss file