capture-file
Overview
The capture-file component allows users to upload a file from their device.
Basic Example
<var name="current_file" type="attachment" media="application/pdf" />
<capture-file label="Upload signed document" bind="current_file" required="false" />
Standard Attributes
bind
bindbindlabel
labellabelrequired
requiredrequiredAdvanced Attributes
align-content
align-contentalign-contentalign-controls
align-controlsalign-controlsalign-label
align-labelalign-labelcontrol-order
control-ordercontrol-orderdisabled
disableddisableddownloadable
downloadableOptional
Type: boolean
Default: true
Set downloadable to false to hide the download button and prevent the user from downloading a captured/displayed file.
fullwidth
fullwidthOptional
Type: boolean
Default: false
Specify whether the file preview should span the full width of the available screen space.
<capture-file bind="report" label="Usage Report" fullwidth="true" />
<display-file bind="report" label="Usage Report" fullwidth="true"/>hide-filename
hide-filenameOptional
Type: boolean
Default: false
Override the default and hide the captured/displayed filename from the preview.
<capture-file bind="report" label="Usage Report" hide-filename="true" />
<display-file bind="report" label="Usage Report" hide-filename="true" />icon-position
icon-positionicon-positionid
ididlabel-case
label-caselabel-caselabel-color
label-colorlabel-coloron-change
on-changeon-changeshow-if and hide-if
show-ifhide-ifshow-if and hide-ifComponent Methods
The following component methods are available when an id is assigned to the component and component.captureFile({id:'my-id'}) / component.displayFile({id:'my-id'}) is called from JS/TS:
captureMedia
captureMediaProgrammatically open the file picker that enables the user to select and upload a file.
try {
component.captureFile({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}closeMedia
closeMediaProgrammatically close the file preview.
try {
component.captureFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}try {
component.displayFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}deleteMedia
deleteMediaProgrammatically clear a captured file.
try {
component.captureFile({id: 'my-id'}).deleteMedia();
} catch (e) {
// handle exception here
}deleteMedia will trigger an on-change if a function is assigned to it.
downloadMedia
downloadMediaProgrammatically trigger a download of the captured/displayed file.
try{
component.captureFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}try {
component.displayFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}getMetadata
getMetadataRetrieve metadata about the captured file.
try {
var data = component.captureFile({id: 'my-id'}).getMetadata();
console.log('metadata', data);
} catch (e) {
// handle exception here
}openMedia
openMediaProgrammatically open the file preview.
try {
component.captureFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}try {
component.displayFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}scrollIntoView
scrollIntoViewProgrammatically scroll until the capture-file / display-file component is visible in the view.
try {
component.captureFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}try {
component.displayFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}Last updated