@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/file/File.js

@@ -11,11 +11,11 @@ let htmlCanvasElement;
 if (typeof window !== 'undefined') {
     htmlCanvasElement = window.HTMLCanvasElement;
 }
-else if (typeof globalThis !== 'undefined') {
-    htmlCanvasElement = globalThis.HTMLCanvasElement;
+else if (typeof global !== 'undefined') {
+    htmlCanvasElement = global.HTMLCanvasElement;
 }
 if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
-    Object.defineProperty(htmlCanvasElement.prototype, 'toBlob', {
+    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
         value: function (callback, type, quality) {
             var canvas = this;
             setTimeout(function () {
@@ -23,11 +23,9 @@ if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
                 for (var i = 0; i < len; i++) {
                     arr[i] = binStr.charCodeAt(i);
                 }
-                callback(new Blob([
-                    arr,
-                ], { type: type || 'image/png' }));
+                callback(new Blob([arr], { type: type || 'image/png' }));
             });
-        },
+        }
     });
 }
 const createRandomString = () => Math.random().toString(36).substring(2, 15);
@@ -62,26 +60,19 @@ export default class FileComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
-        const fileReaderSupported = typeof FileReader !== 'undefined';
+        const fileReaderSupported = (typeof FileReader !== 'undefined');
         const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;
