cx 25.11.1 → 26.0.2

package/build/widgets/form/TextArea.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { TextField } from "./TextField";
+import { getFieldTooltip } from "./Field";
+import { tooltipParentWillReceiveProps, tooltipParentWillUnmount, tooltipMouseMove, tooltipMouseLeave, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import { getActiveElement } from "../../util/getActiveElement";
+export class TextArea extends TextField {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            rows: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        let { state, data, cached } = instance;
+        if (!cached.data || data.value != cached.data.value)
+            state.empty = !data.value;
+        super.prepareData(context, instance);
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(Input, { data: instance.data, instance: instance, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")) }, key));
+    }
+    validateRequired(context, instance) {
+        return instance.state.empty && this.requiredText;
+    }
+}
+TextArea.prototype.baseClass = "textarea";
+TextArea.prototype.reactOn = "blur";
+TextArea.prototype.suppressErrorsUntilVisited = true;
+class Input extends VDOM.Component {
+    input;
+    constructor(props) {
+        super(props);
+        this.state = {
+            focus: false,
+        };
+    }
+    render() {
+        let { instance, label, help } = this.props;
+        let { widget, data, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+        let empty = this.input ? !this.input.value : data.empty;
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({
+                visited: state.visited,
+                focus: this.state.focus,
+                empty: empty && !data.placeholder,
+                error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+            })), style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, children: [_jsx("textarea", { className: CSS.element(baseClass, "input"), ref: (el) => {
+                        this.input = el || undefined;
+                    }, id: data.id, rows: data.rows, style: data.inputStyle, defaultValue: data.value, disabled: data.disabled, readOnly: data.readOnly, tabIndex: data.tabIndex, placeholder: data.placeholder, ...data.inputAttrs, onInput: (e) => this.onChange(e.currentTarget.value, "input"), onChange: (e) => this.onChange(e.target.value, "change"), onBlur: (e) => this.onBlur(e), onFocus: (e) => this.onFocus(), onClick: stopPropagation, onKeyDown: (e) => this.onKeyDown(e), onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)) }), label, help] }));
+    }
+    componentWillUnmount() {
+        if (this.input == getActiveElement()) {
+            this.onChange(this.input.value, "blur");
+        }
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    componentDidMount() {
+        tooltipParentDidMount(this.input, ...getFieldTooltip(this.props.instance));
+        autoFocus(this.input, this);
+    }
+    componentDidUpdate() {
+        autoFocus(this.input, this);
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.down:
+            case KeyCode.up:
+            case KeyCode.left:
+            case KeyCode.right:
+                e.stopPropagation();
+                break;
+        }
+    }
+    UNSAFE_componentWillReceiveProps({ data, instance }) {
+        if (data.value != this.props.data.value) {
+            this.input.value = data.value || "";
+        }
+        tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(instance));
+    }
+    onChange(inputValue, change) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (change == "blur") {
+            instance.setState({ visited: true });
+            if (this.state.focus)
+                this.setState({
+                    focus: false,
+                });
+        }
+        if (data.required) {
+            instance.setState({
+                empty: !inputValue,
+            });
+        }
+        if (instance.widget.reactOn.indexOf(change) != -1) {
+            let value = inputValue || widget.emptyValue;
+            instance.set("value", value);
+        }
+    }
+    onFocus() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+            instance.set("focused", true);
+        }
+    }
+    onBlur(e) {
+        const { instance } = this.props;
+        if (instance.widget.trackFocus) {
+            instance.set("focused", false);
+        }
+        this.onChange(e.target.value, "blur");
+    }
+}
+Widget.alias("textarea", TextArea);

package/build/widgets/form/TextField.d.ts

