@luomus/laji-form 15.1.69 → 15.1.71

package/lib/components/fields/CondensedObjectField.js

@@ -134,10 +134,9 @@ class CondensedObjectField extends React.Component {
         return Math.max(...oldIndexes, -1) + 1;
     }
     render() {
-        var _a;
         const SchemaField = this.props.registry.fields.SchemaField;
-        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required, formContext: { Label, translations } } = this.props;
-        const uiOptions = (0, utils_1.getUiOptions)(uiSchema);
+        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required, disabled, readonly, formContext: { Label, translations, uiSchemaContext } } = this.props;
+        const { addFieldPlaceholder = `${translations.AddField}`, confirmDelete = uiSchemaContext.confirmDelete } = (0, utils_1.getUiOptions)(uiSchema);
         const childProps = this.state.selectedFields.map(field => {
             let childSchema = schema.properties[field.name];
             let childUiSchema = uiSchema[field.name] || {};
@@ -162,14 +161,13 @@ class CondensedObjectField extends React.Component {
             value: prop,
             label: schema.properties[prop].title || prop,
         }));
-        const addFieldPlaceholder = (_a = uiOptions.addFieldPlaceholder) !== null && _a !== void 0 ? _a : `${translations.AddField}`;
         return (React.createElement(React.Fragment, null,
             React.createElement(Label, { label: this.props.schema.title, required: required || uiSchema["ui:required"], id: this.props.idSchema.$id, uiSchema: this.props.uiSchema }),
             childProps.map((props, idx) => React.createElement("div", { key: idx, className: "laji-form-field-template-item condensed-object-field-item" },
                 React.createElement("div", { className: "laji-form-field-template-schema" },
                     React.createElement(SchemaField, Object.assign({}, this.props, props, { key: idx, onChange: this.onFieldChange(idx) }))),
                 React.createElement("div", { className: "laji-form-field-template-buttons" },
-                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations })))),
+                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations, confirm: confirmDelete, disabled: disabled || readonly })))),
             React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext, disabled: this.props.disabled, readonly: this.props.readonly })));
     }
 }

package/lib/components/fields/EnumRangeArrayField.js

@@ -60,7 +60,7 @@ function EnumRangeArrayField(props) {
         propsOnChange(value);
     }, [propsOnChange]);
     const getEnumOptionsAsync = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
-        const enums = yield props.formContext.apiClient.fetchCached(`/metadata/ranges/${range}`);
+        const enums = yield props.formContext.apiClient.get(`/metadata/ranges/${range}`);
         return enums.map(({ value }) => ({ value, label: value }));
     }), [props.formContext.apiClient, range]);
     const { Label } = props.formContext;

package/lib/components/fields/GeocoderField.js

@@ -195,78 +195,73 @@ let GeocoderField = class GeocoderField extends React.Component {
                                 responseField: "long_name"
                             }
                         };
