Class FileSelection

Represents a file upload control.

The File Selection is a control that allows users to select files from their local system, upload them to the server and make them available for download. It provides an interface for file selection, progress indication and error handling.

The control supports multiple file selection, drag-and-drop file selection, and provides a callback for successful uploads. It also handles server-side validation and provides feedback to the user.

Hierarchy

  • UpDataEditControl
    • FileSelection

Accessors

required

Methods

checkValidity disable enable getFilesInfo getImageEditor getImageEditors getNumberOfFiles getNumberOfFilesToUpload getNumberOfUploadedFiles getValue isEnabled

Accessors

required

  • get required(): boolean

  • Check if the upload is required.

    Returns boolean

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // check if the upload is required
    var isRequired = fileUpload.required;
  • set required(value): void

  • Set the upload control as required or not required.

    Parameters

    • value: boolean

      Set to true to make the control required, or false to make it not required.

    Returns void

    NOTE

    This method affects the client-side behavior only and does not impact the server-side validation.

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // set the upload control as required
    fileUpload.required = true;

Methods

checkValidity

  • Check if the field content is valid:

    • are all uploads finished
    • if the field is required, does it have content

    Returns Promise<ValidationInfo>

    A Promise that resolves to a ValidationInfo object. The object contains the validation status (valStatus), the validation message (valMessage), and the validation type (valType).

    Example

    // Get the control by its element GUID and check its validity
    const validityResult = await ix.api.dom.getControl("<FILEUPLOAD-GUID>").checkValidity();

    // Example of `validityResult` when the field is required but not filled:
    ValidationInfo {
      valStatus: false,
      valMessage: 'Please make a selection',
      valType: 'required'
    }

disable

  • Disable the file upload.

    Returns void

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // disable the file upload
    fileUpload.disable();

enable

  • Enable the file upload.

    Returns void

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // enable the file upload
    fileUpload.enable();

getFilesInfo

  • Get detailed information about the uploaded files.

    Returns {
        element: HTMLElement;
        id: null | string;
        mimeType: null | string;
        name: null | string;
        new: boolean;
    }[]

    An array of objects containing the file ID, the file mimetype, the file name, a boolean indicating if the file is new and the HTML element.

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // get detailed information about the uploaded files
    var filesInfo = fileUpload.getFilesInfo();

    // Example output:
    filesInfo = [
       {
          id: "1",
          mimeType: "image/png",
          name: "image.png",
          new: false,
          element: HTMLElement
       },
       {
          id: "2",
          mimeType: "application/pdf",
          name: "document.pdf",
          new: true,
          element: HTMLElement
       }
    ]

getImageEditor

  • Gets the image editor associated with the specified file ID from the file upload control.

    Parameters

    • fileId: string

      The ID of the file.

    Returns null | Element

    The image editor corresponding to the given file ID.

    NOTE

    An image editor is only available for image files that have already been uploaded and only if at least one editor is activated in the file upload control options.

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // determine the file ID you want to get the image editor for
    // you can use the `getValue(true)` or `getFilesInfo()` method to get the ID of an file
    // in this example we use the first file
    var fileId = fileUpload.getFilesInfo()[0].id;

    // get the image editor with the given file id
    var imageEditor = fileUpload.getImageEditor(fileId);

getImageEditors

  • Gets all image editors within the file upload control.

    Returns ImageEditor[]

    NOTE

    An image editor is only available for image files that have already been uploaded and only if at least one editor is activated in the file upload control options.

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // get all image editors within the file upload control
    var imageEditors = fileUpload.getImageEditors();

getNumberOfFiles

  • Get the number of files (uploaded & selected for upload).

    Returns any

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // get the number of files
    var numberOfFiles = fileUpload.getNumberOfFiles();

getNumberOfFilesToUpload

  • Get the number of selected but not uploaded files.

    Returns number

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // get the number of selected but not uploaded files
    var numberOfFilesToUpload = fileUpload.getNumberOfFilesToUpload();

getNumberOfUploadedFiles

  • Get the number of already uploaded files.

    Returns number

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // get the number of uploaded files
    var numberOfUploadedFiles = fileUpload.getNumberOfUploadedFiles();

getValue

  • Retrieves the current value of the file upload control.

    This method returns either an array of file names or detailed information about the files, depending on the verbose parameter.

    Parameters

    • Optional verbose: boolean

      Optional.

      • If true, the method returns an object containing detailed information about the files.
      • If false or omitted, the method returns an array of file names.

    Returns (null | string)[] | {
        element: HTMLElement;
        id: null | string;
        mimeType: null | string;
        name: null | string;
        new: boolean;
    }[]

    The value of the control.

    • If verbose is true, the return value is an object containing detailed information about the files. See "getFilesInfo" method for more info.
    • Otherwise, it returns an array of file names.

    Example

    // Get the control by its element GUID and retrieve the value
    const value = ix.api.dom.getControl("<ELEMENT-GUID>").getValue());

isEnabled

  • Determines whether the file upload control is enabled.

    Returns boolean

    Example

    // get the file upload control
    var fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

    // check if the file upload control is enabled
    var isEnabled = fileUpload.isEnabled();

Settings

Member Visibility

Theme

On This Page