Overview
The capture-file
component allows users to upload a file from their device.
Basic Example
Copy <var name="current_file" type="attachment" media="application/pdf" />
<capture-file label="Upload signed document" bind="current_file" required="false" />
Standard Attributes
bind
label
required
Advanced Attributes
align-content
align-controls
align-label
control-order
disabled
downloadable
Optional
Type : boolean
Default : true
Set downloadable
to false
to hide the download button and prevent the user from downloading a captured/displayed file.
fullwidth
Optional
Type : boolean
Default : false
Specify whether the file preview should span the full width of the available screen space.
capture-file display-file
Copy <capture-file bind="report" label="Usage Report" fullwidth="true" />
Copy <display-file bind="report" label="Usage Report" fullwidth="true"/>
hide-filename
Optional
Type : boolean
Default : false
Override the default and hide the captured/displayed filename from the preview.
capture-file display-file
Copy <capture-file bind="report" label="Usage Report" hide-filename="true" />
Copy <display-file bind="report" label="Usage Report" hide-filename="true" />
icon-position
id
label-case
label-color
on-change
show-if
and hide-if
Component 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
Programmatically open the file picker that enables the user to select and upload a file.
Copy try {
component.captureFile({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}
closeMedia
Programmatically close the file preview.
capture-file display-file
Copy try {
component.captureFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
Copy try {
component.displayFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
deleteMedia
Programmatically clear a captured file.
Copy 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
Programmatically trigger a download of the captured/displayed file.
capture-file display-file
Copy try{
component.captureFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}
Copy try {
component.displayFile({id: 'my-id'}).downloadMedia();
} catch (e) {
// handle exception here
}
getMetadata
Retrieve metadata about the captured file.
Copy try {
var data = component.captureFile({id: 'my-id'}).getMetadata();
console.log('metadata', data);
} catch (e) {
// handle exception here
}
openMedia
Programmatically open the file preview.
capture-file display-file
Copy try {
component.captureFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
Copy try {
component.displayFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
scrollIntoView
Programmatically scroll until the capture-file
/ display-file
component is visible in the view.
capture-file display-file
Copy try {
component.captureFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
Copy try {
component.displayFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}