Open Forms TS types
    Preparing search index...

    Interface FileComponentSchema

    Component shape/options for the file component.

    The file component is a bit weird - it always uses an array of values, irrespective of the multiple property value.

    The generated documentation might be slightly off due to rendering the type alias as an interface. Double check with the actual TS types!

    interface FileComponentSchema {
        clearOnHide?: boolean;
        conditional?: {
            eq?: string | number | boolean;
            show?: boolean;
            when?: string;
        };
        description?: string;
        errors?: { required?: string };
        file: {
            allowedTypesLabels: string[];
            name: string;
            type: (`${string}/${string}` | "*")[];
        };
        fileMaxSize?: string;
        filePattern: string;
        hidden?: boolean;
        id: string;
        isSensitiveData?: boolean;
        key: string;
        label: string;
        maxNumberOfFiles?: null
        | number;
        multiple?: boolean;
        of?: {
            image?: {
                resize?: { apply?: boolean; height?: number; width?: number };
            };
        };
        openForms?: {
            softRequired?: boolean;
            translations?: {
                en?: { description?: string; label?: string; tooltip?: string };
                nl?: { description?: string; label?: string; tooltip?: string };
            };
        };
        registration?: {
            bronorganisatie?: string;
            docVertrouwelijkheidaanduiding?: string;
            informatieobjecttype?: string;
            titel?: string;
        };
        showInEmail?: boolean;
        showInPDF?: boolean;
        showInSummary?: boolean;
        tooltip?: string;
        translatedErrors?: {
            en?: { required?: string };
            nl?: { required?: string };
        };
        type: "file";
        useConfigFiletypes?: boolean;
        validate?: { required?: boolean };
    }
    Index

    Properties

    clearOnHide? conditional? description? errors? file fileMaxSize? filePattern hidden? id isSensitiveData? key label maxNumberOfFiles? multiple? of? openForms? registration? showInEmail? showInPDF? showInSummary? tooltip? translatedErrors? type useConfigFiletypes? validate?

    Properties

    clearOnHide?: boolean

    Clear the value (remove the key from the submission data) when the field is hidden. This is applied if the component itself or any parent is hidden, irrespective the mechanism that made it hidden.

    Related: hidden, conditional.

    conditional?: { eq?: string | number | boolean; show?: boolean; when?: string }

    Type declaration

    • Optionaleq?: string | number | boolean

      The value that should be checked against the reference component value.

      For array values (of the reference component), the array is checked if it contains the specified value.

      Only (a subset of) primitives are supported.

    • Optionalshow?: boolean

      Whether the field should be shown (true) or hidden (false) when the condition is met.

    • Optionalwhen?: string

      The reference component key. Its value will be retrieved and tested against eq.

    description?: string

    Additional information for the form field, displayed unconditionally.

    errors?: { required?: string }

    Resolved custom error messages, for the active locale. Set by the backend from translatedErrors - should never be written to.

    file: {
        allowedTypesLabels: string[];
        name: string;
        type: (`${string}/${string}` | "*")[];
    }

    File selection and processing options.

    Type declaration

    • ReadonlyallowedTypesLabels: string[]

      Display labels for the specified allowed file types, injected by the backend.

    • name: string

      Optional template for the file name. This is picked up in the backend, whereas Formio.js typically applies it client-side already.

    • type: (`${string}/${string}` | "*")[]

      Allowed file types, expressed as mime type (e.g. image/*) or the wildcard literal.

    fileMaxSize?: string

    The file size limit for an individual file.

    Example values: 10MB, 1GB...

    The value is parsed into a "number of bytes" integer.

    filePattern: string

    File pattern string, created from the allowed file types and used for the browser file selection input (the accept attribute).

    May be an empty string, which has the same behaviour as a wildcard.

    This is probably obsoleted by the new renderer, which uses the file configuration instead.

    hidden?: boolean

    Hide or show the form field. This only controls the visibility - whether submission data is retained or not is controlled through clearOnHide.

    id: string

    Unique ID for a component in a form definition. Used to render HTML IDs.

    The new renderer does not need this.

    isSensitiveData?: boolean

    Marker for a form field that requests potentially (privacy) sensitive information.

    Pruning of submission data will clear the data of components marked as sensitive data.

    This is specific to Open Forms.

    key: string

    Unique key for the component in a larger form definition.

    The value must comply with the (\w|\w[\w.\-]*\w) regex, meaning that periods/dots are allowed unless they're start or end. The period character creates a nesting level in the submission data.

    'myField'

    'parent.child' // creates `{parent: {child: <value}}` data.
    label: string

    The form field label text.

    maxNumberOfFiles?: null | number

    The maximum number of files that may be added for this component.

    To be moved in the validate configuration options?

    multiple?: boolean

    Flag that controls the multi-value mode of the field.

    There is some interaction with the configuration option for the maximum number of files - it could be inferred if that is unset, then multiple is allowed, otherwise set it to 1 or any other fixed number.

    of?: {
        image?: {
            resize?: { apply?: boolean; height?: number; width?: number };
        };
    }

    Image processing configuration options. Only used in the backend.

    To be moved into the openForms top-level key.

    openForms?: {
        softRequired?: boolean;
        translations?: {
            en?: { description?: string; label?: string; tooltip?: string };
            nl?: { description?: string; label?: string; tooltip?: string };
        };
    }

    Type declaration

    • OptionalsoftRequired?: boolean

      Mark the component as "soft-required", a weaker version of validate.required. This should be paired with the softRequiredErrors component.

      When a component is soft required, proceeding to the next step/submitting the form is possible without providing a value, but it's strongly recommended to not leave the field empty.

    • Optionaltranslations?: {
          en?: { description?: string; label?: string; tooltip?: string };
          nl?: { description?: string; label?: string; tooltip?: string };
      }
    registration?: {
        bronorganisatie?: string;
        docVertrouwelijkheidaanduiding?: string;
        informatieobjecttype?: string;
        titel?: string;
    }

    Custom registration options for registration plugins.

    This will be moved to a dedicated section in the new admin UI and removed from the component configuration, as it doesn't play well with multiple registration backend configurations/options at the form level.

    showInEmail?: boolean

    Include the component and its value in the confirmation email data.

    showInPDF?: boolean

    Include the component and its value in the submission report PDF available for download by the end-user and often included in registration plugins.

    showInSummary?: boolean

    Include the component and its value in the submission data summary on the confirmation page or not.

    tooltip?: string

    Extra information or background for the form field. Displayed after interacting with the tooltip icon/control near the label.

    translatedErrors?: { en?: { required?: string }; nl?: { required?: string } }

    Custom, user-supplied validation error messages for each error message type supported by the validators used in the validation configuration.

    Specified for each supported language - the backend reads this configuration and writes it to errors.

    type: "file"

    Discriminator to determine the component type. Uniquely determines the shape of the component configuration options.

    useConfigFiletypes?: boolean

    Apply the file type configuration from the global configuration instead of options on this component.

    To be moved into the openForms top-level key.

    validate?: { required?: boolean }

    The validation configuration of the component.

    Type declaration

    • Optionalrequired?: boolean

      Set to true to require a non-empty value to be provided for the field.

    Settings

    Member Visibility

    On This Page

    Properties