@formio/js 5.0.2-rc.3 → 5.1.0-dev.5522.066969f

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

@@ -1,5 +1,5 @@
 import Field from '../_classes/field/Field';
-import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils';
 import download from 'downloadjs';
 import _ from 'lodash';
 import fileProcessor from '../../providers/processor/fileProcessor';
@@ -98,12 +98,18 @@ export default class FileComponent extends Field {
         if (this.component.privateDownload) {
             fileInfo.private = true;
         }
-        return this.fileService.downloadFile(fileInfo).then((result) => result.url);
+        // pass the component to the downloadFile method
+        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);
     }
     get emptyValue() {
         return [];
     }
-    getValueAsString(value) {
+    getValueAsString(value, options) {
+        if (options?.review && !this.component.uploadOnly) {
+            return _.map(value, (val, index) => {
+                return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
+            }).join(', ');
+        }
         if (_.isArray(value)) {
             return _.map(value, 'originalName').join(', ');
         }
@@ -196,7 +202,7 @@ export default class FileComponent extends Field {
             this.videoStream = stream;
             const { videoPlayer } = this.refs;
             if (!videoPlayer) {
-                console.warn('Video player not found in template.');
+                console.warn(this.t('videoPlayerNotFound'));
                 this.cameraMode = false;
                 this.redraw();
                 return;
@@ -221,7 +227,7 @@ export default class FileComponent extends Field {
     takePicture() {
         const { videoPlayer } = this.refs;
         if (!videoPlayer) {
-            console.warn('Video player not found in template.');
+            console.warn(this.t('videoPlayerNotFound'));
             this.cameraMode = false;
             this.redraw();
             return;
@@ -626,7 +632,7 @@ export default class FileComponent extends Field {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -655,7 +661,7 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -664,7 +670,7 @@ export default class FileComponent extends Field {
         if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
             return {
                 status: 'error',
-                message: this.t('File is the wrong type; it must be {{ pattern }}', {
+                message: this.t('wrongFileType', {
                     pattern: this.component.filePattern,
                 }),
             };
@@ -673,7 +679,7 @@ export default class FileComponent extends Field {
         if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
             return {
                 status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
+                message: this.t('fileTooSmall', {
                     size: this.component.fileMinSize,
                 }),
             };
@@ -682,7 +688,7 @@ export default class FileComponent extends Field {
         if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
             return {
                 status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
+                message: this.t('fileTooBig', {
                     size: this.component.fileMaxSize,
                 }),
             };
@@ -694,7 +700,7 @@ export default class FileComponent extends Field {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -742,7 +748,7 @@ export default class FileComponent extends Field {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
-                    message: this.t('File processing has been failed.'),
+                    message: this.t('fileProcessingFailed'),
                 };
             }
             finally {
@@ -776,7 +782,7 @@ export default class FileComponent extends Field {
             return this.filesToSync.filesToUpload.push(fileToSync);
         }
         if (this.autoSync) {
-            fileToSync.message = this.t('Ready to be uploaded into storage');
+            fileToSync.message = this.t('readyForUpload');
         }
         this.filesToSync.filesToUpload.push({
             ...fileToSync,
@@ -814,8 +820,8 @@ export default class FileComponent extends Field {
             ...fileInfo,
             status: 'info',
             message: this.autoSync
-                ? this.t('Ready to be removed from storage')
-                : this.t('Preparing file to remove'),
+                ? this.t('readyForRemovingFromStorage')
+                : this.t('preparingFileToRemove'),
         });
         const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
         this.splice(index);
@@ -853,7 +859,7 @@ export default class FileComponent extends Field {
                 }
                 await this.deleteFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully removed');
+                fileToSync.message = this.t('succefullyRemoved');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -899,7 +905,9 @@ export default class FileComponent extends Field {
     async uploadFile(fileToSync) {
         return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
-        this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, 
+        this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
+            this.emit('fileUploadingStart');
+        }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
@@ -921,9 +929,10 @@ export default class FileComponent extends Field {
                 }
                 fileInfo = await this.uploadFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully uploaded');
+                fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
+                this.emit('fileUploadingEnd');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -933,6 +942,7 @@ export default class FileComponent extends Field {
                     : response.type === 'abort'
                         ? this.t('Request was aborted')
                         : response.toString();
+                this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
                     response,
@@ -1020,7 +1030,7 @@ export default class FileComponent extends Field {
             }
             await this.syncFiles();
             return this.shouldSyncFiles
-                ? Promise.reject('Synchronization is failed')
+                ? Promise.reject(this.t('synchronizationFailed'))
                 : Promise.resolve();
         }
         catch (error) {

package/lib/mjs/components/file/editForm/File.edit.file.d.ts

@@ -16,6 +16,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -45,6 +46,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -91,6 +93,7 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -120,6 +123,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -149,6 +153,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -160,6 +165,7 @@ declare const _default: ({
     tooltip: string;
     rows: number;
     editor: string;
+    as: string;
     input: boolean;
     weight: number;
     placeholder: string;
@@ -207,6 +213,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -227,6 +234,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -247,6 +255,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -276,6 +285,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -305,6 +315,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -332,6 +343,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -353,6 +365,7 @@ declare const _default: ({
     tableView?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;

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

@@ -115,6 +115,7 @@ export default [
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
         editor: 'ace',
+        as: 'json',
         input: true,
         weight: 15,
         placeholder: `{

package/lib/mjs/components/form/Form.d.ts

@@ -13,7 +13,7 @@ export default class FormComponent extends Component {
     valueChanged: boolean | undefined;
     subForm: any;
     formSrc: any;
-    get dataReady(): Promise<any>;
+    get dataReady(): any;
     get emptyValue(): {
         data: {};
     };
@@ -21,7 +21,7 @@ export default class FormComponent extends Component {
     get useOriginalRevision(): any;
     setFormRevision(rev: any): void;
     subFormRevision: any;
-    getComponent(path: any, fn: any): any;
+    getComponent(path: any): any;
     getSubOptions(options?: {}): {};
     render(): string;
     asString(value: any): any;
@@ -32,6 +32,7 @@ export default class FormComponent extends Component {
     attach(element: any): Promise<void>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
+    get subFormData(): any;
     subFormReady: Promise<any> | null | undefined;
     /**
      * Pass everyComponent to subform.
@@ -44,19 +45,19 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach?: boolean | undefined): any;
+    createSubForm(fromAttach?: boolean | undefined, beforeSubmit?: boolean | undefined): any;
     hideSubmitButton(component: any): void;
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach: boolean): Promise<any>;
+    loadSubForm(fromAttach: boolean, beforeSubmit: boolean): Promise<any>;
     subFormLoading: boolean | undefined;
-    get subFormData(): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;
     setPristine(pristine: any): void;
@@ -90,7 +91,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
-    areAllComponentsEmpty(data: any): boolean;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard