Avatar

Базовый элемент управления для загрузки изображений.

Использование

{
    type: "avatar",
    key?: string, // по умолчанию "img"
    wrap?: boolean, // по умолчанию false
    target?: string,

    hidden?: boolean, // по умолчанию false
    disabled?: boolean, // по умолчанию false
    readOnly?: boolean, // по умолчанию false

    removeIcon?: boolean, // по умолчанию true
    circle?: boolean, // по умолчанию false
    icon?: string,
    placeholder?: string,
    preview?: string,
    alt?: string,
    size?: "small" | "medium" | "large" | number, // по умолчанию "medium"

    css?: string,
    width?: string | number | "content", // по умолчанию "content"
    height?: string | number | "content", // по умолчанию "content"
    padding?: string | number,

    // при `wrap:true` см. свойства label для Fieldset
    label?: string,
    labelWidth?: string | number,
    labelPosition?: "left" | "top", // по умолчанию "top"

    accept?: string, // по умолчанию "image/*"
    fieldName?: string, // по умолчанию "file"
    autosend?: boolean, // по умолчанию false
    params?: { [key: string]: any },
    headerParams?: { [key: string]: any },
    updateFromResponse?: boolean,  // по умолчанию true

    // служебные свойства и методы
    $on?: { [eventName: string]: function },
    $handler?: function,
    $setValue?: function,
    $layout?: function

Описание

Основные свойства

• type - (обязательно) тип элемента управления. Установите значение "avatar"
• key - (необязательно) имя указанного/изменяемого свойства в объекте элемента Diagram. По умолчанию "img"
• wrap - (необязательно) позволяет отображать внешнюю обёртку. По умолчанию false
• target - (необязательно) задаёт URL серверного скрипта, который будет обрабатывать загрузку файла; свойство обязательно, если изображение отправляется на сервер с помощью элемента управления

Примечание

При загрузке изображения и его отправке на сервер с помощью свойства target обратите внимание, что на сервер будет отправлен объект value. Сам файл будет записан в наборе данных в формате base64. Вы можете переопределить эту логику с помощью служебных методов.

• hidden - (необязательно) определяет, скрыт ли элемент управления. По умолчанию false
• disabled - (необязательно) определяет, включён (false) или отключён (true) элемент управления. По умолчанию false
• readOnly - (необязательно) задаёт режим "только для чтения" для элемента управления. По умолчанию false
• removeIcon - (необязательно) включает очистку элемента управления через интерфейс. По умолчанию true
• circle - (необязательно) задаёт режим отображения элемента управления со скруглёнными углами. По умолчанию false
• icon - (необязательно) позволяет задать CSS-класс иконки, отображаемой, если изображение не загружено; не работает вместе со свойством preview
• placeholder - (необязательно) позволяет задать текст, отображаемый, если изображение не загружено; не работает вместе со свойством preview
• preview - (необязательно) задаёт абсолютный путь к изображению предпросмотра. Изображение предпросмотра отображается, если изображение не загружено
• alt - (необязательно) задаёт атрибут тега <img> - альтернативный текст, отображаемый, если изображение не загружено
• size - (необязательно) позволяет задать один из трёх базовых размеров элемента управления: "small" | "medium" | "large", или указать пользовательский размер в px. По умолчанию "medium"
• css - (необязательно) добавляет стилевые классы к элементу управления
• width - (необязательно) ширина элемента управления. По умолчанию "content"
• height - (необязательно) высота элемента управления. По умолчанию "content"
• padding - (необязательно) задаёт отступ между ячейкой и границей элемента управления Avatar
• label - (необязательно) задаёт подпись для элемента управления
• labelWidth - (необязательно) задаёт ширину подписи элемента управления
• labelPosition - (необязательно) определяет позицию подписи: "left" | "top". По умолчанию "top"
• accept - (необязательно) позволяет указать тип/расширение выбранного файла. По умолчанию "image/"*. Подробнее
• fieldName - (необязательно) задаёт имя поля файла в данных формы, отправляемых на сервер. По умолчанию "file"
• autosend - (необязательно) включает/отключает автоматическую отправку добавленного файла. По умолчанию false
• params - (необязательно) добавляет дополнительные параметры для отправки XMLHttpRequest
• headerParams - (необязательно) предоставляет дополнительные параметры для заголовков запроса
• updateFromResponse - (необязательно) обновляет атрибуты файла данными из ответа сервера. По умолчанию true

Служебные свойства и методы

Предупреждение

Обратите внимание, что мы настоятельно рекомендуем не переопределять служебные свойства и методы для стандартных типов элементов управления, поскольку это может нарушить их работу.

• $on - (необязательно) - позволяет задать обработчик события. Объект содержит следующие свойства:
  • eventName - колбек, который вызывается со следующими параметрами:
    • object - объект со следующими свойствами:
      • control - элемент управления Form Avatar
      • editor - объект Diagram Editor
      • id - идентификатор элемента Diagram
    • arguments - (необязательно) - исходные аргументы события
• $handler - (необязательно) - колбек, который позволяет обрабатывать действия при срабатывании события change элемента управления Form Avatar и события change DataCollection. Вызывается со следующим параметром:
  • object - объект со следующими свойствами:
    • id - идентификатор элемента Diagram
    • key - имя указанного/изменяемого свойства в объекте элемента Diagram
    • editor - объект Diagram Editor
    • control - объект элемента управления Form Avatar, на основе которого построен компонент
    • value - новое значение элемента управления Form Avatar
• $setValue - (необязательно) - колбек, который позволяет задавать значение элемента управления Form Avatar при инициализации элемента управления и при изменении значения в DataCollection. Вызывается со следующим параметром:
  • object - объект со следующими свойствами:
    • editor - объект Diagram Editor
    • control - объект элемента управления Form Avatar, на основе которого построен компонент
    • value - значение элемента Diagram
• $layout - (необязательно) - колбек, который позволяет задавать структуру элемента управления. Возвращает конфигурацию элемента управления Form Avatar. Вызывается со следующим параметром:
  • object - конфигурация элемента управления без служебных свойств

Пример

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                "img-card": [
                    {
                        type: "avatar",
                        accept: "image/*",
                        fieldName: "file",
                        target: "https://docs.dhtmlx.com/suite/backend/upload",
                        params: {
                            "firstCustomParam": "customValue"
                        },
                        headerParams: {
                            "firstCustomParam": "customValue"
                        },
                        autosend: true
                    }
                ]
            }
        }
    }
});