@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/ImageArrayField.js

@@ -0,0 +1,699 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnail = exports.MediaArrayField = void 0;
+const React = require("react");
+const PropTypes = require("prop-types");
+const immutability_helper_1 = require("immutability-helper");
+const Context_1 = require("../../Context");
+const react_dropzone_1 = require("react-dropzone");
+const components_1 = require("../components");
+const LajiForm_1 = require("../LajiForm");
+const utils_1 = require("../../utils");
+const BaseComponent_1 = require("../BaseComponent");
+const Spinner = require("react-spinner");
+const exif = require("exif-js");
+const utils_2 = require("@luomus/laji-map/lib/utils");
+const moment = require("moment");
+const ReactContext_1 = require("../../ReactContext");
+const utils_3 = require("@rjsf/utils");
+function toDecimal(number) {
+    if (!number)
+        return undefined;
+    return number[0].numerator + number[1].numerator /
+        (60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
+}
+let mediaUuid = 0;
+let ImageArrayField = class ImageArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ALLOWED_FILE_TYPES = ["image/jpeg", "image/png", "image/bmp", "image/tiff", "image/gif"];
+        this.ACCEPT_FILE_TYPES = ["image/*"];
+        this.MAX_FILE_SIZE = 20000000;
+        this.KEY = "IMAGE";
+        this.ENDPOINT = "images";
+        this.GLYPH = "camera";
+        this.TRANSLATION_TAKE_NEW = "TakeNewPhoto";
+        this.TRANSLATION_SELECT_FILE = "SelectPhoto";
+        this.TRANSLATION_NO_MEDIA = "NoPhoto";
+        this.CONTAINER_CLASS = "images-container";
+        this.METADATA_FORM_ID = "JX.111712";
+        this.renderMedia = (id) => React.createElement(Thumbnail, { id: id, apiClient: this.props.formContext.apiClient });
+        this.renderLoadingMedia = (id) => React.createElement(Thumbnail, { dataURL: id, loading: true, apiClient: this.props.formContext.apiClient });
+        this.onMediaClick = (i) => this.openModalFor(i);
+        this.renderModalMedia = () => React.createElement("img", { src: this.state.modalMediaSrc });
+    }
+    formatValue(value, options, props) {
+        const { translations } = props.formContext;
+        return value && value.length
+            ? `${value.length} ${translations.HowManyPhotos}`
+            : null;
+    }
+};
+ImageArrayField = __decorate([
+    MediaArrayField
+], ImageArrayField);
+exports.default = ImageArrayField;
+function MediaArrayField(ComposedComponent) {
+    let MediaArrayField = class MediaArrayField extends ComposedComponent {
+        constructor(...args) {
+            super(...args);
+            this.deprecatedOptions = {
+                imageAddModal: "addModal",
+                autoOpenImageAddModal: "autoOpenAddModal"
+            };
+            this.addMediaContainerRef = React.createRef();
+            this.getOptions = (uiSchema) => {
+                let options = utils_1.getUiOptions(uiSchema);
+                Object.keys(this.deprecatedOptions).forEach(deprecated => {
+                    if (options[deprecated] !== undefined) {
+                        options = Object.assign(Object.assign({}, options), { [this.deprecatedOptions[deprecated]]: options[deprecated] });
+                    }
+                });
+                return options;
+            };
+            this.onDragEnter = () => { this.setState({ dragging: true }); };
+            this.onDragLeave = () => { this.setState({ dragging: false }); };
+            this.onDrop = (files) => {
+                this.state.dragging && this.setState({ dragging: false });
+                this.onFileFormChange(files);
+            };
+            this.defaultOnClick = () => {
+                const { addModal } = utils_1.getUiOptions(this.props.uiSchema);
+                this.setState({ addModal });
+            };
+            this.onKeyDown = this.props.formContext.utils.keyboardClick(() => {
+                var _a;
+                const input = (_a = this.addMediaContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+                const { addModal } = utils_1.getUiOptions(this.props.uiSchema);
+                addModal ? this.defaultOnClick() : input === null || input === void 0 ? void 0 : input.click();
+            });
+            this.renderMedias = () => {
+                const { disabled, readonly } = this.props;
+                const { deleteConfirmPlacement = "top" } = utils_1.getUiOptions(this.props.uiSchema);
+                return (this.props.formData || []).map((item, i) => (React.createElement("div", { key: i, className: "media-container" },
+                    React.createElement("a", { onClick: this.onMediaClick(i) }, this.renderMedia(item, i)),
+                    React.createElement(components_1.DeleteButton, { corner: true, confirm: true, confirmPlacement: deleteConfirmPlacement, translations: this.props.formContext.translations, onClick: this.onMediaRmClick(i), disabled: disabled || readonly, id: `${this.props.idSchema.$id}_${i}` }))));
+            };
+            this.renderLoadingMedias = () => {
+                const containerId = this.getContainerId();
+                return (this.state.tmpMedias || []).map((item, i) => {
+                    const medias = this._context.tmpMedias[containerId];
+                    if (!medias || !medias[item])
+                        return null;
+                    return (React.createElement("div", { key: i, className: "media-container" },
+                        React.createElement("a", null, this.renderLoadingMedia(medias[item]))));
+                });
+            };
+            this.openModalFor = (i) => () => {
+                const item = this.props.formData[i];
+                this.setState({ metadataModalOpen: i });
+                this.fetching = item;
+                this.apiClient.fetch(`/${this.ENDPOINT}/${item}`).then((response) => {
+                    if (response.id !== this.fetching)
+                        return;
+                    this._context.metadatas[item] = response;
+                    this.setState({ modalIdx: i, modalMediaSrc: response.fullURL, modalMetadata: this._context.metadatas[item] });
+                });
+            };
+            this.onMediaRmClick = (i) => () => {
+                const id = this.props.formData[i];
+                this.props.onChange(immutability_helper_1.default(this.props.formData, { $splice: [[i, 1]] }));
+                this.apiClient.fetch(`/${this.ENDPOINT}/${id}`, undefined, {
+                    method: "DELETE",
+                    failSilently: true
+                });
+            };
+            this.hideMetadataModal = () => this.setState({ metadataModalOpen: false, metadataSaveSuccess: undefined });
+            this.onMetadataFormChange = (formData) => this.setState({ modalMetadata: formData });
+            this.renderMetadataModal = () => {
+                const { metadataModalOpen, modalIdx, modalMetadata, metadataSaveSuccess } = this.state;
+                const { lang, translations } = this.props.registry.formContext;
+                const metadataForm = this.state.metadataForm || {};
+                if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
+                    this.apiClient.fetchCached(`/forms/${this.METADATA_FORM_ID}`, { lang, format: "schema" })
+                        .then(metadataForm => {
+                        if (this.mounted) {
+                            this.setState({ metadataForm });
+                        }
+                    });
+                }
+                const { Previous, Next } = this.props.formContext.translations;
+                const isOpen = modalIdx === metadataModalOpen && modalMetadata && metadataForm.schema;
+                const uiSchema = isOpen ? Object.assign(Object.assign({}, metadataForm.uiSchema), { "ui:shortcuts": Object.assign(Object.assign({}, (metadataForm.uiSchema["ui:shorcuts"] || {})), this.props.formContext.services.keyHandler.shortcuts), "ui:disabled": this.props.disabled, "ui:readonly": this.props.readonly }) : undefined;
+                const { metadataModal = true } = utils_1.getUiOptions(this.props.uiSchema);
+                const { Modal, Alert, Pager } = this.context.theme;
+                return typeof metadataModalOpen === "number" ?
+                    React.createElement(Modal, { dialogClassName: "laji-form media-modal", show: true, onHide: this.hideMetadataModal },
+                        React.createElement(Modal.Header, { closeButton: true },
+                            React.createElement("br", null),
+                            React.createElement(Pager, null,
+                                React.createElement(Pager.Item, { previous: true, onClick: this.openModalFor(metadataModalOpen - 1), disabled: metadataModalOpen <= 0 },
+                                    "\u2190 ",
+                                    Previous),
+                                React.createElement(Pager.Item, { next: true, onClick: this.openModalFor(metadataModalOpen + 1), disabled: metadataModalOpen >= this.props.formData.length - 1 },
+                                    Next,
+                                    " \u2192"))),
+                        React.createElement(Modal.Body, null,
+                            React.createElement("div", { className: `laji-form${metadataModal ? " media-modal-content" : ""}` }, isOpen
+                                ? React.createElement(React.Fragment, null,
+                                    this.renderModalMedia(modalIdx),
+                                    metadataModal && React.createElement(LajiForm_1.default, Object.assign({}, metadataForm, { uiSchema: uiSchema, formData: modalMetadata, onChange: this.onMetadataFormChange, onSubmit: this.onMediaMetadataUpdate, submitText: translations.Save, lang: lang, apiClient: this.props.formContext.apiClient.apiClient, uiSchemaContext: this.props.formContext.uiSchemaContext, showShortcutButton: false }), (metadataSaveSuccess !== undefined) ? (React.createElement(Alert, { variant: metadataSaveSuccess ? "success" : "danger" }, translations[metadataSaveSuccess ? "SaveSuccess" : "SaveFail"])) : null))
+                                : React.createElement(Spinner, null)))) : null;
+            };
+            this.onHideMediaAddModal = () => this.setState({ addModal: undefined }, () => {
+                this.parseExif([]);
+            });
+            this.renderMediaAddModal = () => {
+                const { disabled, readonly } = this.props;
+                const { addModal } = this.state;
+                const { labels: { cancel } = { cancel: undefined } } = (utils_1.isObject(addModal) ? addModal : {});
+                const { translations } = this.props.formContext;
+                if (!addModal)
+                    return null;
+                const { Modal } = this.context.theme;
+                return (React.createElement(Modal, { dialogClassName: "laji-form media-add-modal", show: true, onHide: this.onHideMediaAddModal },
+                    React.createElement(Modal.Header, { closeButton: true }),
+                    React.createElement(Modal.Body, null,
+                        [
+                            ["environment",
+                                this.TRANSLATION_TAKE_NEW
+                            ],
+                            [
+                                undefined,
+                                this.TRANSLATION_SELECT_FILE
+                            ]
+                        ].map(([captureMethod, label]) => React.createElement(react_dropzone_1.default, { key: captureMethod || "", accept: this.ACCEPT_FILE_TYPES, onDrop: this.onDrop, disabled: readonly || disabled }, ({ getRootProps, getInputProps }) => {
+                            return (React.createElement("div", Object.assign({ className: "btn-block" }, getRootProps()),
+                                React.createElement("input", Object.assign({}, getInputProps(), { capture: captureMethod })),
+                                React.createElement(components_1.Button, { block: true, disabled: readonly || disabled }, label ? translations[label] : undefined)));
+                        })),
+                        React.createElement(components_1.Button, { className: "cancel", block: true, onClick: this.onHideMediaAddModal }, cancel || translations[this.TRANSLATION_NO_MEDIA]))));
+            };
+            this.onAlertOk = () => {
+                this.setState({ alert: false, alertMsg: undefined });
+            };
+            this.parseExif = (files) => {
+                const { exifParsers = [] } = utils_1.getUiOptions(this.props.uiSchema);
+                if (!exifParsers)
+                    return;
+                const found = exifParsers.reduce((found, { parse }) => {
+                    found[parse] = false;
+                    return found;
+                }, {});
+                return files.reduce((promise, file) => {
+                    if (Object.keys(found).every(k => found[k])) {
+                        return promise;
+                    }
+                    return promise.then(found => new Promise(resolve => {
+                        exif.getData(file, function () {
+                            if ("geometry" in found)
+                                try {
+                                    const coordinates = ["GPSLongitude", "GPSLatitude"].map(tag => toDecimal(exif.getTag(this, tag)));
+                                    const rawDatum = exif.getTag(this, "GPSMapDatum");
+                                    const datum = typeof rawDatum === "string"
+                                        ? rawDatum.trim().toUpperCase()
+                                        : undefined;
+                                    if ((!datum || datum === "WGS-84" || datum === "WGS84") && utils_2.validateLatLng(coordinates, utils_2.wgs84Validator)) {
+                                        found.geometry = {
+                                            type: "Point",
+                                            coordinates
+                                        };
+                                    }
+                                }
+                                catch (e) {
+                                    console.info("Reading GPS from EXIF failed", e);
+                                }
+                            const readDateFromFile = () => {
+                                if (file.lastModified) {
+                                    const momentDate = moment(file.lastModified);
+                                    if (momentDate.isValid()) {
+                                        const date = momentDate.format("YYYY-MM-DDTHH:mm");
+                                        if (date) {
+                                            found.date = date;
+                                        }
+                                    }
+                                }
+                            };
+                            if ("date" in found) {
+                                try {
+                                    const rawDate = exif.getTag(this, "DateTimeOriginal");
+                                    const momentDate = moment(rawDate, "YYYY:MM:DD HH:mm:ss");
+                                    if (momentDate.isValid()) {
+                                        found.date = momentDate.format("YYYY-MM-DDTHH:mm");
+                                    }
+                                    else {
+                                        readDateFromFile();
+                                    }
+                                }
+                                catch (e) {
+                                    console.info("Reading date from EXIF failed, trying to read from file", e);
+                                    readDateFromFile();
+                                }
+                            }
+                            else {
+                                readDateFromFile();
+                            }
+                            resolve(found);
+                        });
+                    }));
+                }, Promise.resolve(found)).then((found) => {
+                    let { registry } = this.props;
+                    const lajiFormInstance = this.props.formContext.services.rootInstance;
+                    const schema = lajiFormInstance.getSchema();
+                    let formData = lajiFormInstance.getFormData();
+                    exifParsers.filter((f) => f.type === "event" || found[f.parse]).forEach(({ field, parse, type, eventName }) => {
+                        if (type === "mutate") {
+                            formData = utils_1.updateFormDataWithJSONPointer({ formData, schema, registry }, found[parse], field);
+                        }
+                        if (type === "event") {
+                            this.props.formContext.services.customEvents.send(`root_${utils_1.JSONPointerToId(field)}`, eventName, found[parse], undefined, { bubble: false });
+                        }
+                    });
+                    return formData;
+                });
+            };
+            this.sideEffects = (formData) => {
+                const lajiFormInstance = this.props.formContext.services.rootInstance;
+                const schema = lajiFormInstance.getSchema();
+                const lajiFormFormData = lajiFormInstance.getFormData();
+                const { sideEffects } = utils_1.getUiOptions(this.props.uiSchema);
+                if (sideEffects) {
+                    const thisPath = utils_1.idSchemaIdToJSONPointer(this.props.idSchema.$id);
+                    const containerPath = thisPath.replace(/^(\/.*)\/.*$/, "$1");
+                    const parseRelativePaths = (path, containerPath) => {
+                        while ((path.match(/\/\.\./g) || []).length > 1) {
+                            containerPath = containerPath.replace(/^(\/.*)\/.*$/, "$1");
+                            path = path.replace(/^(.*)\/\.\.(.*)/, "$1$2");
+                        }
+                        return path.replace(/^(.*)\/\.\.(.*)/, `$1${containerPath}$2`);
+                    };
+                    formData = Object.keys(sideEffects).reduce((formData, field) => {
+                        const jsonPointer = parseRelativePaths(field, containerPath);
+                        return !utils_1.isDefaultData(utils_1.parseJSONPointer(formData, jsonPointer), utils_1.parseSchemaFromFormDataPointer(schema, jsonPointer))
+                            ? formData
+                            : utils_1.updateFormDataWithJSONPointer({ schema, registry: this.props.registry, formData }, sideEffects[field], parseRelativePaths(field, containerPath));
+                    }, formData);
+                }
+                if (formData !== lajiFormFormData) {
+                    lajiFormInstance.onChange(formData);
+                }
+            };
+            this.onFileFormChange = (files) => {
+                var _a;
+                if (this.state.addModal) {
+                    this.setState({ addModal: undefined });
+                }
+                (_a = this.parseExif(files)) === null || _a === void 0 ? void 0 : _a.then(this.sideEffects);
+                const id = this.getContainerId();
+                const lajiFormInstance = this.props.formContext.services.rootInstance;
+                const saveAndOnChange = () => this.saveMedias(files).then(mediaIds => {
+                    if (!lajiFormInstance.isMounted() || !mediaIds) {
+                        return;
+                    }
+                    let pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, id);
+                    if (!this.mounted && !pointer) {
+                        return;
+                    }
+                    const newFormData = [
+                        ...(this.mounted
+                            ? this.props.formData || []
+                            : utils_1.parseJSONPointer(lajiFormInstance.getFormData(), pointer) || []),
+                        ...mediaIds
+                    ];
+                    if (!lajiFormInstance.isMounted())
+                        return;
+                    if ((this.mounted || id === "root") && id === this.getContainerId()) {
+                        this.props.onChange(newFormData);
+                        // Settimeout because the resource is undefined 404 if fetched right away.
+                        setTimeout(() => {
+                            if (!this.mounted)
+                                return;
+                            const { autoOpenMetadataModal = false } = utils_1.getUiOptions(this.props.uiSchema);
+                            let shouldOpenMetadataModal = autoOpenMetadataModal;
+                            if (shouldOpenMetadataModal) {
+                                this.openModalFor(newFormData.length - mediaIds.length)();
+                            }
+                        }, 0);
+                        return;
+                    }
+                    pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, id);
+                    lajiFormInstance.onChange(utils_1.updateSafelyWithJSONPointer(lajiFormInstance.getFormData(), newFormData, pointer));
+                });
+                this.props.formContext.services.submitHooks.add(this.props, saveAndOnChange);
+            };
+            this.getContainerId = () => {
+                const { _parentLajiFormId = "root" } = this.props.formContext;
+                return _parentLajiFormId;
+            };
+            this.addNameToDataURL = (dataURL, name) => {
+                return dataURL.replace(";base64", `;name=${name};base64`);
+            };
+            this.processFiles = (files) => {
+                return Promise.all([].map.call(files, this.processFile));
+            };
+            this.processFile = (file) => {
+                const { name, size, type } = file;
+                return new Promise(resolve => {
+                    const reader = new window.FileReader();
+                    reader.onload = event => {
+                        var _a;
+                        resolve({
+                            dataURL: this.addNameToDataURL((_a = event.target) === null || _a === void 0 ? void 0 : _a.result, name),
+                            name,
+                            size,
+                            type
+                        });
+                    };
+                    reader.readAsDataURL(file);
+                });
+            };
+            this.onMediaMetadataUpdate = ({ formData }) => {
+                this.props.formContext.services.blocker.push();
+                this.apiClient.fetch(`/${this.ENDPOINT}/${formData.id}`, undefined, {
+                    method: "PUT",
+                    headers: {
+                        "accept": "application/json",
+                        "content-type": "application/json"
+                    },
+                    body: JSON.stringify(formData)
+                }).then(() => {
+                    this.props.formContext.services.blocker.pop();
+                    const notify = () => this.props.formContext.notifier.success(this.props.formContext.translations.SaveSuccess);
+                    if (this.mounted) {
+                        this.setState({ metadataModalOpen: false }, notify);
+                    }
+                    else {
+                        notify();
+                    }
+                }).catch(() => {
+                    this.props.formContext.services.blocker.pop();
+                    this.mounted && this.setState({ metadataSaveSuccess: false });
+                });
+            };
+            this.getMetadataPromise = () => {
+                let mediaMetadata = this.props.formContext.mediaMetadata
+                    || { intellectualRights: "MZ.intellectualRightsARR" };
+                const MACode = this.props.formContext.uiSchemaContext.creator;
+                return ("capturerVerbatim" in mediaMetadata)
+                    ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
+                    : MACode
+                        ? this.apiClient.fetchCached(`/person/by-id/${MACode}`).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
+                        : mediaMetadata;
+            };
+            this.getMaxFileSizeAsString = () => {
+                let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
+                return maxSize + " " + `${this.props.formContext.translations.Mb}`;
+            };
+            this.getAllowedMediaFormatsAsString = () => {
+                let formats = "";
+                for (let i = 0; i < this.ALLOWED_FILE_TYPES.length; i++) {
+                    formats += this.ALLOWED_FILE_TYPES[i].split("/")[1];
+                    if (i < this.ALLOWED_FILE_TYPES.length - 2) {
+                        formats += ", ";
+                    }
+                    else if (i === this.ALLOWED_FILE_TYPES.length - 2) {
+                        formats += ` ${this.props.formContext.translations.and} `;
+                    }
+                }
+                return formats;
+            };
+            const [props] = args;
+            ["ALLOWED_FILE_TYPES",
+                "MAX_FILE_SIZE",
+                "KEY",
+                "ENDPOINT",
+                "GLYPH",
+                "renderMedia",
+                "renderLoadingMedia",
+                "onMediaClick",
+                "formatValue",
+                "TRANSLATION_TAKE_NEW",
+                "TRANSLATION_SELECT_FILE",
+                "TRANSLATION_NO_MEDIA",
+                "CONTAINER_CLASS"
+            ].forEach(prop => {
+                if (this[prop] === undefined) {
+                    throw new Error(`${utils_1.getReactComponentName(ComposedComponent)} doesn't implement MediaArrayField ${prop}`);
+                }
+            });
+            const options = this.getOptions(props.uiSchema);
+            Object.keys(this.deprecatedOptions).forEach(deprecated => {
+                if (options[deprecated] !== undefined) {
+                    console.warn(`laji-form warning: ${utils_1.getReactComponentName(ComposedComponent)} ui:option '${deprecated}' is deprecated. Use '${this.deprecatedOptions[deprecated]}' instead!`);
+                }
+            });
+            this.apiClient = props.formContext.apiClient;
+            this._context = Context_1.default(`${this.KEY}_ARRAY_FIELD`);
+            if (!this._context.metadatas)
+                this._context.metadatas = {};
+            if (!this._context.tmpMedias)
+                this._context.tmpMedias = {};
+            this.state = { tmpMedias: Object.keys(this._context.tmpMedias[this.getContainerId()] || {}).map(i => +i) };
+            const { addModal, autoOpenAddModal } = options;
+            if (addModal
+                && autoOpenAddModal
+                && (props.formData || []).length === 0
+                && !props.formContext.uiSchemaContext.isEdit) {
+                this.state.addModal = addModal; // eslint-disable-line react/no-direct-mutation-state
+            }
+        }
+        componentDidMount() {
+            this.mounted = true;
+        }
+        componentWillUnmount() {
+            this.mounted = false;
+        }
+        render() {
+            const { schema, uiSchema, idSchema, name, formContext, readonly, disabled } = this.props;
+            const { translations } = formContext;
+            const { description, addModal } = utils_1.getUiOptions(uiSchema);
+            const title = (schema.title === undefined) ? name : schema.title;
+            const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
+            const { OverlayTrigger, Tooltip, Glyphicon } = this.context.theme;
+            const tooltip = (React.createElement(Tooltip, { id: `${this.props.idSchema.$id}-drop-zone-tooltip` },
+                React.createElement("span", null,
+                    translations.DropOrSelectFiles,
+                    ". "),
+                React.createElement("span", null,
+                    translations.AllowedFileFormats,
+                    " ",
+                    this.getAllowedMediaFormatsAsString(),
+                    " ",
+                    translations.and,
+                    " ",
+                    translations.allowedFileSize,
+                    " ",
+                    this.getMaxFileSizeAsString(),
+                    ".")));
+            const { dragging } = this.state;
+            const { Row, Col } = this.context.theme;
+            const { DescriptionFieldTemplate } = this.props.registry.templates;
+            const mediaCount = (this.props.formData || []).length + (this.state.tmpMedias || []).length;
+            const showAdd = utils_1.isNullOrUndefined(this.props.schema.maxItems) || mediaCount < this.props.schema.maxItems;
+            return (React.createElement(Row, null,
+                React.createElement(Col, { xs: 12 },
+                    React.createElement(TitleFieldTemplate, { title: title, schema: schema, uiSchema: uiSchema, id: idSchema.$id, registry: this.props.registry }),
+                    description !== undefined ? React.createElement(DescriptionFieldTemplate, { description: description, schema: schema, id: idSchema.$id, registry: this.props.registry }) : null,
+                    React.createElement("div", { className: `laji-form-medias ${this.CONTAINER_CLASS}` },
+                        this.renderMedias(),
+                        this.renderLoadingMedias(),
+                        showAdd && React.createElement(OverlayTrigger, { overlay: tooltip },
+                            React.createElement(react_dropzone_1.default, { accept: this.ACCEPT_FILE_TYPES, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, onDrop: this.onDrop, disabled: readonly || disabled, noKeyboard: true }, ({ getRootProps, getInputProps }) => {
+                                const _a = getRootProps(), { onClick: _onClick } = _a, rootProps = __rest(_a, ["onClick"]);
+                                const onClick = addModal ? this.defaultOnClick : _onClick;
+                                return (React.createElement("div", Object.assign({ className: utils_1.classNames("laji-form-drop-zone", dragging && "dragging", (readonly || disabled) && " disabled"), onClick: onClick, role: "button", tabIndex: 0 }, rootProps, { onKeyDown: this.onKeyDown, ref: this.addMediaContainerRef }),
+                                    React.createElement("input", Object.assign({}, getInputProps())),
+                                    React.createElement(Glyphicon, { glyph: this.GLYPH })));
+                            })),
+                        this.renderMetadataModal(),
+                        this.renderMediaAddModal()))));
+        }
+        saveMedias(files) {
+            const containerId = this.getContainerId();
+            let tmpMedias;
+            const fail = (translationKey, additionalInfo = "") => {
+                const translation = (Array.isArray(translationKey) ? translationKey : [translationKey])
+                    .map((key) => this.props.formContext.translations[key])
+                    .join(". ");
+                throw `${translation} ${additionalInfo}`;
+            };
+            return this.processFiles(files).then(processedFiles => {
+                let invalidFile = (files.length <= 0);
+                let fileTooLarge = false;
+                let noValidData = true;
+                if (!this._context.tmpMedias[containerId]) {
+                    this._context.tmpMedias[containerId] = {};
+                }
+                tmpMedias = processedFiles.map(f => {
+                    mediaUuid++;
+                    this._context.tmpMedias[containerId][mediaUuid] = f.dataURL;
+                    return mediaUuid;
+                });
+                this.mounted && this.setState({ tmpMedias: [...(this.state.tmpMedias || []), ...tmpMedias] });
+                const formDataBody = files.reduce((body, file) => {
+                    if (!this.ALLOWED_FILE_TYPES.includes(file.type)) {
+                        invalidFile = true;
+                    }
+                    else if (file.size > this.MAX_FILE_SIZE) {
+                        fileTooLarge = true;
+                    }
+                    else {
+                        body.append("data", file);
+                        noValidData = false;
+                    }
+                    return body;
+                }, new FormData());
+                if (noValidData && invalidFile) {
+                    fail("AllowedFileFormats", this.getAllowedMediaFormatsAsString() + ".");
+                    return;
+                }
+                else if (noValidData && fileTooLarge) {
+                    fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
+                    return;
+                }
+                else {
+                    return this.apiClient.fetchRaw(`/${this.ENDPOINT}`, undefined, {
+                        method: "POST",
+                        body: formDataBody
+                    });
+                }
+            }).then(response => {
+                if (!response)
+                    return;
+                if (response.status < 400) {
+                    return response.json();
+                }
+                else if (response.status === 400) {
+                    fail("InvalidFile");
+                }
+                else if (response.status === 503) {
+                    fail("InsufficientSpace");
+                }
+                else {
+                    fail(["SomethingWentWrong", "TryAgainLater"]);
+                }
+            }).then(response => {
+                if (!response)
+                    return;
+                return this.getMetadataPromise().then(mediaMetadata => {
+                    return Promise.all(response.map((item) => {
+                        return this.apiClient.fetchRaw(`/${this.ENDPOINT}/${item.id}`, undefined, {
+                            method: "POST",
+                            headers: {
+                                "accept": "application/json",
+                                "content-type": "application/json"
+                            },
+                            body: JSON.stringify(mediaMetadata)
+                        }).then(response => {
+                            if (response.status < 400) {
+                                return response.json();
+                            }
+                        });
+                    }));
+                });
+            }).then(response => {
+                if (!response)
+                    return;
+                const ids = response.map((item) => item ? item.id : undefined).filter(item => item !== undefined);
+                tmpMedias.forEach(id => {
+                    delete this._context.tmpMedias[containerId][id];
+                });
+                this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
+                return ids;
+            }).catch((e) => {
+                if (tmpMedias) {
+                    tmpMedias.forEach(id => {
+                        delete this._context.tmpMedias[containerId][id];
+                    });
+                    this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
+                }
+                throw e;
+            });
+        }
+    };
+    MediaArrayField.contextType = ReactContext_1.default;
+    MediaArrayField.propTypes = {
+        uiSchema: PropTypes.shape({
+            "ui:options": PropTypes.shape({
+                titleClassName: PropTypes.string,
+                addModal: PropTypes.oneOfType([
+                    PropTypes.bool,
+                    PropTypes.shape({
+                        labels: PropTypes.shape({
+                            cancel: PropTypes.string
+                        })
+                    })
+                ]),
+                autoOpenAddModal: PropTypes.bool,
+                autoOpenMetadataModal: PropTypes.bool,
+                sideEffects: PropTypes.object,
+                exifParsers: PropTypes.arrayOf(PropTypes.object)
+            })
+        }),
+        schema: PropTypes.shape({
+            type: PropTypes.oneOf(["array"]),
+            items: PropTypes.shape({
+                type: PropTypes.oneOf(["string"]).isRequired
+            }).isRequired
+        }).isRequired,
+        formData: PropTypes.array
+    };
+    MediaArrayField.displayName = utils_1.getReactComponentName(ComposedComponent);
+    MediaArrayField = __decorate([
+        BaseComponent_1.default
+    ], MediaArrayField);
+    return MediaArrayField;
+}
+exports.MediaArrayField = MediaArrayField;
+class Thumbnail extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
+            if (!id)
+                return;
+            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
+                if (!this.mounted)
+                    return;
+                this.setState({ url: response.squareThumbnailURL });
+            });
+        };
+        this.state = {};
+        this.updateURL(props);
+    }
+    componentDidMount() {
+        this.mounted = true;
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.updateURL(props);
+    }
+    render() {
+        const url = this.state.url || this.props.dataURL;
+        const img = url ? React.createElement("img", { src: url }) : null;
+        return (!url || this.props.loading)
+            ? React.createElement("div", { className: "media-loading" },
+                img,
+                React.createElement(Spinner, null))
+            : img;
+    }
+}
+exports.Thumbnail = Thumbnail;