-        const progressSupported = typeof window !== 'undefined' && window.XMLHttpRequest
-            ? 'upload' in new XMLHttpRequest()
-            : false;
+        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;
         this.support = {
             filereader: fileReaderSupported,
             formdata: formDataSupported,
@@ -132,10 +123,10 @@ export default class FileComponent extends Field {
         return Array.isArray(value) ? value : [];
     }
     get hasTypes() {
-        return (this.component.fileTypes &&
+        return this.component.fileTypes &&
             Array.isArray(this.component.fileTypes) &&
             this.component.fileTypes.length !== 0 &&
-            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== ''));
+            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');
     }
     get fileDropHidden() {
         return this._fileBrowseHidden;
@@ -241,11 +232,10 @@ export default class FileComponent extends Field {
             this.redraw();
             return;
         }
-        this.getFrame(videoPlayer).then((frame) => {
+        this.getFrame(videoPlayer)
+            .then((frame) => {
             frame.name = `photo-${Date.now()}.png`;
-            this.handleFilesToUpload([
-                frame,
-            ]);
+            this.handleFilesToUpload([frame]);
             this.cameraMode = false;
             this.redraw();
         });
@@ -379,7 +369,8 @@ export default class FileComponent extends Field {
         if (this.refs.fileBrowse) {
             this.addEventListener(this.refs.fileBrowse, 'click', (event) => {
                 event.preventDefault();
-                this.browseFiles(this.browseOptions).then((files) => {
+                this.browseFiles(this.browseOptions)
+                    .then((files) => {
                     this.handleFilesToUpload(files);
                 });
             });
@@ -412,7 +403,7 @@ export default class FileComponent extends Field {
                 delete fileInfo.message;
                 this.filesToSync.filesToDelete.splice(index, 1);
                 this.dataValue.push(fileInfo);
-                this.triggerChange();
+                this.triggerChange?.();
                 this.redraw();
             });
         });
@@ -424,13 +415,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -450,13 +437,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -489,8 +472,7 @@ export default class FileComponent extends Field {
             if (!this.dataValue[index]) {
                 return;
             }
-            this.dataValue[index].fileType =
-                this.dataValue[index].fileType || this.component.fileTypes[0].label;
+            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;
             this.addEventListener(fileType, 'change', (event) => {
                 event.preventDefault();
                 const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);
@@ -512,11 +494,9 @@ export default class FileComponent extends Field {
                 loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));
             });
             if (loadingImages.length) {
-                Promise.all(loadingImages)
-                    .then(() => {
+                Promise.all(loadingImages).then(() => {
                     this.filesReadyResolve();
-                })
-                    .catch(() => this.filesReadyReject());
+                }).catch(() => this.filesReadyReject());
             }
             else {
                 this.filesReadyResolve();
@@ -524,9 +504,12 @@ export default class FileComponent extends Field {
         }
         return superAttach;
     }
+    /* eslint-disable max-len */
     fileSize(a, b, c, d, e) {
-        return `${((b = Math), (c = b.log), (d = 1024), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;
+        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;
     }
+    /* eslint-enable max-len */
+    /* eslint-disable max-depth */
     globStringToRegex(str) {
         str = str.replace(/\s/g, '');
         let regexp = '', excludes = [];
@@ -564,6 +547,7 @@ export default class FileComponent extends Field {
         }
         return { regexp, excludes };
     }
+    /* eslint-enable max-depth */
     translateScalars(str) {
         if (typeof str === 'string') {
             if (str.search(/kb/i) === str.length - 2) {
@@ -598,15 +582,13 @@ export default class FileComponent extends Field {
         let valid = true;
         if (pattern.regexp && pattern.regexp.length) {
             const regexp = new RegExp(pattern.regexp, 'i');
-            valid =
-                (!_.isNil(file.type) && regexp.test(file.type)) ||
-                    (!_.isNil(file.name) && regexp.test(file.name));
+            valid = (!_.isNil(file.type) && regexp.test(file.type)) ||
+                (!_.isNil(file.name) && regexp.test(file.name));
         }
         valid = pattern.excludes.reduce((result, excludePattern) => {
             const exclude = new RegExp(excludePattern, 'i');
-            return (result &&
-                (_.isNil(file.type) || exclude.test(file.type)) &&
-                (_.isNil(file.name) || exclude.test(file.name)));
+            return result && (_.isNil(file.type) || exclude.test(file.type)) &&
+                (_.isNil(file.name) || exclude.test(file.name));
         }, valid);
         return valid;
     }
@@ -617,7 +599,7 @@ export default class FileComponent extends Field {
         return file.size - 0.1 <= this.translateScalars(val);
     }
     abortRequest(id) {
-        const abortUpload = this.abortUploads.find((abortUpload) => abortUpload.id === id);
+        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);
         if (abortUpload) {
             abortUpload.abort();
         }
@@ -627,7 +609,7 @@ export default class FileComponent extends Field {
         if (!target.id) {
             return;
         }
-        const [action, id,] = target.id.split('-');
+        const [action, id] = target.id.split('-');
         if (!action || !id || !this.actions[action]) {
             return;
         }
@@ -637,9 +619,7 @@ export default class FileComponent extends Field {
         return uniqueName(file.name, this.component.fileNameTemplate, this.evalContext());
     }
     getInitFileToSync(file) {
-        const escapedFileName = file.name
-            ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
-            : file.name;
+        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;
         return {
             id: createRandomString(),
             // Get a unique name for this file to keep file collisions from occurring.
@@ -657,7 +637,7 @@ export default class FileComponent extends Field {
         };
     }
     async handleSubmissionRevisions(file) {
-        if (this.root.form.submissionRevisions !== 'true') {
+        if (this.root?.form.submissionRevisions !== 'true') {
             return '';
         }
         const bmf = new BMF();
@@ -675,8 +655,9 @@ export default class FileComponent extends Field {
     }
     validateFileName(file) {
         // Check if file with the same name is being uploaded
-        const fileWithSameNameUploading = this.filesToSync.filesToUpload.some((fileToSync) => fileToSync.file?.name === file.name);
-        const fileWithSameNameUploaded = _.some(this.dataValue, (fileStatus) => fileStatus.originalName === file.name);
+        const fileWithSameNameUploading = this.filesToSync.filesToUpload
+            .some(fileToSync => fileToSync.file?.name === file.name);
+        const fileWithSameNameUploaded = _.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
@@ -738,24 +719,16 @@ export default class FileComponent extends Field {
         let groupKey = null;
         let groupPermissions = null;
         //Iterate through form components to find group resource if one exists
-        this.root.everyComponent((element) => {
+        this.root?.everyComponent((element) => {
             if (element.component?.submissionAccess || element.component?.defaultPermission) {
-                groupPermissions = !element.component.submissionAccess
-                    ? [
-                        {
-                            type: element.component.defaultPermission,
-                            roles: [],
-                        },
-                    ]
-                    : element.component.submissionAccess;
+                groupPermissions = !element.component.submissionAccess ? [
+                    {
+                        type: element.component.defaultPermission,
+                        roles: [],
+                    },
+                ] : element.component.submissionAccess;
                 groupPermissions.forEach((permission) => {
-                    groupKey = [
-                        'admin',
-                        'write',
-                        'create',
-                    ].includes(permission.type)
-                        ? element.component.key
-                        : null;
+                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;
                 });
             }
         });
@@ -763,15 +736,15 @@ export default class FileComponent extends Field {
     }
     async triggerFileProcessor(file) {
         let processedFile = null;
-        if (this.root.options.fileProcessor) {
+        if (this.root?.options.fileProcessor) {
             try {
                 if (this.refs.fileProcessingLoader) {
                     this.refs.fileProcessingLoader.style.display = 'block';
                 }
-                const fileProcessorHandler = fileProcessor(this.fileService, this.root.options.fileProcessor);
+                const fileProcessorHandler = fileProcessor(this.fileService, this.root?.options.fileProcessor);
                 processedFile = await fileProcessorHandler(file, this.component.properties);
             }
-            catch (ignoreErr) {
+            catch (err) {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
@@ -827,9 +800,7 @@ export default class FileComponent extends Field {
         }
         if (this.component.storage && files && files.length) {
             this.fileDropHidden = true;
-            return Promise.all([
-                ...files,
-            ].map(async (file) => {
+            return Promise.all([...files].map(async (file) => {
                 await this.prepareFileToUpload(file);
                 this.redraw();
             }));
@@ -852,7 +823,7 @@ export default class FileComponent extends Field {
                 ? this.t('Ready to be removed from storage')
                 : this.t('Preparing file to remove'),
         });
-        const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);
+        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
         this.splice(index);
         this.redraw();
     }
@@ -864,14 +835,7 @@ export default class FileComponent extends Field {
     }
     async deleteFile(fileInfo) {
         const { options = {} } = this.component;
-        if (fileInfo &&
-            [
-                'url',
-                'indexeddb',
-                's3',
-                'azure',
-                'googledrive',
-            ].includes(this.component.storage)) {
+        if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 return await fileService.deleteFile(fileInfo, options);
@@ -908,14 +872,14 @@ export default class FileComponent extends Field {
         }));
     }
     updateProgress(fileInfo, progressEvent) {
-        fileInfo.progress = parseInt((100.0 * progressEvent.loaded) / progressEvent.total);
+        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);
         if (fileInfo.status !== 'progress') {
             fileInfo.status = 'progress';
             delete fileInfo.message;
             this.redraw();
         }
         else {
-            const progress = Array.prototype.find.call(this.refs.progress, (progressElement) => progressElement.id === fileInfo.id);
+            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);
             progress.innerHTML = `<span class="visually-hidden">${fileInfo.progress}% ${this.t('Complete')}</span>`;
             progress.style.width = `${fileInfo.progress}%`;
             progress.ariaValueNow = fileInfo.progress.toString();
@@ -923,22 +887,20 @@ export default class FileComponent extends Field {
     }
     getMultipartOptions(fileToSync) {
         let count = 0;
-        return this.component.useMultipartUpload && this.component.multipart
-            ? {
-                ...this.component.multipart,
-                progressCallback: (total) => {
-                    count++;
-                    fileToSync.status = 'progress';
-                    fileToSync.progress = parseInt((100 * count) / total);
-                    delete fileToSync.message;
-                    this.redraw();
-                },
-                changeMessage: (message) => {
-                    fileToSync.message = message;
-                    this.redraw();
-                },
-            }
-            : false;
+        return this.component.useMultipartUpload && this.component.multipart ? {
+            ...this.component.multipart,
+            progressCallback: (total) => {
+                count++;
+                fileToSync.status = 'progress';
+                fileToSync.progress = parseInt(100 * count / total);
+                delete fileToSync.message;
+                this.redraw();
+            },
+            changeMessage: (message) => {
+                fileToSync.message = message;
+                this.redraw();
+            },
+        } : false;
     }
     async uploadFile(fileToSync) {
         return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
@@ -975,12 +937,11 @@ export default class FileComponent extends Field {
             catch (response) {
                 fileToSync.status = 'error';
                 delete fileToSync.progress;
-                fileToSync.message =
-                    typeof response === 'string'
-                        ? response
-                        : response.type === 'abort'
-                            ? this.t('Request was aborted')
-                            : response.toString();
+                fileToSync.message = typeof response === 'string'
+                    ? response
+                    : response.type === 'abort'
+                        ? this.t('Request was aborted')
+                        : response.toString();
                 this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
@@ -1002,29 +963,24 @@ export default class FileComponent extends Field {
         this.fileDropHidden = true;
         this.redraw();
         try {
-            const [filesToDelete = [], filesToUpload = [],] = await Promise.all([
-                this.delete(),
-                this.upload(),
-            ]);
+            const [filesToDelete = [], filesToUpload = []] = await Promise.all([this.delete(), this.upload()]);
             this.filesToSync.filesToDelete = filesToDelete
-                .filter((file) => file.fileToSync?.status === 'error')
-                .map((file) => file.fileToSync);
+                .filter(file => file.fileToSync?.status === 'error')
+                .map(file => file.fileToSync);
             this.filesToSync.filesToUpload = filesToUpload
-                .filter((file) => file.fileToSync?.status === 'error')
-                .map((file) => file.fileToSync);
+                .filter(file => file.fileToSync?.status === 'error')
+                .map(file => file.fileToSync);
             if (!this.hasValue()) {
                 this.dataValue = [];
             }
             const data = filesToUpload
-                .filter((file) => file.fileToSync?.status === 'success')
-                .map((file) => file.fileInfo);
+                .filter(file => file.fileToSync?.status === 'success')
+                .map(file => file.fileInfo);
             this.dataValue.push(...data);
-            this.triggerChange({
-                modified: true,
-            });
+            this.triggerChange?.();
             return Promise.resolve();
         }
-        catch (ignoreErr) {
+        catch (err) {
             return Promise.reject();
         }
         finally {
@@ -1043,14 +999,9 @@ export default class FileComponent extends Field {
         if (this.component.privateDownload) {
             fileInfo.private = true;
         }
-        fileService
-            .downloadFile(fileInfo, options)
-            .then((file) => {
+        fileService.downloadFile(fileInfo, options).then((file) => {
             if (file) {
-                if ([
-                    'base64',
-                    'indexeddb',
-                ].includes(file.storage)) {
+                if (['base64', 'indexeddb'].includes(file.storage)) {
                     download(file.url, file.originalName || file.name, file.type);
                 }
                 else {
@@ -1078,7 +1029,9 @@ export default class FileComponent extends Field {
                 return Promise.resolve();
             }
             await this.syncFiles();
-            return this.shouldSyncFiles ? Promise.reject('Synchronization is failed') : Promise.resolve();
+            return this.shouldSyncFiles
+                ? Promise.reject('Synchronization is failed')
+                : Promise.resolve();
         }
         catch (error) {
             return Promise.reject(error.message);

package/lib/mjs/components/file/editForm/File.edit.display.js

@@ -1,7 +1,7 @@
 export default [
     {
         key: 'placeholder',
-        ignore: true,
+        ignore: true
     },
     {
         type: 'hidden',
@@ -13,15 +13,11 @@ export default [
             json: {
                 in: [
                     {
-                        var: 'data.storage',
+                        var: 'data.storage'
                     },
-                    [
-                        's3',
-                        'azure',
-                        'googledrive',
-                    ],
+                    ['s3', 'azure', 'googledrive']
                 ],
-            },
-        },
+            }
+        }
     },
 ];