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

bind

label

label

required

required

Advanced Attributes

align-content

align-content

align-controls

align-controls

align-label

align-label

control-order

control-order

disabled

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

<capture-file bind="report" label="Usage Report" fullwidth="true" />

display-file

<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

<capture-file bind="report" label="Usage Report" hide-filename="true" />

display-file

<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.

icon-position

id

id

label-case

Version compatibility

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

label-case

label-color

label-color

on-change

on-change

show-if and hide-if

show-ifhide-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

try {
    component.captureFile({id: 'my-id'}).closeMedia();
} catch (e) {
    // handle exception here
}

display-file

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

try{
    component.captureFile({id: 'my-id'}).downloadMedia();
} catch (e) {
    // handle exception here
}

display-file

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

try {
    component.captureFile({id: 'my-id'}).openMedia();
} catch (e) {
    // handle exception here
}

display-file

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

try {
    component.captureFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}

display-file

try {
    component.displayFile({id: 'my-id'}).scrollIntoView();
} catch (e) {
    // handle exception here
}