@@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import { Field, FieldConfig } from "./Field";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+export interface TextFieldConfig extends FieldConfig {
+    value?: Prop<any>;
+    placeholder?: StringProp;
+    disabled?: BooleanProp;
+    readOnly?: BooleanProp;
+    required?: BooleanProp;
+    minLength?: NumberProp;
+    maxLength?: NumberProp;
+    validationRegExp?: Prop<RegExp>;
+    validationErrorText?: StringProp;
+    minLengthValidationErrorText?: StringProp;
+    maxLengthValidationErrorText?: StringProp;
+    reactOn?: StringProp;
+    inputType?: StringProp;
+    keyboardShortcut?: StringProp;
+    trim?: BooleanProp;
+    hideClear?: BooleanProp;
+    showClear?: BooleanProp;
+    alwaysShowClear?: BooleanProp;
+    icon?: Prop<any>;
+    inputAttrs?: Prop<any>;
+    onChange?: string | ((value: any, instance: Instance) => void);
+    onInput?: string | ((value: any, instance: Instance) => void);
+    onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
+    onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
+}
+export interface TextFieldProps extends TextFieldConfig {
+}
+export declare class TextField<Config extends TextFieldConfig = TextFieldConfig> extends Field<Config> {
+    hideClear?: boolean;
+    showClear?: boolean;
+    alwaysShowClear?: boolean;
+    validationRegExp?: RegExp;
+    validationErrorText?: string;
+    minLengthValidationErrorText: string;
+    maxLengthValidationErrorText: string;
+    reactOn: string;
+    inputType?: string;
+    keyboardShortcut?: string;
+    trim?: boolean;
+    init(): void;
+    declareData(...args: any[]): void;
+    renderInput(context: any, instance: any, key?: any): any;
+    validate(context: any, instance: any): void;
+}

