@formio/js 5.0.0-rc.29 → 5.0.0-rc.31

package/lib/mjs/providers/storage/s3.js

@@ -1,24 +1,53 @@
 import XHR from './xhr';
-const s3 = (formio) => ({
-    uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {
-        return XHR.upload(formio, 's3', (xhr, response) => {
-            response.data.fileName = fileName;
-            response.data.key = XHR.path([response.data.key, dir, fileName]);
-            if (response.signed) {
-                xhr.openAndSetHeaders('PUT', response.signed);
-                xhr.setRequestHeader('Content-Type', file.type);
-                return file;
-            }
-            else {
-                const fd = new FormData();
-                for (const key in response.data) {
-                    fd.append(key, response.data[key]);
+import { withRetries } from './util';
+const AbortController = window.AbortController || require('abortcontroller-polyfill/dist/cjs-ponyfill');
+function s3(formio) {
+    return {
+        async uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {
+            const xhrCallback = async (xhr, response, abortCallback) => {
+                response.data.fileName = fileName;
+                response.data.key = XHR.path([response.data.key, dir, fileName]);
+                if (response.signed) {
+                    if (multipartOptions && Array.isArray(response.signed)) {
+                        // patch abort callback
+                        const abortController = new AbortController();
+                        const abortSignal = abortController.signal;
+                        if (typeof abortCallback === 'function') {
+                            abortCallback(() => abortController.abort());
+                        }
+                        try {
+                            const parts = await this.uploadParts(file, response.signed, response.data.headers, response.partSizeActual, multipartOptions, abortSignal);
+                            await withRetries(this.completeMultipartUpload, [response, parts, multipartOptions], 3);
+                            return;
+                        }
+                        catch (err) {
+                            // abort in-progress fetch requests
+                            abortController.abort();
+                            // attempt to cancel the multipart upload
+                            this.abortMultipartUpload(response);
+                            throw err;
+                        }
+                    }
+                    else {
+                        xhr.openAndSetHeaders('PUT', response.signed);
+                        xhr.setRequestHeader('Content-Type', file.type);
+                        Object.keys(response.data.headers).forEach((key) => {
+                            xhr.setRequestHeader(key, response.data.headers[key]);
+                        });
+                        return file;
+                    }
                 }
-                fd.append('file', file);
-                xhr.openAndSetHeaders('POST', response.url);
-                return fd;
-            }
-        }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then((response) => {
+                else {
+                    const fd = new FormData();
+                    for (const key in response.data) {
+                        fd.append(key, response.data[key]);
+                    }
+                    fd.append('file', file);
+                    xhr.openAndSetHeaders('POST', response.url);
+                    return fd;
+                }
+            };
+            const response = await XHR.upload(formio, 's3', xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions);
             return {
                 storage: 's3',
                 name: fileName,
@@ -29,16 +58,80 @@ const s3 = (formio) => ({
                 size: file.size,
                 type: file.type
             };
-        });
-    },
-    downloadFile(file) {
-        if (file.acl !== 'public-read') {
-            return formio.makeRequest('file', `${formio.formUrl}/storage/s3?bucket=${XHR.trim(file.bucket)}&key=${XHR.trim(file.key)}`, 'GET');
-        }
-        else {
-            return Promise.resolve(file);
+        },
+        async completeMultipartUpload(serverResponse, parts, multipart) {
+            const { changeMessage } = multipart;
+            changeMessage('Completing AWS S3 multipart upload...');
+            const token = formio.getToken();
+            const response = await fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...(token ? { 'x-jwt-token': token } : {})
+                },
+                body: JSON.stringify({ parts, uploadId: serverResponse.uploadId, key: serverResponse.key })
+            });
+            const message = await response.text();
+            if (!response.ok) {
+                throw new Error(message);
+            }
+            // the AWS S3 SDK CompleteMultipartUpload command can return a HTTP 200 status header but still error;
+            // we need to parse, and according to AWS, to retry
+            if (message.match(/Error/)) {
+                throw new Error(message);
+            }
+        },
+        abortMultipartUpload(serverResponse) {
+            const { uploadId, key } = serverResponse;
+            const token = formio.getToken();
+            fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...(token ? { 'x-jwt-token': token } : {})
+                },
+                body: JSON.stringify({ uploadId, key })
+            }).catch((err) => console.error('Error while aborting multipart upload:', err));
+        },
+        uploadParts(file, urls, headers, partSize, multipart, abortSignal) {
+            const { changeMessage, progressCallback } = multipart;
+            changeMessage('Chunking and uploading parts to AWS S3...');
+            const promises = [];
+            for (let i = 0; i < urls.length; i++) {
+                const start = i * partSize;
+                const end = (i + 1) * partSize;
+                const blob = i < urls.length ? file.slice(start, end) : file.slice(start);
+                const promise = fetch(urls[i], {
+                    method: 'PUT',
+                    headers,
+                    body: blob,
+                    signal: abortSignal,
+                }).then((res) => {
+                    if (res.ok) {
+                        progressCallback(urls.length);
+                        const eTag = res.headers.get('etag');
+                        if (!eTag) {
+                            throw new Error('ETag header not found; it must be exposed in S3 bucket CORS settings');
+                        }
+                        return { ETag: eTag, PartNumber: i + 1 };
+                    }
+                    else {
+                        throw new Error(`Part no ${i} failed with status ${res.status}`);
+                    }
+                });
+                promises.push(promise);
+            }
+            return Promise.all(promises);
+        },
+        downloadFile(file) {
+            if (file.acl !== 'public-read') {
+                return formio.makeRequest('file', `${formio.formUrl}/storage/s3?bucket=${XHR.trim(file.bucket)}&key=${XHR.trim(file.key)}`, 'GET');
+            }
+            else {
+                return Promise.resolve(file);
+            }
         }
-    }
-});
+    };
+}
 s3.title = 'S3';
 export default s3;

