@formio/js 5.0.0-bb.dev.1

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

@@ -0,0 +1,148 @@
+import XHR from './xhr';
+import { withRetries } from './util';
+const loadAbortControllerPolyfill = async () => {
+    if (typeof AbortController === 'undefined') {
+        await import('abortcontroller-polyfill/dist/polyfill-patch-fetch');
+    }
+};
+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
+                        await loadAbortControllerPolyfill();
+                        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);
+                        if (response.data.headers) {
+                            Object.keys(response.data.headers).forEach((key) => {
+                                xhr.setRequestHeader(key, response.data.headers[key]);
+                            });
+                        }
+                        return file;
+                    }
+                }
+                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,
+                bucket: response.bucket,
+                key: response.data.key,
+                url: XHR.path([response.url, response.data.key]),
+                acl: response.data.acl,
+                size: file.size,
+                type: file.type
+            };
+        },
+        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);
+            }
+        },
+        deleteFile(fileInfo) {
+            const url = `${formio.formUrl}/storage/s3?bucket=${XHR.trim(fileInfo.bucket)}&key=${XHR.trim(fileInfo.key)}`;
+            return formio.makeRequest('', url, 'delete');
+        },
+    };
+}
+s3.title = 'S3';
+export default s3;

package/lib/mjs/providers/storage/uploadAdapter.d.ts

@@ -0,0 +1 @@
+export function getFormioUploadAdapterPlugin(fileService: any, component: any): (editor: any) => void;

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

@@ -0,0 +1,54 @@
+import { uniqueName } from '../../utils/utils';
+/**
+ * UploadAdapter for CKEditor https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html
+ */
+class FormioUploadAdapter {
+    constructor(loader, fileService, component) {
+        this.loader = loader;
+        this.fileService = fileService;
+        this.component = component;
+    }
+    upload() {
+        return this.loader.file
+            .then(file => new Promise((resolve, reject) => {
+            const { uploadStorage, uploadUrl, uploadOptions, uploadDir, fileKey } = this.component.component;
+            const uploadParams = [
+                uploadStorage,
+                file,
+                uniqueName(file.name),
+                uploadDir || '',
+                (evt) => this.onUploadProgress(evt),
+                uploadUrl,
+                uploadOptions,
+                fileKey,
+                null,
+                null
+            ];
+            const uploadPromise = this.fileService.uploadFile(...uploadParams, () => this.component.emit('fileUploadingStart', uploadPromise)).then((result) => {
+                return this.fileService.downloadFile(result);
+            }).then((result) => {
+                return resolve({
+                    default: result.url
+                });
+            }).catch((err) => {
+                console.warn('An Error occured while uploading file', err);
+                reject(err);
+            }).finally(() => {
+                this.component.emit('fileUploadingEnd', uploadPromise);
+            });
+        }));
+    }
+    abort() { }
+    onUploadProgress(evt) {
+        if (evt.lengthComputable) {
+            this.loader.uploadTotal = evt.total;
+            this.loader.uploaded = evt.loaded;
+        }
+    }
+}
+const getFormioUploadAdapterPlugin = (fileService, component) => (editor) => {
+    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+        return new FormioUploadAdapter(loader, fileService, component);
+    };
+};
+export { getFormioUploadAdapterPlugin };

package/lib/mjs/providers/storage/url.d.ts

@@ -0,0 +1,11 @@
+export default url;
+declare function url(formio: any): {
+    title: string;
+    name: string;
+    uploadFile(file: any, name: any, dir: any, progressCallback: any, url: any, options: any, fileKey: any, groupPermissions: any, groupId: any, abortCallback: any): any;
+    deleteFile(fileInfo: any, options: any): Promise<any>;
+    downloadFile(file: any): Promise<any>;
+};
+declare namespace url {
+    const title: string;
+}

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