package/build/widgets/form/TextField.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipParentWillReceiveProps, tooltipParentWillUnmount, tooltipMouseMove, tooltipMouseLeave, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import { StringTemplate } from "../../data/StringTemplate";
+import { KeyCode } from "../../util/KeyCode";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { autoFocus } from "../autoFocus";
+import { isString } from "../../util/isString";
+import { getActiveElement } from "../../util/getActiveElement";
+import { VDOM } from "../../ui/VDOM";
+export class TextField extends Field {
+    init() {
+        if (typeof this.hideClear !== "undefined")
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData({
+            value: this.emptyValue,
+            disabled: undefined,
+            readOnly: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            minLength: undefined,
+            maxLength: undefined,
+            icon: undefined,
+            trim: undefined,
+        }, ...args);
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(Input, { instance: instance, data: instance.data, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")), icon: this.renderIcon(context, instance, "icon") }, key));
+    }
+    validate(context, instance) {
+        super.validate(context, instance);
+        let { data } = instance;
+        if (!data.error && data.value) {
+            if (this.validationRegExp)
+                this.validationRegExp.lastIndex = 0;
+            if (this.validationRegExp && !this.validationRegExp.test(data.value))
+                data.error = this.validationErrorText;
+            else if (typeof data.value === "string" && data.minLength != null && data.value.length < data.minLength)
+                data.error = StringTemplate.format(this.minLengthValidationErrorText, data.minLength, data.value.length);
+            else if (typeof data.value === "string" && data.maxLength != null && data.value.length > data.maxLength)
+                data.error = StringTemplate.format(this.maxLengthValidationErrorText, data.maxLength, data.value.length);
+        }
+    }
+}
+TextField.prototype.baseClass = "textfield";
+TextField.prototype.reactOn = "change input blur enter";
+TextField.prototype.inputType = "text";
+TextField.prototype.validationErrorText = "The entered value is not valid.";
+TextField.prototype.minLengthValidationErrorText = "Enter {[{0}-{1}]} more character(s).";
+TextField.prototype.maxLengthValidationErrorText = "Use {0} characters or fewer.";
+TextField.prototype.suppressErrorsUntilVisited = true;
+TextField.prototype.icon = null;
+TextField.prototype.showClear = false;
+TextField.prototype.alwaysShowClear = false;
+TextField.prototype.keyboardShortcut = "false";
+TextField.prototype.trim = false;
+Localization.registerPrototype("cx/widgets/TextField", TextField);
+class Input extends VDOM.Component {
+    input;
+    constructor(props) {
+        super(props);
+        this.state = {
+            focus: false,
+        };
+    }
+    render() {
+        let { instance, data, label, help, icon: iconVDOM } = this.props;
+        let { widget, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+        let icon = iconVDOM && (_jsx("div", { className: CSS.element(baseClass, "left-icon"), onMouseDown: preventDefault, onClick: (e) => this.onChange(e.target.value, "enter"), children: iconVDOM }));
+        let insideButton;
+        if (widget.showClear &&
+            !data.empty &&
+            !data.readOnly &&
+            !data.disabled &&
+            (widget.alwaysShowClear || !data.required)) {
+            insideButton = (_jsx("div", { className: CSS.element(baseClass, "clear"), onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClearClick(e), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({
+                visited: state.visited,
+                focus: this.state.focus,
+                icon: !!icon,
+                clear: insideButton != null,
+                empty: empty && !data.placeholder,
+                error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
+            })), style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, children: [_jsx("input", { ref: (el) => {
+                        this.input = el || undefined;
+                    }, className: CSS.expand(CSS.element(baseClass, "input"), data.inputClass), defaultValue: data.value, id: data.id, style: data.inputStyle, type: widget.inputType, disabled: data.disabled, readOnly: data.readOnly, tabIndex: data.tabIndex, placeholder: data.placeholder, ...data.inputAttrs, onMouseMove: this.onMouseMove.bind(this), onMouseLeave: this.onMouseLeave.bind(this), onInput: (e) => this.onChange(e.target.value, "input"), onChange: (e) => this.onChange(e.target.value, "change"), onKeyDown: this.onKeyDown.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onClick: stopPropagation }), insideButton, icon, label, help] }));
+    }
+    onFocus() {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+            instance.set("focused", true);
+        }
+        if (data.error && data.value)
+            instance.setState({ visited: true });
+    }
+    onBlur(e) {
+        if (this.state.focus) {
+            this.setState({
+                focus: false,
+            });
+            this.props.instance.set("focused", false);
+        }
+        this.onChange(e.target.value, "blur");
+    }
+    onClearClick(_e) {
+        if (this.input)
+            this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
+        this.props.instance.set("value", this.props.instance.widget.emptyValue, { immediate: true });
+    }
+    onMouseMove(e) {
+        const tooltip = getFieldTooltip(this.props.instance);
+        tooltipMouseMove(e, tooltip[0], tooltip[1], tooltip[2]);
+    }
+    onMouseLeave(e) {
+        const tooltip = getFieldTooltip(this.props.instance);
+        tooltipMouseLeave(e, tooltip[0], tooltip[1], tooltip[2]);
+    }
+    componentDidMount() {
+        const tooltip = getFieldTooltip(this.props.instance);
+        tooltipParentDidMount(this.input, tooltip[0], tooltip[1], tooltip[2]);
+        autoFocus(this.input, this);
+    }
+    componentDidUpdate() {
+        autoFocus(this.input, this);
+    }
+    componentWillUnmount() {
+        if (this.input == getActiveElement() && this.input && this.input.value != this.props.data.value)
+            this.onChange(this.input.value, "blur");
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                this.onChange(e.target.value, "enter");
+                break;
+            case KeyCode.left:
+            case KeyCode.right:
+                e.stopPropagation();
+                break;
+        }
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data } = props;
+        // The second check is required for debouncing, sometimes the value in the store lags after the input
+        // and update may be caused by some other property, i.e. visited
+        if (this.input && data.value != this.input.value && data.value != this.props.data.value)
+            this.input.value = data.value || "";
+        const tooltip = getFieldTooltip(props.instance);
+        tooltipParentWillReceiveProps(this.input, tooltip[0], tooltip[1], tooltip[2]);
+    }
+    onChange(textValue, change) {
+        let { instance, data } = this.props;
+        let immediate = change == "blur" || change == "enter";
+        if (immediate) {
+            instance.setState({ visited: true });
+        }
+        let { widget } = instance;
+        if (widget.reactOn.indexOf(change) != -1) {
+            let text = this.trimmed(textValue);
+            if (data.maxLength != null && text.length > data.maxLength) {
+                text = text.substring(0, data.maxLength);
+                if (this.input)
+                    this.input.value = text;
+            }
+            let value = text || widget.emptyValue;
+            if (!instance.set("value", value, { immediate })) {
+                if (this.input && text != this.input.value && immediate)
+                    this.input.value = text;
+            }
+            else {
+                if (value)
+                    instance.setState({ visited: true });
+            }
+        }
+    }
+    trimmed(value) {
+        if (this.props.data.trim && isString(value))
+            return value.trim();
+        return value;
+    }
+}
+Widget.alias("textfield", TextField);

package/build/widgets/form/TimeField.d.ts

@@ -0,0 +1,3 @@
+import { DateTimeField } from "./DateTimeField";
+export declare class TimeField extends DateTimeField {
+}

package/build/widgets/form/TimeField.js

@@ -0,0 +1,8 @@
+import { Widget } from "../../ui/Widget";
+import { Localization } from "../../ui/Localization";
+import { DateTimeField } from "./DateTimeField";
+export class TimeField extends DateTimeField {
+}
+TimeField.prototype.segment = "time";
+Widget.alias("timefield", TimeField);
+Localization.registerPrototype("cx/widgets/TimeField", TimeField);

package/build/widgets/form/TimeList.d.ts

@@ -0,0 +1 @@
+export declare const TimeList: any;

package/build/widgets/form/TimeList.js

