Links

capture-file

Overview

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.

Basic Example

main.view.xml
<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
<capture-file bind="report" label="Usage Report" fullwidth="true" />
<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
<capture-file bind="report" label="Usage Report" hide-filename="true" />
<display-file bind="report" label="Usage Report" hide-filename="true" />

icon-position

Version compatibility
icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.

id

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

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.
try {
component.captureFile({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}

closeMedia

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
}

deleteMedia

Programmatically 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

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
}

getMetadata

Retrieve metadata about the captured file.
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
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

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
}