-                        if (response.status === "OK") {
-                            const found = {};
-                            Object.keys(parsers).forEach(field => {
-                                const parser = parsers[field];
-                                parser.type.some((type, typeIdx) => {
-                                    response.results.forEach(result => result.address_components.forEach(addressComponent => {
-                                        if (addressComponent.types.includes(type)) {
-                                            if (!found[field])
-                                                found[field] = {};
-                                            if (!found[field][typeIdx])
-                                                found[field][typeIdx] = {};
-                                            const responseField = addressComponent[parser.responseField] ? parser.responseField : "short_name";
-                                            found[field][typeIdx][addressComponent[responseField]] = true;
-                                        }
-                                    }));
-                                    return found[field] && found[field][typeIdx];
-                                });
+                        const found = {};
+                        Object.keys(parsers).forEach(field => {
+                            const parser = parsers[field];
+                            parser.type.some((type, typeIdx) => {
+                                response.results.forEach(result => result.address_components.forEach(addressComponent => {
+                                    if (addressComponent.types.includes(type)) {
+                                        if (!found[field])
+                                            found[field] = {};
+                                        if (!found[field][typeIdx])
+                                            found[field][typeIdx] = {};
+                                        const responseField = addressComponent[parser.responseField] ? parser.responseField : "short_name";
+                                        found[field][typeIdx][addressComponent[responseField]] = true;
+                                    }
+                                }));
+                                return found[field] && found[field][typeIdx];
                             });
-                            Object.keys(parsers).forEach(field => {
-                                if (!fieldByKeys[field] || !this.props.schema.properties[field]) {
-                                    return;
-                                }
-                                if (found[field]) {
-                                    const keys = Object.keys(found[field]);
-                                    const responseForField = found[field][keys[0]];
-                                    Object.keys(responseForField).forEach(value => {
-                                        // If target field is array.
-                                        if (this.props.schema.properties[field].type === "array") {
-                                            const temp = Array.from((this.props.formData || {})[field] || []);
-                                            // Find correct enum from fieldOptions.
-                                            const fieldOptions = this.props.uiSchema["ui:options"].fieldOptions;
-                                            const enumField = fieldOptions[fieldOptions.findIndex(element => {
-                                                return element.field === field;
-                                            })].enum;
-                                            // Find enum value from key (eg. municipalityName --> municipalityId).
-                                            const _enum = this.props.formContext.uiSchemaContext[enumField].oneOf;
-                                            const enumValue = _enum.find(item => item.title === value).const;
-                                            // Push enum value to changes.
-                                            if (enumValue !== undefined) {
-                                                !temp.includes(enumValue) && temp.push(enumValue);
-                                                changes[field] = temp;
-                                            }
-                                        }
-                                        else {
-                                            changes[field] = join(changes[field], value);
+                        });
+                        Object.keys(parsers).forEach(field => {
+                            if (!fieldByKeys[field] || !this.props.schema.properties[field]) {
+                                return;
+                            }
+                            if (found[field]) {
+                                const keys = Object.keys(found[field]);
+                                const responseForField = found[field][keys[0]];
+                                Object.keys(responseForField).forEach(value => {
+                                    // If target field is array.
+                                    if (this.props.schema.properties[field].type === "array") {
+                                        const temp = Array.from((this.props.formData || {})[field] || []);
+                                        // Find correct enum from fieldOptions.
+                                        const fieldOptions = this.props.uiSchema["ui:options"].fieldOptions;
+                                        const enumField = fieldOptions[fieldOptions.findIndex(element => {
+                                            return element.field === field;
+                                        })].enum;
+                                        // Find enum value from key (eg. municipalityName --> municipalityId).
+                                        const _enum = this.props.formContext.uiSchemaContext[enumField].oneOf;
+                                        const enumValue = _enum.find(item => item.title === value).const;
+                                        // Push enum value to changes.
+                                        if (enumValue !== undefined) {
+                                            !temp.includes(enumValue) && temp.push(enumValue);
+                                            changes[field] = temp;
                                         }
-                                    });
-                                }
-                                else {
-                                    changes[field] = (0, utils_1.getDefaultFormState)(this.props.schema.properties[field]);
-                                }
-                            });
-                            if (country && this.props.schema.properties.country && fieldByKeys.country)
-                                changes.country = country;
-                            success(() => {
-                                if (timestamp !== this.promiseTimestamp)
-                                    return;
-                                if (this.mounted) {
-                                    this.props.onChange(Object.assign(Object.assign({}, (this.props.formData || {})), changes));
-                                }
-                                else {
-                                    const pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, (0, utils_1.getFieldUUID)(this.props));
-                                    const newFormData = Object.assign(Object.assign({}, (0, utils_1.parseJSONPointer)(lajiFormInstance.getFormData(), pointer)), changes);
-                                    lajiFormInstance.onChange((0, utils_1.updateSafelyWithJSONPointer)(lajiFormInstance.getFormData(), newFormData, pointer));
-                                }
-                                if (callback)
-                                    callback();
-                            });
-                        }
-                        else if (country) {
-                            fetchForeign();
-                        }
+                                    }
+                                    else {
+                                        changes[field] = join(changes[field], value);
+                                    }
+                                });
+                            }
+                            else {
+                                changes[field] = (0, utils_1.getDefaultFormState)(this.props.schema.properties[field]);
+                            }
+                        });
+                        if (country && this.props.schema.properties.country && fieldByKeys.country)
+                            changes.country = country;
+                        success(() => {
+                            if (timestamp !== this.promiseTimestamp)
+                                return;
+                            if (this.mounted) {
+                                this.props.onChange(Object.assign(Object.assign({}, (this.props.formData || {})), changes));
+                            }
+                            else {
+                                const pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, (0, utils_1.getFieldUUID)(this.props));
+                                const newFormData = Object.assign(Object.assign({}, (0, utils_1.parseJSONPointer)(lajiFormInstance.getFormData(), pointer)), changes);
+                                lajiFormInstance.onChange((0, utils_1.updateSafelyWithJSONPointer)(lajiFormInstance.getFormData(), newFormData, pointer));
+                            }
+                            if (callback)
+                                callback();
+                        });
                     };
                     const fetchForeign = () => {
                         if (!props.formContext.googleApiKey)
@@ -292,15 +287,8 @@ let GeocoderField = class GeocoderField extends React.Component {
                     }, 30 * 1000);
                     !bounds.overlaps(globals_1.FINLAND_BOUNDS)
                         ? fetchForeign()