@@ -0,0 +1,146 @@
+function url(formio) {
+    function setOptions(options, xhr) {
+        const parsedOptions = typeof options === 'string' ? JSON.parse(options) : options;
+        for (const prop in parsedOptions) {
+            if (prop === 'headers') {
+                const headers = parsedOptions['headers'];
+                for (const header in headers) {
+                    xhr.setRequestHeader(header, headers[header]);
+                }
+            }
+            else {
+                xhr[prop] = parsedOptions[prop];
+            }
+        }
+    }
+    const xhrRequest = (url, name, query, data, options, progressCallback, abortCallback) => {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            const json = (typeof data === 'string');
+            const fd = new FormData();
+            if (typeof progressCallback === 'function') {
+                xhr.upload.onprogress = progressCallback;
+            }
+            if (typeof abortCallback === 'function') {
+                abortCallback(() => xhr.abort());
+            }
+            if (!json) {
+                for (const key in data) {
+                    fd.append(key, data[key]);
+                }
+            }
+            xhr.onload = () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    // Need to test if xhr.response is decoded or not.
+                    let respData = {};
+                    try {
+                        respData = (typeof xhr.response === 'string') ? JSON.parse(xhr.response) : {};
+                        respData = (respData && respData.data) ? respData.data : respData;
+                    }
+                    catch (err) {
+                        respData = {};
+                    }
+                    // Get the url of the file.
+                    let respUrl = respData.hasOwnProperty('url') ? respData.url : `${xhr.responseURL}/${name}`;
+                    // If they provide relative url, then prepend the url.
+                    if (respUrl && respUrl[0] === '/') {
+                        respUrl = `${url}${respUrl}`;
+                    }
+                    resolve({ url: respUrl, data: respData });
+                }
+                else {
+                    reject(xhr.response || 'Unable to upload file');
+                }
+            };
+            xhr.onerror = () => reject(xhr);
+            xhr.onabort = () => reject(xhr);
+            let requestUrl = url + (url.indexOf('?') > -1 ? '&' : '?');
+            for (const key in query) {
+                requestUrl += `${key}=${query[key]}&`;
+            }
+            if (requestUrl[requestUrl.length - 1] === '&') {
+                requestUrl = requestUrl.substr(0, requestUrl.length - 1);
+            }
+            xhr.open('POST', requestUrl);
+            if (json) {
+                xhr.setRequestHeader('Content-Type', 'application/json');
+            }
+            const token = formio.getToken();
+            if (token) {
+                xhr.setRequestHeader('x-jwt-token', token);
+            }
+            //Overrides previous request props
+            if (options) {
+                setOptions(options, xhr);
+            }
+            xhr.send(json ? data : fd);
+        });
+    };
+    return {
+        title: 'Url',
+        name: 'url',
+        uploadFile(file, name, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {
+            const uploadRequest = function (form) {
+                return xhrRequest(url, name, {
+                    baseUrl: encodeURIComponent(formio.projectUrl),
+                    project: form ? form.project : '',
+                    form: form ? form._id : ''
+                }, {
+                    [fileKey]: file,
+                    name,
+                    dir
+                }, options, progressCallback, abortCallback).then(response => {
+                    // Store the project and form url along with the metadata.
+                    response.data = response.data || {};
+                    response.data.baseUrl = formio.projectUrl;
+                    response.data.project = form ? form.project : '';
+                    response.data.form = form ? form._id : '';
+                    return {
+                        storage: 'url',
+                        name,
+                        url: response.url,
+                        size: file.size,
+                        type: file.type,
+                        data: response.data
+                    };
+                });
+            };
+            if (file.private && formio.formId) {
+                return formio.loadForm().then((form) => uploadRequest(form));
+            }
+            else {
+                return uploadRequest();
+            }
+        },
+        deleteFile(fileInfo, options) {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('DELETE', fileInfo.url, true);
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve('File deleted');
+                    }
+                    else {
+                        reject(xhr.response || 'Unable to delete file');
+                    }
+                };
+                if (options) {
+                    setOptions(options, xhr);
+                }
+                xhr.send(null);
+            });
+        },
+        downloadFile(file) {
+            if (file.private) {
+                if (formio.submissionId && file.data) {
+                    file.data.submission = formio.submissionId;
+                }
+                return xhrRequest(file.url, file.name, {}, JSON.stringify(file)).then(response => response.data);
+            }
+            // Return the original as there is nothing to do.
+            return Promise.resolve(file);
+        }
+    };
+}
+url.title = 'Url';
+export default url;

