@ckeditor/ckeditor5-ckbox 40.1.0 → 41.0.0

package/src/ckboxuploadadapter.js

@@ -1,16 +1,16 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/* globals AbortController, FormData, URL, XMLHttpRequest, window */
+/* globals AbortController, FormData, URL, window */
 /**
  * @module ckbox/ckboxuploadadapter
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { FileRepository } from 'ckeditor5/src/upload';
-import { logError } from 'ckeditor5/src/utils';
-import CKBoxEditing from './ckboxediting';
-import { getImageUrls, getWorkspaceId } from './utils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { FileRepository } from 'ckeditor5/src/upload.js';
+import CKBoxEditing from './ckboxediting.js';
+import { getImageUrls, sendHttpRequest } from './utils.js';
+import CKBoxUtils from './ckboxutils.js';
 /**
  * A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
  * See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
@@ -47,10 +47,8 @@ export default class CKBoxUploadAdapter extends Plugin {
             return;
         }
         const fileRepository = editor.plugins.get(FileRepository);
-        const ckboxEditing = editor.plugins.get(CKBoxEditing);
-        fileRepository.createUploadAdapter = loader => {
-            return new Adapter(loader, ckboxEditing.getToken(), editor);
-        };
+        const ckboxUtils = editor.plugins.get(CKBoxUtils);
+        fileRepository.createUploadAdapter = loader => new Adapter(loader, editor, ckboxUtils);
         const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
         const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
         // Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
@@ -70,114 +68,27 @@ class Adapter {
     /**
      * Creates a new adapter instance.
      */
-    constructor(loader, token, editor) {
+    constructor(loader, editor, ckboxUtils) {
         this.loader = loader;
-        this.token = token;
+        this.token = ckboxUtils.getToken();
+        this.ckboxUtils = ckboxUtils;
         this.editor = editor;
         this.controller = new AbortController();
         this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
     }
-    /**
-     * The ID of workspace to use.
-     */
-    getWorkspaceId() {
-        const t = this.editor.t;
-        const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
-        const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
-        const workspaceId = getWorkspaceId(this.token, defaultWorkspaceId);
-        if (workspaceId == null) {
-            /**
-             * The user is not authorized to access the workspace defined in  the`ckbox.defaultUploadWorkspaceId` configuration.
-             *
-             * @error ckbox-access-default-workspace-error
-             */
-            logError('ckbox-access-default-workspace-error');
-            throw cannotAccessDefaultWorkspaceError;
-        }
-        return workspaceId;
-    }
-    /**
-     * Resolves a promise with an array containing available categories with which the uploaded file can be associated.
-     *
-     * If the API returns limited results, the method will collect all items.
-     */
-    async getAvailableCategories(offset = 0) {
-        const ITEMS_PER_REQUEST = 50;
-        const categoryUrl = new URL('categories', this.serviceOrigin);
-        categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
-        categoryUrl.searchParams.set('offset', offset.toString());
-        categoryUrl.searchParams.set('workspaceId', this.getWorkspaceId());
-        return this._sendHttpRequest({ url: categoryUrl })
-            .then(async (data) => {
-            const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
-            if (remainingItems > 0) {
-                const offsetItems = await this.getAvailableCategories(offset + ITEMS_PER_REQUEST);
-                return [
-                    ...data.items,
-                    ...offsetItems
-                ];
-            }
-            return data.items;
-        })
-            .catch(() => {
-            this.controller.signal.throwIfAborted();
-            /**
-             * Fetching a list of available categories with which an uploaded file can be associated failed.
-             *
-             * @error ckbox-fetch-category-http-error
-             */
-            logError('ckbox-fetch-category-http-error');
-        });
-    }
-    /**
-     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
-     */
-    async getCategoryIdForFile(file) {
-        const extension = getFileExtension(file.name);
-        const allCategories = await this.getAvailableCategories();
-        // Couldn't fetch all categories. Perhaps the authorization token is invalid.
-        if (!allCategories) {
-            return null;
-        }
-        // The plugin allows defining to which category the uploaded file should be assigned.
-        const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
-        // If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
-        if (defaultCategories) {
-            const userCategory = Object.keys(defaultCategories).find(category => {
-                return defaultCategories[category].find(e => e.toLowerCase() == extension);
-            });
-            // If found, return its ID if the category exists on the server side.
-            if (userCategory) {
-                const serverCategory = allCategories.find(category => category.id === userCategory || category.name === userCategory);
-                if (!serverCategory) {
-                    return null;
-                }
-                return serverCategory.id;
-            }
-        }
-        // Otherwise, find the first category that accepts the uploaded file and returns its ID.
-        const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
-        if (!category) {
-            return null;
-        }
-        return category.id;
-    }
     /**
      * Starts the upload process.
      *
      * @see module:upload/filerepository~UploadAdapter#upload
      */
     async upload() {
+        const ckboxUtils = this.ckboxUtils;
         const t = this.editor.t;
-        const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
         const file = (await this.loader.file);
-        const category = await this.getCategoryIdForFile(file);
-        if (!category) {
-            return Promise.reject(cannotFindCategoryError);
-        }
+        const category = await ckboxUtils.getCategoryIdForFile(file, { signal: this.controller.signal });
         const uploadUrl = new URL('assets', this.serviceOrigin);
         const formData = new FormData();
-        uploadUrl.searchParams.set('workspaceId', this.getWorkspaceId());
+        uploadUrl.searchParams.set('workspaceId', ckboxUtils.getWorkspaceId());
         formData.append('categoryId', category);
         formData.append('file', file);
         const requestConfig = {
@@ -190,9 +101,11 @@ class Adapter {
                     this.loader.uploadTotal = evt.total;
                     this.loader.uploaded = evt.loaded;
                 }
-            }
+            },
+            signal: this.controller.signal,
+            authorization: this.token.value
         };
