FilePreview
Used by FileElement as a file preview.
Options
Find below the list of options that can use to configure FilePreview component. Options can be passed to the component via props.
attrs
- Type:
object - Default:
{}
<FilePreviewElement :attrs="{ autofocus: true }" ... />Assigns HTML attributes to the container / input field.
Properties
All the data, computed and inject properties of the component.
ariaLabelledby
- Type:
string - Group:
computed
The aria-labelledby attribute of the preview.
ariaPlaceholder
- Type:
string - Group:
computed
The aria-placeholder attribute of the preview.
ariaRoledescription
- Type:
string - Group:
computed
The aria-roledescription attribute of the preview.
filename
- Type:
string - Group:
computed
The filename to display.
link
- Type:
string - Group:
computed
The link for the file.
hasLink
- Type:
boolean - Group:
computed
Whether the file has link and should be clickable.
preview
- Type:
string - Group:
computed
The image's preview when view is image or gallery. Equals to the link if the file is already uploaded and base64 if only selected or temporarily uploaded.
clickable
- Type:
boolean - Group:
computed
Whether the file should be clickable if it is already permantently uploaded.
uploadText
- Type:
string - Group:
computed
The text for upload button. Can be also changed in the locale file: vueform.elements.file.upload
uploading
- Type:
boolean - Group:
computed
Whether the file is currently uploading.
progress
- Type:
number - Group:
computed
The percentage of progress when the file is being temporarily uploaded (0-100).
uploaded
- Type:
boolean - Group:
computed
Whether the temporary or permanent file is uploaded.
hasError
- Type:
boolean - Group:
computed
Whether the preview has upload error.
canRemove
- Type:
boolean - Group:
computed
Whether the file can be removed.
canUploadTemp
- Type:
boolean - Group:
computed
Whether temporary file can be uploaded.
visible
- Type:
boolean - Group:
computed
Whether the preview component should be visible.
Size
- Type:
string - Group:
inject
The size of the component.
View
- Type:
string - Group:
computed
The name of the resolved view for the component. This one should be used to determine the component's view in class functions.
template
- Type:
object - Group:
computed
The component's template.
classes
- Type:
object - Group:
computed
The component's classes.
theme
- Type:
object - Group:
inject
The global theme object, which contains all the default templates and classes.
form$
- Type:
Vueform - Group:
inject
The root form's component.
el$
- Type:
VueformElement - Group:
inject
The parent element's component.
Methods
The methods of the component.
upload
- Returns:
void
Upload the currently selected file as temporary.
remove
- Returns:
void
Remove the file.
Views
The FilePreview component is used by FileElement and MultifileElement as a child component and inherits the view from them.
default
<FilePreview name="file" />image
<FileElement name="file" view="image" />gallery
<FileElement name="file" view="gallery" />
