Class UFFileInputHelper

Helper class that can show information from input type="file" tag. This helper only works with single file selection inputs. If multiple files are selected, only the first file will be used.

Add div/span elements with one of the following attributes to the page:

  • data-uf-file-name: to show the name of the selected file.
  • data-uf-file-size: to show the size of the selected file.
  • data-uf-file-type: to show the mime type of the selected file.
  • data-uf-image-width: to show the width of the selected image.
  • data-uf-image-height: to show the height of the selected image.

The value of the attribute will be a selector that selects the input element of type file. The contents of the tag will be updated with the information from the selected file.

To create an image preview, add an image element (img) with the attribute data-uf-image-preview containing a selector that selects an input element of type file. Whenever a new file is selected the image element will be updated with a preview of the image.

Add data-uf-file-none to an element to show the element when no file is selected. Or gets hidden when any file is selected. The value of the attribute will be a selector that selects the input element of type file. Add data-uf-file-show to an element to show the element when a file is selected. Or gets hidden when no file is selected.

See UFHtmlHelper for more information about how elements are shown or hidden.

The image related attributes will only work if the selected file is an image.

Hierarchy (View Summary)

Constructors

constructor

Methods

addSourceAndTargetElements getTargetElements init scan showElement

Constructors

constructor

Methods

ProtectedaddSourceAndTargetElements

  • addSourceAndTargetElements<
        TTarget extends HTMLElement,
        TSource extends HTMLElement,
    >(
        aSelectorAttribute: string,
        aTargetList: TTarget[],
        aTargetToSourceMap: UFMapOfSet<TTarget, TSource>,
        anEvent?: null | string,
        anHandler?: null | (target: TTarget) => void,
        aGroupName?: string,
    ): void

    Adds elements that have a specific attribute which value is a selector pointing to one or several elements; the target element(s). The elements are grouped per target element pointed to.

    A separate target list is used, so that multiple aTargetToSourceMap instances can be used that use the same target but point to different type of sources.

    The allows for a single event handler. The event handlers should handle all the different types of sources pointing to the same target.

    Type Parameters

    • TTarget extends HTMLElement
    • TSource extends HTMLElement

    Parameters

    • aSelectorAttribute: string

      The attribute that contains the selector. The sources are the elements containing this attribute. The targets are the elements pointed to by the selector value of the attribute.

    • aTargetList: TTarget[]

      Target elements are added to this list. If the target is already in the list, it will not be added again.

    • aTargetToSourceMap: UFMapOfSet<TTarget, TSource>

      A map that contains the source elements grouped per target element.

    • anEvent: null | string = null

      Optional event to listen for at the target element(s). It will be set only once at each target.

    • anHandler: null | (target: TTarget) => void = null

      A handler that is called with the target element that triggered the event.

    • aGroupName: string = ''

      Event group to use. If empty, the event listener just gets added to the target.

    Returns void

ProtectedgetTargetElements

  • getTargetElements(element: HTMLElement, target: string): HTMLElement[]

    Gets the target element(s).

    Parameters

    • element: HTMLElement

      Element to get the target element(s) from.

    • target: string

      Either one of the predefined values or a selector.

    Returns HTMLElement[]

    list of elements (can be empty)

init

scan

ProtectedshowElement

Settings

Member Visibility

On This Page

Constructors
Methods