-        return this._sendHttpRequest(requestConfig)
+        return sendHttpRequest(requestConfig)
             .then(async (data) => {
             const imageUrls = getImageUrls(data.imageUrls);
             return {
@@ -214,62 +127,4 @@ class Adapter {
     abort() {
         this.controller.abort();
     }
-    /**
-     * Sends the HTTP request.
-     *
-     * @param config.url the URL where the request will be sent.
-     * @param config.method The HTTP method.
-     * @param config.data Additional data to send.
-     * @param config.onUploadProgress A callback informing about the upload progress.
-     */
-    _sendHttpRequest({ url, method = 'GET', data, onUploadProgress }) {
-        const signal = this.controller.signal;
-        const xhr = new XMLHttpRequest();
-        xhr.open(method, url.toString(), true);
-        xhr.setRequestHeader('Authorization', this.token.value);
-        xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
-        xhr.responseType = 'json';
-        // The callback is attached to the `signal#abort` event.
-        const abortCallback = () => {
-            xhr.abort();
-        };
-        return new Promise((resolve, reject) => {
-            signal.addEventListener('abort', abortCallback);
-            xhr.addEventListener('loadstart', () => {
-                signal.addEventListener('abort', abortCallback);
-            });
-            xhr.addEventListener('loadend', () => {
-                signal.removeEventListener('abort', abortCallback);
-            });
-            xhr.addEventListener('error', () => {
-                reject();
-            });
-            xhr.addEventListener('abort', () => {
-                reject();
-            });
-            xhr.addEventListener('load', async () => {
-                const response = xhr.response;
-                if (!response || response.statusCode >= 400) {
-                    return reject(response && response.message);
-                }
-                return resolve(response);
-            });
-            /* istanbul ignore else -- @preserve */
-            if (onUploadProgress) {
-                xhr.upload.addEventListener('progress', evt => {
-                    onUploadProgress(evt);
-                });
-            }
-            // Send the request.
-            xhr.send(data);
-        });
-    }
-}
-/**
- * Returns an extension from the given value.
- */
-function getFileExtension(value) {
-    const extensionRegExp = /\.(?<ext>[^.]+)$/;
-    const match = value.match(extensionRegExp);
-    return match.groups.ext.toLowerCase();
 }

package/src/ckboxutils.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ckbox/ckboxutils
+ */
+import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * The CKBox utilities plugin.
+ */
+export default class CKBoxUtils extends Plugin {
+    /**
+     * CKEditor Cloud Services access token.
+     */
+    private _token;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "CKBoxUtils";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly ["CloudServices"];
+    /**
+     * @inheritDoc
+     */
+    init(): Promise<void>;
+    /**
+     * Returns a token used by the CKBox plugin for communication with the CKBox service.
+     */
+    getToken(): InitializedToken;
+    /**
+     * The ID of workspace to use when uploading an image.
+     */
+    getWorkspaceId(): string;
+    /**
+     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
+     */
+    getCategoryIdForFile(fileOrUrl: File | string, options: {
+        signal: AbortSignal;
+    }): Promise<string>;
+    /**
+     * Resolves a promise with an array containing available categories with which the uploaded file can be associated.
+     *
+     * If the API returns limited results, the method will collect all items.
+     */
+    private _getAvailableCategories;
+}

package/src/ckboxutils.js

@@ -0,0 +1,183 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { CKEditorError, logError } from 'ckeditor5/src/utils.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { convertMimeTypeToExtension, getContentTypeOfUrl, getFileExtension, getWorkspaceId, sendHttpRequest } from './utils.js';
+const DEFAULT_CKBOX_THEME_NAME = 'lark';
+/**
+ * The CKBox utilities plugin.
+ */
+export default class CKBoxUtils extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'CKBoxUtils';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return ['CloudServices'];
+    }
+    /**
+     * @inheritDoc
+     */
+    async init() {
+        const editor = this.editor;
+        const hasConfiguration = !!editor.config.get('ckbox');
+        const isLibraryLoaded = !!window.CKBox;
+        // Proceed with plugin initialization only when the integrator intentionally wants to use it, i.e. when the `config.ckbox` exists or
+        // the CKBox JavaScript library is loaded.
+        if (!hasConfiguration && !isLibraryLoaded) {
+            return;
+        }
+        editor.config.define('ckbox', {
+            serviceOrigin: 'https://api.ckbox.io',
+            defaultUploadCategories: null,
+            ignoreDataId: false,
+            language: editor.locale.uiLanguage,
+            theme: DEFAULT_CKBOX_THEME_NAME,
+            tokenUrl: editor.config.get('cloudServices.tokenUrl')
+        });
+        const cloudServices = editor.plugins.get('CloudServices');
+        const cloudServicesTokenUrl = editor.config.get('cloudServices.tokenUrl');
+        const ckboxTokenUrl = editor.config.get('ckbox.tokenUrl');
+        if (!ckboxTokenUrl) {
+            /**
+             * The {@link module:ckbox/ckboxconfig~CKBoxConfig#tokenUrl `config.ckbox.tokenUrl`} or the
+             * {@link module:cloud-services/cloudservicesconfig~CloudServicesConfig#tokenUrl `config.cloudServices.tokenUrl`}
+             * configuration is required for the CKBox plugin.
+             *
+             * ```ts
+             * ClassicEditor.create( document.createElement( 'div' ), {
+             * 	ckbox: {
+             * 		tokenUrl: "YOUR_TOKEN_URL"
+             * 		// ...
+             * 	}
+             * 	// ...
+             * } );
+             * ```
+             *
+             * @error ckbox-plugin-missing-token-url
+             */
+            throw new CKEditorError('ckbox-plugin-missing-token-url', this);
+        }
+        if (ckboxTokenUrl == cloudServicesTokenUrl) {
+            this._token = cloudServices.token;
+        }
+        else {
+            this._token = await cloudServices.registerTokenUrl(ckboxTokenUrl);
+        }
+    }
+    /**
+     * Returns a token used by the CKBox plugin for communication with the CKBox service.
+     */
+    getToken() {
+        return this._token;
+    }
+    /**
+     * The ID of workspace to use when uploading an image.
+     */
+    getWorkspaceId() {
+        const t = this.editor.t;
+        const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
+        const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
+        const workspaceId = getWorkspaceId(this._token, defaultWorkspaceId);
+        if (workspaceId == null) {
+            /**
+             * The user is not authorized to access the workspace defined in  the`ckbox.defaultUploadWorkspaceId` configuration.
+             *
+             * @error ckbox-access-default-workspace-error
+             */
+            logError('ckbox-access-default-workspace-error');
+            throw cannotAccessDefaultWorkspaceError;
+        }
+        return workspaceId;
+    }
+    /**
+     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
+     */
+    async getCategoryIdForFile(fileOrUrl, options) {
+        const t = this.editor.t;
+        const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
+        const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
+        const allCategoriesPromise = this._getAvailableCategories(options);
+        const extension = typeof fileOrUrl == 'string' ?
+            convertMimeTypeToExtension(await getContentTypeOfUrl(fileOrUrl, options)) :
+            getFileExtension(fileOrUrl);
+        const allCategories = await allCategoriesPromise;
+        // Couldn't fetch all categories. Perhaps the authorization token is invalid.
+        if (!allCategories) {
+            throw cannotFindCategoryError;
+        }
+        // If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
+        if (defaultCategories) {
+            const userCategory = Object.keys(defaultCategories).find(category => {
+                return defaultCategories[category].find(e => e.toLowerCase() == extension);
+            });
+            // If found, return its ID if the category exists on the server side.
+            if (userCategory) {
+                const serverCategory = allCategories.find(category => category.id === userCategory || category.name === userCategory);
+                if (!serverCategory) {
+                    throw cannotFindCategoryError;
+                }
+                return serverCategory.id;
+            }
+        }
+        // Otherwise, find the first category that accepts the uploaded file and returns its ID.
+        const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
+        if (!category) {
+            throw cannotFindCategoryError;
+        }
+        return category.id;
+    }
+    /**
+     * Resolves a promise with an array containing available categories with which the uploaded file can be associated.
+     *
+     * If the API returns limited results, the method will collect all items.
+     */
+    async _getAvailableCategories(options) {
+        const ITEMS_PER_REQUEST = 50;
+        const editor = this.editor;
+        const token = this._token;
+        const { signal } = options;
+        const serviceOrigin = editor.config.get('ckbox.serviceOrigin');
+        const workspaceId = this.getWorkspaceId();
+        try {
+            const result = [];
+            let offset = 0;
+            let remainingItems;
+            do {
+                const data = await fetchCategories(offset);
+                result.push(...data.items);
+                remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
+                offset += ITEMS_PER_REQUEST;
+            } while (remainingItems > 0);
+            return result;
+        }
+        catch {
+            signal.throwIfAborted();
+            /**
+             * Fetching a list of available categories with which an uploaded file can be associated failed.
+             *
+             * @error ckbox-fetch-category-http-error
+             */
+            logError('ckbox-fetch-category-http-error');
+            return undefined;
+        }
+        function fetchCategories(offset) {
+            const categoryUrl = new URL('categories', serviceOrigin);
+            categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
+            categoryUrl.searchParams.set('offset', offset.toString());
+            categoryUrl.searchParams.set('workspaceId', workspaceId);
+            return sendHttpRequest({
+                url: categoryUrl,
+                signal,
+                authorization: token.value
+            });
+        }
+    }
+}

package/src/index.d.ts

@@ -1,13 +1,17 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ckbox
  */
-export { default as CKBox } from './ckbox';
-export { default as CKBoxEditing } from './ckboxediting';
-export { default as CKBoxUI } from './ckboxui';
-export type { default as CKBoxCommand } from './ckboxcommand';
-export type { CKBoxConfig } from './ckboxconfig';
-import './augmentation';
+export { default as CKBox } from './ckbox.js';
+export { default as CKBoxEditing } from './ckboxediting.js';
+export { default as CKBoxUI } from './ckboxui.js';
+export { default as CKBoxImageEditEditing } from './ckboximageedit/ckboximageeditediting.js';
+export { default as CKBoxImageEditUI } from './ckboximageedit/ckboximageeditui.js';
+export { default as CKBoxImageEdit } from './ckboximageedit.js';
+export type { default as CKBoxCommand } from './ckboxcommand.js';
+export type { default as CKBoxImageEditCommand } from './ckboximageedit/ckboximageeditcommand.js';
+export type { CKBoxConfig } from './ckboxconfig.js';
+import './augmentation.js';

package/src/index.js

@@ -1,11 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ckbox
  */
-export { default as CKBox } from './ckbox';
-export { default as CKBoxEditing } from './ckboxediting';
-export { default as CKBoxUI } from './ckboxui';
-import './augmentation';
+export { default as CKBox } from './ckbox.js';
+export { default as CKBoxEditing } from './ckboxediting.js';
+export { default as CKBoxUI } from './ckboxui.js';
+export { default as CKBoxImageEditEditing } from './ckboximageedit/ckboximageeditediting.js';
+export { default as CKBoxImageEditUI } from './ckboximageedit/ckboximageeditui.js';
+export { default as CKBoxImageEdit } from './ckboximageedit.js';
+import './augmentation.js';

package/src/utils.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ckbox/utils
  */
 import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
-import type { CKBoxImageUrls } from './ckboxconfig';
+import type { CKBoxImageUrls } from './ckboxconfig.js';
 /**
  * Converts image source set provided by the CKBox into an object containing:
  * - responsive URLs for the "webp" image format,
@@ -30,3 +30,34 @@ export declare function getWorkspaceId(token: InitializedToken, defaultWorkspace
  * Generates an image data URL from its `blurhash` representation.
  */
 export declare function blurHashToDataUrl(hash?: string): string | undefined;
+/**
+ * Sends the HTTP request.
+ *
+ * @internal
+ * @param config.url the URL where the request will be sent.
+ * @param config.method The HTTP method.
+ * @param config.data Additional data to send.
+ * @param config.onUploadProgress A callback informing about the upload progress.
+ */
+export declare function sendHttpRequest({ url, method, data, onUploadProgress, signal, authorization }: {
+    url: URL;
+    signal: AbortSignal;
+    authorization: string;
+    method?: 'GET' | 'POST';
+    data?: FormData | null;
+    onUploadProgress?: (evt: ProgressEvent) => void;
+}): Promise<any>;
+/**
+ * Returns an extension a typical file in the specified `mimeType` format would have.
+ */
+export declare function convertMimeTypeToExtension(mimeType: string): string;
+/**
+ * Tries to fetch the given `url` and returns 'content-type' of the response.
+ */
+export declare function getContentTypeOfUrl(url: string, options: {
+    signal: AbortSignal;
+}): Promise<string>;
+/**
+ * Returns an extension from the given value.
+ */
+export declare function getFileExtension(file: File): string;

package/src/utils.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { decode } from 'blurhash';
@@ -80,3 +80,96 @@ export function blurHashToDataUrl(hash) {
         return undefined;
     }
 }