-                        : this.props.formContext.apiClient.fetchRaw("/coordinates/location", undefined, {
-                            method: "POST",
-                            headers: {
-                                "accept": "application/json",
-                                "content-type": "application/json"
-                            },
-                            body: JSON.stringify(geometry)
-                        }).then(response => response.json()).then(handleResponse(props.formContext.translations.Finland, "municipality", "biologicalProvince", "biogeographicalProvince")).catch((e) => {
-                            fail(e.message);
+                        : this.props.formContext.apiClient.post("/coordinates/location", undefined, geometry).then().then(handleResponse(props.formContext.translations.Finland, "municipality", "biologicalProvince", "biogeographicalProvince")).catch((e) => {
+                            fail(typeof e === "string" ? e : e.message);
                         });
                 }));
             };

package/lib/components/fields/ImageArrayField.d.ts

@@ -16,6 +16,10 @@ interface MediaMetadataSchema {
     intellectualOwner?: string;
     intellectualRights?: string;
 }
+interface ProcessedExifData {
+    formData?: any;
+    defaultMediaMetadata?: any;
+}
 export default class ImageArrayField extends React.Component<FieldProps<any, JSONSchemaArray<JSONSchemaObject>>, ImageArrayFieldState> {
     ALLOWED_FILE_TYPES: string[];
     ACCEPT_FILE_TYPES: string[];
@@ -89,18 +93,18 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
         onHideMediaAddModal: () => void;
         renderMediaAddModal: () => JSX.Element | null;
         onAlertOk: () => void;
-        parseExif: (files: File[]) => undefined | Promise<any>;
+        parseExif: (files: File[]) => Promise<ProcessedExifData>;
         sideEffects: (formData: any) => void;
         onFileFormChange: (files: File[]) => void;
         getContainerId: () => number | "root";
-        saveMedias(files: File[]): Promise<any[] | undefined>;
+        saveMedias(files: File[], exifDataPromise: Promise<ProcessedExifData>): Promise<any[] | undefined>;
         addNameToDataURL: (dataURL: string, name: string) => string;
         processFiles: (files: File[]) => Promise<ProcessedFile[]>;
         processFile: (file: File) => Promise<ProcessedFile>;
         onMediaMetadataUpdate: ({ formData }: {
             formData: any;
-        }) => void;
-        getMetadataPromise: () => Promise<MediaMetadataSchema>;
+        }) => Promise<void>;
+        getMetadataPromise: (exifDataPromise: Promise<ProcessedExifData>) => Promise<MediaMetadataSchema>;
         getMaxFileSizeAsString: () => string;
         getAllowedMediaFormatsTranslationKey: () => "AllowedFileFormat" | "AllowedFileFormats";
         getAllowedMediaFormatsAsString: () => string;
@@ -170,7 +174,7 @@ export declare class Thumbnail extends React.PureComponent<ThumbnailProps, Thumb
     componentDidMount(): void;
     componentWillUnmount(): void;
     UNSAFE_componentWillReceiveProps(props: ThumbnailProps): void;
-    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => void;
+    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => Promise<void>;
     render(): JSX.Element | null;
 }
 export {};

package/lib/components/fields/ImageArrayField.js