package/lib/mjs/providers/storage/url.js

@@ -1,4 +1,4 @@
-const url = (formio) => {
+function url(formio) {
     const xhrRequest = (url, name, query, data, options, progressCallback, abortCallback) => {
         return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
@@ -135,6 +135,6 @@ const url = (formio) => {
             return Promise.resolve(file);
         }
     };
-};
+}
 url.title = 'Url';
 export default url;

package/lib/mjs/providers/storage/util.js

@@ -0,0 +1,6 @@
+export async function withRetries(fn, args, retries = 3, err = null) {
+    if (!retries) {
+        throw new Error(err);
+    }
+    return fn(...args).catch(() => withRetries(fn, args, retries - 1, err));
+}

package/lib/mjs/providers/storage/xhr.js

@@ -20,74 +20,84 @@ const XHR = {
     path(items) {
         return items.filter(item => !!item).map(XHR.trim).join('/');
     },
-    upload(formio, type, xhrCb, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback) {
-        return new Promise(((resolve, reject) => {
-            // Send the pre response to sign the upload.
-            const pre = new XMLHttpRequest();
-            // This only fires on a network error.
-            pre.onerror = (err) => {
-                err.networkError = true;
-                reject(err);
+    async upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {
+        // make request to Form.io server
+        const token = formio.getToken();
+        let response;
+        try {
+            response = await fetch(`${formio.formUrl}/storage/${type}`, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json; charset=UTF-8',
+                    ...(token ? { 'x-jwt-token': token } : {}),
+                },
+                body: JSON.stringify({
+                    name: XHR.path([dir, fileName]),
+                    size: file.size,
+                    type: file.type,
+                    groupPermissions,
+                    groupId,
+                    multipart: multipartOptions
+                })
+            });
+        }
+        catch (err) {
+            // only throws on network errors
+            err.networkError = true;
+            throw err;
+        }
+        if (!response.ok) {
+            const message = await response.text();
+            throw new Error(message || 'Unable to sign file.');
+        }
+        const serverResponse = await response.json();
+        return await XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);
+    },
+    makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {
+        return new Promise((resolve, reject) => {
+            // Send the file with data.
+            const xhr = new XMLHttpRequest();
+            xhr.openAndSetHeaders = (...params) => {
+                xhr.open(...params);
+                setXhrHeaders(formio, xhr);
             };
-            pre.onabort = reject;
-            pre.onload = () => {
-                if (pre.status >= 200 && pre.status < 300) {
-                    const response = JSON.parse(pre.response);
-                    // Send the file with data.
-                    const xhr = new XMLHttpRequest();
-                    if (typeof progressCallback === 'function') {
-                        xhr.upload.onprogress = progressCallback;
-                    }
-                    if (typeof abortCallback === 'function') {
-                        abortCallback(() => xhr.abort());
-                    }
-                    xhr.openAndSetHeaders = (...params) => {
-                        xhr.open(...params);
-                        setXhrHeaders(formio, xhr);
-                    };
-                    // Fire on network error.
-                    xhr.onerror = (err) => {
-                        err.networkError = true;
-                        reject(err);
-                    };
-                    // Fire on network abort.
-                    xhr.onabort = (err) => {
-                        err.networkError = true;
-                        reject(err);
-                    };
-                    // Fired when the response has made it back from the server.
-                    xhr.onload = () => {
-                        if (xhr.status >= 200 && xhr.status < 300) {
-                            resolve(response);
-                        }
-                        else {
-                            reject(xhr.response || 'Unable to upload file');
-                        }
-                    };
-                    // Set the onabort error callback.
-                    xhr.onabort = reject;
-                    // Get the request and send it to the server.
-                    xhr.send(xhrCb(xhr, response));
+            Promise.resolve(xhrCallback(xhr, serverResponse, abortCallback)).then((payload) => {
+                // if payload is nullish we can assume the provider took care of the entire upload process
+                if (!payload) {
+                    return resolve(serverResponse);
                 }
-                else {
-                    reject(pre.response || 'Unable to sign file');
+                // Fire on network error.
+                xhr.onerror = (err) => {
+                    err.networkError = true;
+                    reject(err);
+                };
+                // Fire on network abort.
+                xhr.onabort = (err) => {
+                    err.networkError = true;
+                    reject(err);
+                };
+                // Set the onabort error callback.
+                xhr.onabort = reject;
+                if (typeof progressCallback === 'function') {
+                    xhr.upload.onprogress = progressCallback;
                 }
-            };
-            pre.open('POST', `${formio.formUrl}/storage/${type}`);
-            pre.setRequestHeader('Accept', 'application/json');
-            pre.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-            const token = formio.getToken();
-            if (token) {
-                pre.setRequestHeader('x-jwt-token', token);
-            }
-            pre.send(JSON.stringify({
-                name: XHR.path([dir, fileName]),
-                size: file.size,
-                type: file.type,
-                groupPermissions,
-                groupId,
-            }));
-        }));
+                if (typeof abortCallback === 'function') {
+                    abortCallback(() => xhr.abort());
+                }
+                // Fired when the response has made it back from the server.
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(serverResponse);
+                    }
+                    else {
+                        reject(xhr.response || 'Unable to upload file');
+                    }
+                };
+                // Get the request and send it to the server.
+                xhr.send(payload);
+            }).catch(reject);
+        });
     }
 };
 export default XHR;