+/**
+ * Sends the HTTP request.
+ *
+ * @internal
+ * @param config.url the URL where the request will be sent.
+ * @param config.method The HTTP method.
+ * @param config.data Additional data to send.
+ * @param config.onUploadProgress A callback informing about the upload progress.
+ */
+export function sendHttpRequest({ url, method = 'GET', data, onUploadProgress, signal, authorization }) {
+    const xhr = new XMLHttpRequest();
+    xhr.open(method, url.toString());
+    xhr.setRequestHeader('Authorization', authorization);
+    xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
+    xhr.responseType = 'json';
+    // The callback is attached to the `signal#abort` event.
+    const abortCallback = () => {
+        xhr.abort();
+    };
+    return new Promise((resolve, reject) => {
+        signal.throwIfAborted();
+        signal.addEventListener('abort', abortCallback);
+        xhr.addEventListener('loadstart', () => {
+            signal.addEventListener('abort', abortCallback);
+        });
+        xhr.addEventListener('loadend', () => {
+            signal.removeEventListener('abort', abortCallback);
+        });
+        xhr.addEventListener('error', () => {
+            reject();
+        });
+        xhr.addEventListener('abort', () => {
+            reject();
+        });
+        xhr.addEventListener('load', () => {
+            const response = xhr.response;
+            if (!response || response.statusCode >= 400) {
+                return reject(response && response.message);
+            }
+            resolve(response);
+        });
+        /* istanbul ignore else -- @preserve */
+        if (onUploadProgress) {
+            xhr.upload.addEventListener('progress', evt => {
+                onUploadProgress(evt);
+            });
+        }
+        // Send the request.
+        xhr.send(data);
+    });
+}
+const MIME_TO_EXTENSION = {
+    'image/gif': 'gif',
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+    'image/webp': 'webp',
+    'image/bmp': 'bmp',
+    'image/tiff': 'tiff'
+};
+/**
+ * Returns an extension a typical file in the specified `mimeType` format would have.
+ */
+export function convertMimeTypeToExtension(mimeType) {
+    return MIME_TO_EXTENSION[mimeType];
+}
+/**
+ * Tries to fetch the given `url` and returns 'content-type' of the response.
+ */
+export async function getContentTypeOfUrl(url, options) {
+    try {
+        const response = await fetch(url, {
+            method: 'HEAD',
+            cache: 'force-cache',
+            ...options
+        });
+        if (!response.ok) {
+            return '';
+        }
+        return response.headers.get('content-type') || '';
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Returns an extension from the given value.
+ */
+export function getFileExtension(file) {
+    const fileName = file.name;
+    const extensionRegExp = /\.(?<ext>[^.]+)$/;
+    const match = fileName.match(extensionRegExp);
+    return match.groups.ext.toLowerCase();
+}