@@ -0,0 +1,89 @@
+/** @jsxImportSource react */
+import { ContentResolver } from "../../ui/ContentResolver";
+import { DataProxy } from "../../ui/DataProxy";
+import { List } from "../List";
+import { KeySelection } from "../../ui/selection/KeySelection";
+import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
+import { zeroTime } from "../../util/date/zeroTime";
+import { Format } from "../../util/Format";
+import { Culture } from "../../ui/Culture";
+import { isString } from "../../util/isString";
+import { isFunction } from "../../util/isFunction";
+import { bind } from "../../ui/bind";
+import { Widget } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
+    return Widget.create({
+        type: ContentResolver,
+        params: { step, format, dummy: true },
+        onResolve: ({ step, format }) => {
+            let max = 24 * 60;
+            if (!step)
+                step = 15;
+            if (step < 1)
+                step = 1;
+            let times = [];
+            let today = zeroTime(new Date()).valueOf();
+            for (let m = 0; m < max; m += step) {
+                let time = m * 60 * 1000;
+                times.push({
+                    id: m * 60 * 1000,
+                    text: Format.value(today + time, format || "datetime;HHmm"),
+                });
+            }
+            let stepMs = step * 60 * 1000;
+            return Widget.create({
+                type: DataProxy,
+                data: { $value: value },
+                immutable: true,
+                children: Widget.create({
+                    type: DataProxy,
+                    data: {
+                        $selection: {
+                            get: ({ $value }) => {
+                                if ($value == null)
+                                    return null;
+                                let selectionDate = new Date($value);
+                                let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+                                return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+                            },
+                            set: (value, instance) => {
+                                let { store } = instance;
+                                let $value = store.get("$value");
+                                let copy = $value ? new Date($value) : new Date();
+                                let today = zeroTime(new Date()).valueOf();
+                                let date = new Date(today + value);
+                                copy.setHours(date.getHours());
+                                copy.setMinutes(date.getMinutes());
+                                copy.setSeconds(date.getSeconds());
+                                copy.setMilliseconds(0);
+                                let encode = encoding || Culture.getDefaultDateEncoding();
+                                store.set("$value", encode(copy));
+                            },
+                        },
+                    },
+                    children: Widget.create({
+                        type: List,
+                        records: times,
+                        recordAlias: "$time",
+                        selection: {
+                            type: KeySelection,
+                            selection: { bind: "$selection" },
+                        },
+                        ...props,
+                        onItemClick: (e, instance) => {
+                            if (!onSelect)
+                                return;
+                            let date = new Date(instance.store.get('$value'));
+                            if (isString(onSelect))
+                                instance.invokeControllerMethod(onSelect, e, instance, date);
+                            else if (isFunction(onSelect))
+                                onSelect(e, instance, date);
+                        },
+                        children: HtmlElement.create("div", { text: bind("$time.text") }),
+                    }),
+                }),
+            });
+        },
+    });
+});

package/build/widgets/form/UploadButton.d.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource react */
+import { Field, FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+export declare class UploadButton extends Field {
+    multiple: boolean;
+    method: string;
+    abortOnDestroy: boolean;
+    uploadInProgressText: string;
+    onResolveUrl?: string | ((file: File, instance: Instance) => string | Promise<string>);
+    onUploadStarting?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => boolean | Promise<boolean>);
+    onUploadComplete?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
+    onUploadProgress?: string | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
+    onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+    declareData(...args: Record<string, unknown>[]): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<UploadButton>, key: string): React.ReactNode;
+}

