api_avatar_properties.md

sidebar_label	Form Avatar properties
title	JavaScript Form - Avatar Properties
description	You can explore the Properties of the Avatar control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

Avatar properties

Usage

{
    type: "avatar",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set

    target?: string,
    value?: object,

    hidden?: boolean, // false by default
    disabled?: boolean, // false by default
    readOnly?: boolean, // false by default

    removeIcon?: boolean, // true by default 
    circle?: boolean, // false by default
    icon?: string,
    placeholder?: string,
    preview?: string,
    alt?: string,
    size?: "small" | "medium" | "large" | number, // "medium" by default
    
    css?: string,
    width?: string | number | "content", // "content" by default
    height?: string | number | "content", // "content" by default
    padding?: string | number, 

    label?: string,
    labelWidth?: string | number,
    labelPosition?: "left" | "top", // "top" by default
    hiddenLabel?: boolean, // false by default
    helpMessage?: string,
    required?: boolean, // false by default

    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,

    validation?: (value: object) => boolean,

    accept?: string, // "image/*" by default
    fieldName?: string, // "file" by default
    autosend?: boolean, // false by default
    params?: { [key: string]: any },
    headerParams?: { [key: string]: any },
    updateFromResponse?: boolean  // true by default 
}

Description

type	(required) the type of a control, set it to "avatar"
name	(optional) the name of a control
id	(optional) the id of a control, must be unique if set, auto-generated if not set
target	(optional) sets an URL to the server-side script that will process file upload, the property is required when an image is sent to the server via the control
value	(optional) the value of an Avatar set as an object. The avatar object can contain the following properties: id - (optional) the id of the file, auto-generated if not set src - (required) the path to the image. If the image is uploaded into the component without being sent to the server, a temporary path is formed. In case data is sent to the server, the server response must contain a path with the "src" key. The value of the key should be the absolute path to the image file - (optional) the File object is formed when an image is loaded with the help of UI path - (optional) the path to the file on the computer starting from the name of the folder (in case a folder with files is added) status - (optional) the status of the file ("queue", "inprogress", "uploaded", or "failed") progress - (optional) the progress of the file upload request - (optional) an XMLHttpRequest object sent to the server when an upload begins
hidden	(optional) defines whether a control is hidden, false by default
disabled	(optional) defines whether a control is enabled (false) or disabled (true), false by default
readOnly	(optional) sets the readonly mode for the control, false by default
removeIcon	(optional) enables the possibility to clear the control by means of the UI, true by default
circle	(optional) sets the mode of displaying the control with rounded corners, false by default
icon	(optional) allows setting the CSS class of an icon when there is no image uploaded, doesn't work together with the preview property
placeholder	(optional) allows setting a text to be visible when there is no image uploaded, doesn't work together with the preview property
preview	(optional) specifies the absolute path to the preview image. The preview image is visible, when the value is not defined
alt	(optional) sets the attribute of the <img> tag - an alternative text when there is no image uploaded
size	(optional) allows setting one of the three basic control's sizes, or applying a custom size, "medium" by default
css	(optional) adds style classes to a control
width	(optional) the width of a control, "content" by default
height	(optional) the height of a control, "content" by default
padding	(optional) sets padding between a cell and a border of the Avatar control
label	(optional) specifies a label for the control
labelWidth	(optional) sets the label width of the control
labelPosition	(optional) defines the position of a label: "left" | "top", "top" by default
hiddenLabel	(optional) makes the label invisible, false by default
helpMessage	(optional) adds a help message to a control
required	(optional) defines whether a control is required, false by default
preMessage	(optional) a message that contains instructions for interacting with the control
successMessage	(optional) a message that appears in case of successful validation of the control value
errorMessage	(optional) a message that appears in case of an error during validation of the control value
validation	(optional) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
accept	(optional) allows specifying the type/extension of the selected file, "image/*" by default. Check details
fieldName	(optional) sets the file field name in the form data sent to the server, "file" by default
autosend	(optional) enables/disables automatic sending of an added file, false by default
params	(optional) adds extra parameters for sending an XMLHttpRequest
headerParams	(optional) provides additional parameters for Request Headers
updateFromResponse	(optional) updates file attributes with the data from the server response, true by default

Example

<iframe src="https://snippet.dhtmlx.com/87u37hqc?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>

Related article: Avatar