@@ -38,6 +38,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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)
@@ -162,7 +171,7 @@ function MediaArrayField(ComposedComponent) {
                 const item = this.props.formData[i];
                 this.setState({ metadataModalOpen: i });
                 this.fetching = item;
-                this.apiClient.fetch(`/${this.ENDPOINT}/${item}`).then((response) => {
+                this.apiClient.get(`/${this.ENDPOINT}/{id}`, { path: { id: item } }).then((response) => {
                     if (response.id !== this.fetching)
                         return;
                     this._context.metadatas[item] = response;
@@ -172,10 +181,11 @@ function MediaArrayField(ComposedComponent) {
             this.onMediaRmClick = (i) => () => {
                 const id = this.props.formData[i];
                 this.props.onChange((0, immutability_helper_1.default)(this.props.formData, { $splice: [[i, 1]] }));
-                this.apiClient.fetch(`/${this.ENDPOINT}/${id}`, undefined, {
-                    method: "DELETE",
-                    failSilently: true
-                });
+                try {
+                    this.apiClient.delete(`/${this.ENDPOINT}/{id}`, { path: { id } });
+                }
+                catch (e) {
+                }
             };
             this.hideMetadataModal = () => this.setState({ metadataModalOpen: false, metadataSaveSuccess: undefined });
             this.onMetadataFormChange = (formData) => this.setState({ modalMetadata: formData });
@@ -185,7 +195,7 @@ function MediaArrayField(ComposedComponent) {
                 const metadataForm = this.state.metadataForm || {};
                 if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
                     const { metadataFormId = this.METADATA_FORM_ID } = (0, utils_1.getUiOptions)(this.props.uiSchema);
-                    this.apiClient.fetchCached(`/forms/${metadataFormId}`, { lang, format: "schema" })
+                    this.apiClient.get("/forms/{id}", { path: { id: metadataFormId }, query: { lang, format: "schema" } })
                         .then(metadataForm => {
                         if (this.mounted) {
                             this.setState({ metadataForm });
@@ -250,7 +260,7 @@ function MediaArrayField(ComposedComponent) {
             this.parseExif = (files) => {
                 const { exifParsers = [] } = (0, utils_1.getUiOptions)(this.props.uiSchema);
                 if (!exifParsers)
-                    return;
+                    return Promise.resolve({});
                 const found = exifParsers.reduce((found, { parse }) => {
                     found[parse] = false;
                     return found;
@@ -316,15 +326,19 @@ function MediaArrayField(ComposedComponent) {
                     const lajiFormInstance = this.props.formContext.services.rootInstance;
                     const schema = lajiFormInstance.getSchema();
                     let formData = lajiFormInstance.getFormData();
+                    let defaultMediaMetadata = {};
                     exifParsers.filter((f) => f.type === "event" || found[f.parse]).forEach(({ field, parse, type, eventName }) => {
                         if (type === "mutate") {
                             formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, schema, registry }, found[parse], field);
                         }
+                        if (type === "mutateMetadata") {
+                            defaultMediaMetadata = (0, utils_1.updateSafelyWithJSONPointer)(defaultMediaMetadata, found[parse], field);
+                        }
                         if (type === "event") {
                             this.props.formContext.services.customEvents.send(`root_${(0, utils_1.JSONPointerToId)(field)}`, eventName, found[parse], undefined, { bubble: false });
                         }
                     });
-                    return formData;
+                    return { formData, defaultMediaMetadata };
                 });
             };
             this.sideEffects = (formData) => {
@@ -354,14 +368,18 @@ function MediaArrayField(ComposedComponent) {
                 }
             };
             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 exifDataPromise = this.parseExif(files);
+                exifDataPromise.then(data => {
+                    if (data.formData) {
+                        this.sideEffects(data.formData);
+                    }
+                });
                 const id = this.getContainerId();
                 const lajiFormInstance = this.props.formContext.services.rootInstance;
-                const saveAndOnChange = () => this.saveMedias(files).then(mediaIds => {
+                const saveAndOnChange = () => this.saveMedias(files, exifDataPromise).then(mediaIds => {
                     if (!lajiFormInstance.isMounted() || !mediaIds) {
                         return;
                     }
@@ -422,16 +440,10 @@ function MediaArrayField(ComposedComponent) {
                     reader.readAsDataURL(file);
                 });
             };
-            this.onMediaMetadataUpdate = ({ formData }) => {
+            this.onMediaMetadataUpdate = (_a) => __awaiter(this, [_a], void 0, function* ({ 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(() => {
+                try {
+                    yield this.apiClient.put(`/${this.ENDPOINT}/{id}`, { path: { id: formData.id } }, formData);
                     this.props.formContext.services.blocker.pop();
                     const notify = () => this.props.formContext.notifier.success(this.props.formContext.translations.SaveSuccess);
                     if (this.mounted) {
@@ -440,20 +452,24 @@ function MediaArrayField(ComposedComponent) {
                     else {
                         notify();
                     }
-                }).catch(() => {
+                }
+                catch (e) {
                     this.props.formContext.services.blocker.pop();
                     this.mounted && this.setState({ metadataSaveSuccess: false });
-                });
-            };
-            this.getMetadataPromise = () => {
+                }
+            });
+            this.getMetadataPromise = (exifDataPromise) => {
                 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] }))
+                const metadataPromise = ("capturerVerbatim" in mediaMetadata)
+                    ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: Array.isArray(mediaMetadata.capturerVerbatim) ? 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.apiClient.get("/person/by-id/{personId}", { path: { personId: MACode } }).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
+                        : Promise.resolve(mediaMetadata);
+                return Promise.all([exifDataPromise, metadataPromise]).then(([exifData, metadata]) => {
+                    return Object.assign(Object.assign({}, exifData.defaultMediaMetadata), metadata);
+                });
             };
             this.getMaxFileSizeAsString = () => {
                 let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
@@ -566,106 +582,68 @@ function MediaArrayField(ComposedComponent) {
                         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;
+        saveMedias(files, exifDataPromise) {
+            return __awaiter(this, void 0, void 0, function* () {
+                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}`;
+                };
+                try {
+                    const processedFiles = yield this.processFiles(files);
+                    let invalidFile = (files.length <= 0);
+                    let fileTooLarge = false;
+                    let noValidData = true;
+                    if (!this._context.tmpMedias[containerId]) {
+                        this._context.tmpMedias[containerId] = {};
                     }
-                    else if (file.size > this.MAX_FILE_SIZE) {
-                        fileTooLarge = true;
+                    tmpMedias = processedFiles.map(f => {
+                        mediaUuid++;
+                        this._context.tmpMedias[containerId][mediaUuid] = f.dataURL;
+                        return mediaUuid;
+                    });
+                    this.mounted && this.setState({ tmpMedias: [...(this.state.tmpMedias || []), ...tmpMedias] });
+                    const formData = 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(this.getAllowedMediaFormatsTranslationKey(), this.getAllowedMediaFormatsAsString() + ".");
+                        return;
                     }
-                    else {
-                        body.append("data", file);
-                        noValidData = false;
+                    else if (noValidData && fileTooLarge) {
+                        fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
+                        return;
                     }
-                    return body;
-                }, new FormData());
-                if (noValidData && invalidFile) {
-                    fail(this.getAllowedMediaFormatsTranslationKey(), this.getAllowedMediaFormatsAsString() + ".");
-                    return;
-                }
-                else if (noValidData && fileTooLarge) {
-                    fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
-                    return;
-                }
-                else {
-                    return this.apiClient.fetchRaw(`/${this.ENDPOINT}`, undefined, {
-                        method: "POST",
-                        body: formDataBody
+                    const tmpMediaEntities = yield this.apiClient.post(`/${this.ENDPOINT}`, undefined, formData);
+                    const mediaMetadata = yield this.getMetadataPromise(exifDataPromise);
+                    const mediaEntities = yield Promise.all(tmpMediaEntities.map((item) => this.apiClient.post(`/${this.ENDPOINT}/{id}`, { path: { id: item.id } }, mediaMetadata)));
+                    const ids = mediaEntities.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;
                 }
-            }).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) {
+                catch (e) {
                     tmpMedias.forEach(id => {
                         delete this._context.tmpMedias[containerId][id];
                     });
                     this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
+                    throw e;
                 }
-                throw e;
             });
         }
     };
@@ -706,15 +684,18 @@ function MediaArrayField(ComposedComponent) {
 class Thumbnail extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
+        this.updateURL = (_a) => __awaiter(this, [_a], void 0, function* ({ id, apiClient, apiEndpoint = "images" }) {
             if (!id)
                 return;
-            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
+            try {
+                const response = yield apiClient.get(`/${apiEndpoint}/{id}`, { path: { id } });
                 if (!this.mounted)
                     return;
                 this.setState({ url: response.squareThumbnailURL, linkUrl: response.originalURL });
-            });
-        };
+            }
+            catch (e) {
+            }
+        });
         this.state = {};
         this.updateURL(props);
     }

package/lib/components/fields/MapArrayField.js

@@ -38,6 +38,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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)
@@ -1053,7 +1062,7 @@ function _MapArrayField(ComposedComponent) {
         constructor(props) {
             super(props);
             this.stretchContainerRef = React.createRef();
-            this.geocode = () => {
+            this.geocode = () => __awaiter(this, void 0, void 0, function* () {
                 // Zoom map to area. Area ID is accessed from schema field defined in options.areaField
                 const item = (this.props.formData || [])[this.state.activeIdx];
                 const { areaField } = (0, utils_2.getUiOptions)(this.props.uiSchema);
@@ -1066,11 +1075,10 @@ function _MapArrayField(ComposedComponent) {
                 }
                 const geometries = this.getGeometries();
                 if (geometries.length === 0 && area && area.length > 0) {
-                    this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
-                        this.map.geocode(result.name, undefined, 8);
-                    });
+                    const { name } = yield this.props.formContext.apiClient.get(`/areas/${area}`);
+                    this.map.geocode(name, undefined, 8);
                 }
-            };
+            });
             this.computeArea = () => {
                 const { activeIdx } = this.state;
                 if (activeIdx === undefined)