package/lib/mjs/providers/storage/util.d.ts

@@ -0,0 +1 @@
+export function withRetries(fn: any, args: any, retries?: number, err?: null): Promise<any>;

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.d.ts

@@ -0,0 +1,8 @@
+export function setXhrHeaders(formio: any, xhr: any): void;
+export default XHR;
+declare namespace XHR {
+    function trim(text: any): any;
+    function path(items: any): any;
+    function upload(formio: any, type: any, xhrCallback: any, file: any, fileName: any, dir: any, progressCallback: any, groupPermissions: any, groupId: any, abortCallback: any, multipartOptions: any): Promise<any>;
+    function makeXhrRequest(formio: any, xhrCallback: any, serverResponse: any, progressCallback: any, abortCallback: any): Promise<any>;
+}

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

@@ -0,0 +1,113 @@
+import _trim from 'lodash/trim';
+export const setXhrHeaders = (formio, xhr) => {
+    const { headers } = formio.options;
+    if (headers) {
+        const ValidHeaders = {
+            'Content-Disposition': true,
+            'Authorization': true,
+        };
+        for (const header in headers) {
+            if (ValidHeaders[header]) {
+                xhr.setRequestHeader(header, headers[header]);
+            }
+        }
+    }
+};
+const XHR = {
+    trim(text) {
+        return _trim(text, '/');
+    },
+    path(items) {
+        return items.filter(item => !!item).map(XHR.trim).join('/');
+    },
+    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) {
+            if (response.status === 504) {
+                const error = new Error('Network request failed');
+                error.networkError = true;
+                throw error;
+            }
+            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);
+            };
+            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);
+                }
+                // 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;
+                }
+                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 if (xhr.status === 504) {
+                        const error = new Error('Network request failed');
+                        error.networkError = true;
+                        reject(error);
+                    }
+                    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/templates/Templates.d.ts

@@ -0,0 +1,11 @@
+export default class Templates {
+    static get templates(): any;
+    static addTemplate(name: any, template: any): void;
+    static extendTemplate(name: any, template: any): void;
+    static setTemplate(name: any, template: any): void;
+    static set current(arg: any);
+    static get current(): any;
+    static get defaultTemplates(): any;
+    static set framework(arg: any);
+    static get framework(): any;
+}

package/lib/mjs/templates/Templates.js

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import templates from './index';
+export default class Templates {
+    static get templates() {
+        if (!Templates._templates) {
+            Templates._templates = templates;
+        }
+        return Templates._templates;
+    }
+    static addTemplate(name, template) {
+        Templates.templates[name] = template;
+    }
+    static extendTemplate(name, template) {
+        Templates.templates[name] = _.merge({}, Templates.templates[name], template);
+    }
+    static setTemplate(name, template) {
+        Templates.addTemplate(name, template);
+    }
+    static set current(templates) {
+        const defaultTemplates = Templates.current;
+        Templates._current = _.merge({}, defaultTemplates, templates);
+    }
+    static get current() {
+        if (Templates._current) {
+            return Templates._current;
+        }
+        return Templates.defaultTemplates;
+    }
+    static get defaultTemplates() {
+        return Templates.templates.hasOwnProperty('bootstrap') ? Templates.templates.bootstrap : {};
+    }
+    static set framework(framework) {
+        if (Templates.templates.hasOwnProperty(framework)) {
+            Templates._framework = framework;
+            Templates._current = Templates.templates[framework];
+        }
+    }
+    static get framework() {
+        return Templates._framework;
+    }
+}