package/lib/mjs/utils/formUtils.js

@@ -355,7 +355,7 @@ export function applyFormChanges(form, changes) {
  * @returns {Object}
  *   The flattened components map.
  */
-export function flattenComponents(components, includeAll) {
+export function flattenComponents(components, includeAll = false) {
     const flattened = {};
     eachComponent(components, (component, path) => {
         flattened[path] = component;

package/lib/mjs/utils/utils.js

@@ -1142,6 +1142,12 @@ export function sanitize(string, options) {
         ADD_ATTR: ['ref', 'target'],
         USE_PROFILES: { html: true }
     };
+    // Use profiles
+    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {
+        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {
+            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];
+        });
+    }
     // Add attrs
     if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {
         options.sanitizeConfig.addAttr.forEach((attr) => {

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.29",
+  "version": "5.0.0-rc.31",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
     ".": {
+      "types": "index.d.ts",
       "import": "./lib/cjs/index.js",
       "require": "./lib/cjs/index.js"
     },
     "./sdk": {
+      "types": "./types/Formio.d.ts",
       "import": "./lib/cjs/Formio.js",
       "require": "./lib/cjs/Formio.js"
     },
@@ -21,6 +23,7 @@
       "require": "./lib/cjs/formio.form.js"
     },
     "./embed": {
+      "types": "./types/Embed.d.ts",
       "import": "./lib/cjs/Embed.js",
       "require": "./lib/cjs/Embed.js"
     },
@@ -78,11 +81,12 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.13",
+    "@formio/bootstrap": "^3.0.0-rc.17",
     "@formio/choices.js": "^10.2.0",
-    "@formio/core": "^1.3.0-rc.21",
+    "@formio/core": "^2.0.0-rc.1",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
+    "abortcontroller-polyfill": "^1.7.5",
     "autocompleter": "^8.0.4",
     "bootstrap": "^5.3.0",
     "browser-cookies": "^1.2.0",
@@ -146,7 +150,6 @@
     "gulp-sync": "^0.1.4",
     "gulp-watch": "^5.0.1",
     "hoek": "^6.1.3",
-    "jquery": "^3.7.0",
     "jsdom": "^22.1.0",
     "jsdom-global": "^3.0.2",
     "karma": "^6.4.2",

package/types/Embed.d.ts

@@ -0,0 +1,13 @@
+export declare class Formio {
+    static config: any;
+    static icons: string;
+    static setBaseUrl(url: string): void;
+    static setApiUrl(url: string): void;
+    static setAppUrl(url: string): void;
+    static setProjectUrl(url: string): void;
+    static clearCache(): void;
+    static setPathType(type: string): void;
+    static createForm(element: HTMLElement, form: any, options: any): any;
+    static builder(element: HTMLElement, form: any, options: any): any;
+    static use(module: any): void;
+}

package/types/Plugins.d.ts

@@ -0,0 +1,95 @@
+/**
+ * The plugin initialization function, which will receive the Formio interface as its first argument.
+ */
+export interface PluginInitFunction {
+    /**
+     * @param Formio - The Formio interface class.
+     */
+    (Formio: any): void;
+}
+/**
+ * Function that is called when the plugin is deregistered.
+ */
+export interface PluginDeregisterFunction {
+    /**
+     * @param Formio The Formio interface class.
+     */
+    (Formio: any): void;
+}
+/**
+ * A Formio Plugin interface.
+ */
+export interface Plugin {
+    /**
+     * The name of the plugin.
+     */
+    __name: string;
+    /**
+     * The priority of this plugin.
+     */
+    priority: number;
+    /**
+     * An initialization function called when registered with Formio.
+     */
+    init: PluginInitFunction;
+    /**
+     * Called when the plugin is deregistered.
+     */
+    deregister: PluginDeregisterFunction;
+}
+/**
+ * The Form.io Plugins allow external systems to "hook" into the default behaviors of the JavaScript SDK.
+ */
+export default class Plugins {
+    /**
+     * An array of Form.io Plugins.
+     */
+    static plugins: Array<Plugin>;
+    /**
+     * The Formio class.
+     */
+    static Formio: any;
+    /**
+     * Returns the plugin identity.
+     *
+     * @param value
+     */
+    static identity(value: string): string;
+    /**
+     * De-registers a plugin.
+     * @param plugin The plugin you wish to deregister.
+     */
+    static deregisterPlugin(plugin: (Plugin | string)): boolean;
+    /**
+     * Registers a new plugin.
+     *
+     * @param plugin The Plugin object.
+     * @param name The name of the plugin you wish to register.
+     */
+    static registerPlugin(plugin: Plugin, name: string): void;
+    /**
+     * Returns a plugin provided the name of the plugin.
+     * @param name The name of the plugin you would like to get.
+     */
+    static getPlugin(name: string): Plugin | null;
+    /**
+     * Wait for a plugin function to complete.
+     * @param pluginFn - A function within the plugin.
+     * @param args
+     */
+    static pluginWait(pluginFn: any, ...args: any[]): Promise<any[]>;
+    /**
+     * Gets a value from a Plugin
+     * @param pluginFn
+     * @param args
+     */
+    static pluginGet(pluginFn: any, ...args: any[]): any;
+    /**
+     * Allows a Plugin to alter the behavior of the JavaScript library.
+     *
+     * @param pluginFn
+     * @param value
+     * @param args
+     */
+    static pluginAlter(pluginFn: any, value: any, ...args: any[]): any;
+}

package/types/components/_classes/component/component.d.ts

@@ -1,5 +1,6 @@
 import { Element } from '../../../element';
-import { ComponentSchema, ElementInfo, ExtendedComponentSchema, ValidateOptions } from './../../schema.d';
+import { ValidateOptions } from '../../../Formio';
+import { ComponentSchema, ElementInfo, ExtendedComponentSchema } from './../../schema.d';
 
 export class Component extends Element {
   static schema(sources: ExtendedComponentSchema): ExtendedComponentSchema;

package/types/components/schema.d.ts

@@ -1,3 +1,5 @@
+import { ConditionalOptions, ValidateOptions } from '../Formio';
+
 export interface ComponentSchema<T = any> {
   /**
    * The type of component
@@ -154,74 +156,6 @@ export interface ComponentSchema<T = any> {
 
 export type ExtendedComponentSchema<T = any> = ComponentSchema<T> & { [key: string]: any };
 
-export interface ConditionalOptions {
-  /** If the field should show if the condition is true */
-  show?: boolean;
-  /** The field API key that it should compare its value against to determine if the condition is triggered. */
-  when?: string;
-  /** The value that should be checked against the comparison component */
-  eq?: string;
-  /** The JSON Logic to determine if this component is conditionally available.
-   * Fyi: http://jsonlogic.com/
-   */
-  json?: Object;
-}
-
-export interface ValidateOptions {
-  /**
-   * If this component is required.
-   */
-  required?: boolean;
-
-  /**
-   * For text input, this checks the minimum length of text for valid input
-   */
-  minLength?: number;
-
-  /**
-   * For text input, this checks the maximum length of text for valid input
-   */
-  maxLength?: number;
-
-  /**
-   * For text input, this checks the text agains a Regular expression pattern.
-   */
-  pattern?: string;
-
-  /**
-   * A custom javascript based validation or a JSON object for using JSON Logic
-   */
-  custom?: any;
-
-  /**
-   * If the custom validation should remain private (only the backend will see it and execute it).
-   */
-  customPrivate?: boolean;
-
-  /**
-   * Minimum value for numbers
-   */
-  min?: number;
-
-  /**
-   * Maximum value for numbers
-   */
-  max?: number;
-
-  minSelectedCount?: number;
-  maxSelectedCount?: number;
-  minWords?: number;
-  maxWords?: number;
-  email?: boolean;
-  url?: boolean;
-  date?: boolean;
-  day?: boolean;
-  json?: string;
-  mask?: boolean;
-  minDate?: any;
-  maxDate?: any;
-}
-
 export interface ElementInfo {
   type: string;
   component: ExtendedComponentSchema;