package/build/widgets/form/UploadButton.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { Field } from "./Field";
+import { Url } from "../../ui/app/Url";
+import { Localization } from "../../ui/Localization";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+//TODO: Implement UploadStatus which will enable canceling
+export class UploadButton extends Field {
+    declareData(...args) {
+        super.declareData({
+            disabled: undefined,
+            enabled: undefined,
+            text: undefined,
+            url: undefined,
+            icon: undefined,
+            accept: undefined,
+        }, ...args);
+    }
+    renderInput(context, instance, key) {
+        let { data } = instance;
+        return (_jsx(UploadButtonComponent, { instance: instance, children: data.text || this.renderChildren(context, instance) }, key));
+    }
+}
+UploadButton.prototype.baseClass = "uploadbutton";
+UploadButton.prototype.multiple = false;
+UploadButton.prototype.method = "POST";
+UploadButton.prototype.abortOnDestroy = false;
+UploadButton.prototype.uploadInProgressText = "Upload is in progress.";
+Localization.registerPrototype("cx/widgets/UploadButton", UploadButton);
+class UploadButtonComponent extends VDOM.Component {
+    uploads;
+    el;
+    constructor(props) {
+        super(props);
+        this.uploads = {};
+        this.state = {
+            progress: 100,
+            uploadKey: 0,
+        };
+    }
+    render() {
+        let { instance, children } = this.props;
+        let { widget, data } = instance;
+        let { CSS, baseClass } = widget;
+        let icon;
+        let className = data.classNames;
+        if (data.icon) {
+            icon = Icon.render(data.icon, {
+                className: CSS.element(baseClass, "icon"),
+            });
+            className = CSS.expand(className, CSS.state("icon"), !isNonEmptyArray(children) && CSS.state("empty"));
+        }
+        return (_jsxs("div", { ref: (el) => {
+                this.el = el || undefined;
+            }, className: className, style: data.style, children: [_jsx("div", { className: CSS.element(baseClass, "progress", { done: this.state.progress == 100 }), style: { width: `${this.state.progress}%` } }, "progress"), icon, children, !data.disabled && (_jsx("input", { className: CSS.element(baseClass, "input"), type: "file", title: " ", accept: data.accept, multiple: widget.multiple, tabIndex: data.tabIndex, onChange: this.onFileSelected.bind(this) }, this.state.uploadKey))] }));
+    }
+    onFileSelected(e) {
+        let files = e.target.files;
+        if (files) {
+            for (let i = 0; i < files.length; i++)
+                this.uploadFile(files[i]);
+        }
+    }
+    componentDidMount() {
+        if (this.props.instance.data.autoFocus)
+            this.el.focus();
+    }
+    componentWillUnmount() {
+        if (this.props.instance.widget.abortOnDestroy) {
+            for (let key in this.uploads) {
+                let upload = this.uploads[key];
+                upload.xhr.abort();
+            }
+        }
+    }
+    uploadFile(file) {
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        if (widget.onResolveUrl) {
+            Promise.resolve(instance.invoke("onResolveUrl", file, instance)).then((url) => {
+                this.doUpload(file, url);
+            });
+        }
+        else {
+            this.doUpload(file, data.url);
+        }
+    }
+    doUpload(file, url) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (!url)
+            throw new Error("Upload URL not set.");
+        let xhr = new XMLHttpRequest();
+        xhr.open(widget.method, Url.resolve(url));
+        let formData = new FormData();
+        formData.append("file", file);
+        let key = this.state.uploadKey;
+        this.setState({
+            uploadKey: key + 1,
+        });
+        let startingPromise = widget.onUploadStarting
+            ? instance.invoke("onUploadStarting", xhr, instance, file, formData)
+            : true;
+        Promise.resolve(startingPromise)
+            .then((result) => {
+            if (result === false)
+                return;
+            let upload = (this.uploads[key] = {
+                progress: 0,
+                size: file.size || 1,
+                file: file,
+                xhr: xhr,
+            });
+            xhr.onload = () => {
+                delete this.uploads[key];
+                if (widget.onUploadComplete)
+                    instance.invoke("onUploadComplete", xhr, instance, file, formData);
+                this.reportProgress();
+            };
+            xhr.onerror = (e) => {
+                delete this.uploads[key];
+                if (widget.onUploadError)
+                    instance.invoke("onUploadError", e, instance, file, formData);
+                this.reportProgress();
+            };
+            xhr.upload.onprogress = (event) => {
+                if (event.lengthComputable) {
+                    upload.progress = event.loaded / event.total;
+                    this.reportProgress();
+                    if (widget.onUploadProgress)
+                        instance.invoke("onUploadProgress", event, instance, file, formData);
+                }
+            };
+            xhr.send(formData);
+        })
+            .catch((err) => {
+            if (widget.onUploadError)
+                instance.invoke("onUploadError", err, instance, file, formData);
+            else
+                console.error("Unhandled upload error.", err);
+        });
+        this.reportProgress();
+    }
+    reportProgress() {
+        let totalSize = 0;
+        let uploaded = 0;
+        for (let key in this.uploads) {
+            let upload = this.uploads[key];
+            totalSize += upload.size;
+            uploaded += upload.size * upload.progress;
+        }
+        let progress = 100 * (totalSize ? uploaded / totalSize : 1);
+        this.props.instance.setState({
+            inputError: progress == 100 ? false : this.props.instance.widget.uploadInProgressText,
+        });
+        this.setState({
+            progress: Math.max(0.001, Math.floor(progress)),
+        });
+    }
+}
+Widget.alias("upload-button", UploadButton);