capture-file
Platform compatibility
Compatible with all platforms. Web is only supported from version 4.80.0 of the JourneyApps Runtime.
The
capture-file component was visually updated in version 4.80.0 of JourneyApps Runtime.The
capture-file component allows users to upload a file from their device.main.view.xml
<var name="current_file" type="attachment" media="application/pdf" />
<capture-file label="Upload signed document" bind="current_file" required="false" />
Optional
Type:
booleanDefault:
trueSet
downloadable to false to hide the download button and prevent the user from downloading a captured/displayed file.Optional
Type:
booleanDefault:
falseSpecify whether the file preview should span the full width of the available screen space.
capture-file
display-file
<capture-file bind="report" label="Usage Report" fullwidth="true" />
<display-file bind="report" label="Usage Report" fullwidth="true"/>
Optional
Type:
booleanDefault:
falseOverride the default and hide the captured/displayed filename from the preview.
capture-file
display-file
<capture-file bind="report" label="Usage Report" hide-filename="true" />
<display-file bind="report" label="Usage Report" hide-filename="true" />
Version compatibility
icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.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:Programmatically 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
}
Programmatically close the file preview.
capture-file
display-file
try {
component.captureFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
try {
component.displayFile({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
Programmatically clear a captured file.
try {
component.captureFile({id: 'my-id'}).deleteMedia();
} catch (e) {
// handle exception here
}
Programmatically trigger a download of the captured/displayed file.
capture-file
display-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
}
Retrieve metadata about the captured file.
try {
var data = component.captureFile({id: 'my-id'}).getMetadata();
console.log('metadata', data);
} catch (e) {
// handle exception here
}
Programmatically open the file preview.
capture-file
display-file
try {
component.captureFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
try {
component.displayFile({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
Programmatically scroll until the
capture-file / display-file component is visible in the view.capture-file
display-file
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 modified 3mo ago