@formio/js 5.0.0-rc.33 → 5.0.0-rc.35

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

@@ -42,6 +42,7 @@ if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
         }
     });
 }
+const createRandomString = () => Math.random().toString(36).substring(2, 15);
 class FileComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -90,8 +91,13 @@ class FileComponent extends Field_1.default {
             progress: progressSupported,
         };
         this.cameraMode = false;
-        this.statuses = [];
         this.fileDropHidden = false;
+        this.filesToSync = {
+            filesToUpload: [],
+            filesToDelete: [],
+        };
+        this.isSyncing = false;
+        this.abortUploads = [];
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -136,14 +142,37 @@ class FileComponent extends Field_1.default {
         }
         this._fileBrowseHidden = value;
     }
+    get shouldSyncFiles() {
+        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);
+    }
+    get autoSync() {
+        return lodash_1.default.get(this, 'component.autoSync', false);
+    }
+    get columnsSize() {
+        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;
+        const typeColumn = this.hasTypes ? 2 : 0;
+        const sizeColumn = 2;
+        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;
+        return {
+            name: nameColumn,
+            size: sizeColumn,
+            type: typeColumn,
+            actions: actionsColumn,
+        };
+    }
     render() {
+        const { filesToDelete, filesToUpload } = this.filesToSync;
         return super.render(this.renderTemplate('file', {
             fileSize: this.fileSize,
             files: this.dataValue || [],
-            statuses: this.statuses,
+            filesToDelete,
+            filesToUpload,
             disabled: this.disabled,
             support: this.support,
-            fileDropHidden: this.fileDropHidden
+            fileDropHidden: this.fileDropHidden,
+            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),
+            isSyncing: this.isSyncing,
+            columns: this.columnsSize,
         }));
     }
     getVideoStream(constraints) {
@@ -204,7 +233,7 @@ class FileComponent extends Field_1.default {
         this.getFrame(videoPlayer)
             .then((frame) => {
             frame.name = `photo-${Date.now()}.png`;
-            this.upload([frame]);
+            this.handleFilesToUpload([frame]);
             this.cameraMode = false;
             this.redraw();
         });
@@ -281,20 +310,10 @@ class FileComponent extends Field_1.default {
         }
         return options;
     }
-    deleteFile(fileInfo) {
-        const { options = {} } = this.component;
-        if (fileInfo && (['url', 'indexeddb'].includes(this.component.storage))) {
-            const { fileService } = this;
-            if (fileService && typeof fileService.deleteFile === 'function') {
-                fileService.deleteFile(fileInfo, options);
-            }
-            else {
-                const formio = this.options.formio || (this.root && this.root.formio);
-                if (formio) {
-                    formio.makeRequest('', fileInfo.url, 'delete');
-                }
-            }
-        }
+    get actions() {
+        return {
+            abort: this.abortRequest.bind(this),
+        };
     }
     attach(element) {
         this.loadRefs(element, {
@@ -307,19 +326,22 @@ class FileComponent extends Field_1.default {
             videoPlayer: 'single',
             fileLink: 'multiple',
             removeLink: 'multiple',
-            fileStatusRemove: 'multiple',
+            fileToSyncRemove: 'multiple',
             fileImage: 'multiple',
             fileType: 'multiple',
             fileProcessingLoader: 'single',
+            syncNow: 'single',
+            restoreFile: 'multiple',
+            progress: 'multiple',
         });
         // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.
         this.refs.input = [];
         const superAttach = super.attach(element);
         if (this.refs.fileDrop) {
-            if (!this.statuses.length) {
-                this.refs.fileDrop.removeAttribute('hidden');
-            }
-            const element = this;
+            // if (!this.statuses.length) {
+            //   this.refs.fileDrop.removeAttribute('hidden');
+            // }
+            const _this = this;
             this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {
                 this.className = 'fileSelector fileDragOver';
                 event.preventDefault();
@@ -331,15 +353,18 @@ class FileComponent extends Field_1.default {
             this.addEventListener(this.refs.fileDrop, 'drop', function (event) {
                 this.className = 'fileSelector';
                 event.preventDefault();
-                element.upload(event.dataTransfer.files);
+                _this.handleFilesToUpload(event.dataTransfer.files);
             });
         }
+        this.addEventListener(element, 'click', (event) => {
+            this.handleAction(event);
+        });
         if (this.refs.fileBrowse) {
             this.addEventListener(this.refs.fileBrowse, 'click', (event) => {
                 event.preventDefault();
                 this.browseFiles(this.browseOptions)
                     .then((files) => {
-                    this.upload(files);
+                    this.handleFilesToUpload(files);
                 });
             });
         }
@@ -351,22 +376,27 @@ class FileComponent extends Field_1.default {
         });
         this.refs.removeLink.forEach((removeLink, index) => {
             this.addEventListener(removeLink, 'click', (event) => {
+                event.preventDefault();
                 const fileInfo = this.dataValue[index];
-                this.deleteFile(fileInfo);
+                this.handleFileToRemove(fileInfo);
+            });
+        });
+        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {
+            this.addEventListener(fileToSyncRemove, 'click', (event) => {
                 event.preventDefault();
-                this.splice(index);
+                this.filesToSync.filesToUpload.splice(index, 1);
                 this.redraw();
             });
         });
-        this.refs.fileStatusRemove.forEach((fileStatusRemove, index) => {
-            this.addEventListener(fileStatusRemove, 'click', (event) => {
+        this.refs.restoreFile.forEach((fileToRestore, index) => {
+            this.addEventListener(fileToRestore, 'click', (event) => {
                 event.preventDefault();
-                const fileUpload = this.statuses[index];
-                lodash_1.default.pull(this.filesUploading, fileUpload.originalName);
-                if (fileUpload.abort) {
-                    fileUpload.abort();
-                }
-                this.statuses.splice(index, 1);
+                const fileInfo = this.filesToSync.filesToDelete[index];
+                delete fileInfo.status;
+                delete fileInfo.message;
+                this.filesToSync.filesToDelete.splice(index, 1);
+                this.dataValue.push(fileInfo);
+                this.triggerChange();
                 this.redraw();
             });
         });
@@ -380,7 +410,7 @@ class FileComponent extends Field_1.default {
                             reader.onloadend = (evt) => {
                                 const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.upload([blob]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -402,7 +432,7 @@ class FileComponent extends Field_1.default {
                             reader.onloadend = (evt) => {
                                 const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.upload([blob]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -432,6 +462,9 @@ class FileComponent extends Field_1.default {
             });
         }
         this.refs.fileType.forEach((fileType, index) => {
+            if (!this.dataValue[index]) {
+                return;
+            }
             this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;
             this.addEventListener(fileType, 'change', (event) => {
                 event.preventDefault();
@@ -439,6 +472,10 @@ class FileComponent extends Field_1.default {
                 this.dataValue[index].fileType = fileType.label;
             });
         });
+        this.addEventListener(this.refs.syncNow, 'click', (event) => {
+            event.preventDefault();
+            this.syncFiles();
+        });
         const fileService = this.fileService;
         if (fileService) {
             const loadingImages = [];
@@ -554,199 +591,396 @@ class FileComponent extends Field_1.default {
     validateMaxSize(file, val) {
         return file.size - 0.1 <= this.translateScalars(val);
     }
-    upload(files) {
-        // Only allow one upload if not multiple.
-        if (!this.component.multiple) {
-            if (this.statuses.length) {
-                this.statuses = [];
+    abortRequest(id) {
+        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);
+        if (abortUpload) {
+            abortUpload.abort();
+        }
+    }
+    handleAction(event) {
+        const target = event.target;
+        if (!target.id) {
+            return;
+        }
+        const [action, id] = target.id.split('-');
+        if (!action || !id || !this.actions[action]) {
+            return;
+        }
+        this.actions[action](id);
+    }
+    getFileName(file) {
+        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());
+    }
+    getInitFileToSync(file) {
+        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.
+            dir: this.interpolate(this.component.dir || ''),
+            name: this.getFileName(file),
+            originalName: escapedFileName,
+            fileKey: this.component.fileKey || 'file',
+            storage: this.component.storage,
+            options: this.component.options,
+            file,
+            size: file.size,
+            status: 'info',
+            message: this.t('Processing file. Please wait...'),
+            hash: '',
+        };
+    }
+    handleSubmissionRevisions(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.root.form.submissionRevisions !== 'true') {
+                return '';
             }
-            files = Array.prototype.slice.call(files, 0, 1);
+            const bmf = new browser_md5_file_1.default();
+            const hash = yield new Promise((resolve, reject) => {
+                this.emit('fileUploadingStart');
+                bmf.md5(file, (err, md5) => {
+                    if (err) {
+                        return reject(err);
+                    }
+                    return resolve(md5);
+                });
+            });
+            this.emit('fileUploadingEnd');
+            return hash;
+        });
+    }
+    validateFileName(file) {
+        // Check if file with the same name is being uploaded
+        const fileWithSameNameUploading = this.filesToSync.filesToUpload
+            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });
+        const fileWithSameNameUploaded = this.dataValue
+            .some(fileStatus => fileStatus.originalName === file.name);
+        return fileWithSameNameUploaded || fileWithSameNameUploading
+            ? {
+                status: 'error',
+                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+            }
+            : {};
+    }
+    validateFileSettings(file) {
+        // Check file pattern
+        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 }}', {
+                    pattern: this.component.filePattern,
+                }),
+            };
         }
-        if (this.component.storage && files && files.length) {
-            this.fileDropHidden = true;
-            // files is not really an array and does not have a forEach method, so fake it.
-            /* eslint-disable max-statements */
-            Array.prototype.forEach.call(files, (file) => __awaiter(this, void 0, void 0, function* () {
-                const fileName = (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());
-                const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;
-                const fileUpload = {
-                    abort: () => null,
-                    originalName: escapedFileName,
-                    name: fileName,
-                    size: file.size,
-                    status: 'info',
-                    message: this.t('Processing file. Please wait...'),
-                    hash: '',
-                };
-                if (this.root.form.submissionRevisions === 'true') {
-                    this.statuses.push(fileUpload);
-                    this.redraw();
-                    const bmf = new browser_md5_file_1.default();
-                    const hash = yield new Promise((resolve, reject) => {
-                        this.emit('fileUploadingStart');
-                        bmf.md5(file, (err, md5) => {
-                            if (err) {
-                                return reject(err);
-                            }
-                            return resolve(md5);
-                        });
-                    });
-                    this.emit('fileUploadingEnd');
-                    fileUpload.hash = hash;
+        // Check file minimum size
+        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 }}', {
+                    size: this.component.fileMinSize,
+                }),
+            };
+        }
+        // Check file maximum size
+        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 }}', {
+                    size: this.component.fileMaxSize,
+                }),
+            };
+        }
+        return {};
+    }
+    validateFileService() {
+        const { fileService } = this;
+        return !fileService
+            ? {
+                status: 'error',
+                message: this.t('File Service not provided.'),
+            }
+            : {};
+    }
+    validateFile(file) {
+        const fileServiceValidation = this.validateFileService();
+        if (fileServiceValidation.status === 'error') {
+            return fileServiceValidation;
+        }
+        const fileNameValidation = this.validateFileName(file);
+        if (fileNameValidation.status === 'error') {
+            return fileNameValidation;
+        }
+        return this.validateFileSettings(file);
+    }
+    getGroupPermissions() {
+        let groupKey = null;
+        let groupPermissions = null;
+        //Iterate through form components to find group resource if one exists
+        this.root.everyComponent((element) => {
+            var _a, _b;
+            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {
+                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;
+                });
+            }
+        });
+        return { groupKey, groupPermissions };
+    }
+    triggerFileProcessor(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let processedFile = null;
+            if (this.root.options.fileProcessor) {
+                try {
+                    if (this.refs.fileProcessingLoader) {
+                        this.refs.fileProcessingLoader.style.display = 'block';
+                    }
+                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);
+                    processedFile = yield fileProcessorHandler(file, this.component.properties);
                 }
-                // Check if file with the same name is being uploaded
-                if (!this.filesUploading) {
-                    this.filesUploading = [];
+                catch (err) {
+                    this.fileDropHidden = false;
+                    return {
+                        status: 'error',
+                        message: this.t('File processing has been failed.'),
+                    };
                 }
-                const fileWithSameNameUploading = this.filesUploading.some(fileUploading => fileUploading === file.name);
-                this.filesUploading.push(file.name);
-                const fileWithSameNameUploaded = this.dataValue.some(fileStatus => fileStatus.originalName === file.name);
-                const fileWithSameNameUploadedWithError = this.statuses.findIndex(fileStatus => fileStatus.originalName === file.name
-                    && fileStatus.status === 'error');
-                if (fileWithSameNameUploaded || fileWithSameNameUploading) {
-                    fileUpload.status = 'error';
-                    fileUpload.message = this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`);
+                finally {
+                    if (this.refs.fileProcessingLoader) {
+                        this.refs.fileProcessingLoader.style.display = 'none';
+                    }
                 }
-                if (fileWithSameNameUploadedWithError !== -1) {
-                    this.statuses.splice(fileWithSameNameUploadedWithError, 1);
+            }
+            return {
+                file: processedFile,
+            };
+        });
+    }
+    prepareFileToUpload(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fileToSync = this.getInitFileToSync(file);
+            fileToSync.hash = yield this.handleSubmissionRevisions(file);
+            const { status, message } = this.validateFile(file);
+            if (status === 'error') {
+                fileToSync.isValidationError = true;
+                fileToSync.status = status;
+                fileToSync.message = message;
+                return this.filesToSync.filesToUpload.push(fileToSync);
+            }
+            if (this.component.privateDownload) {
+                file.private = true;
+            }
+            const { groupKey, groupPermissions } = this.getGroupPermissions();
+            const processedFile = yield this.triggerFileProcessor(file);
+            if (processedFile.status === 'error') {
+                fileToSync.status === 'error';
+                fileToSync.message = processedFile.message;
+                return this.filesToSync.filesToUpload.push(fileToSync);
+            }
+            if (this.autoSync) {
+                fileToSync.message = this.t('Ready to be uploaded into storage');
+            }
+            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));
+        });
+    }
+    prepareFilesToUpload(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Only allow one upload if not multiple.
+            if (!this.component.multiple) {
+                files = Array.prototype.slice.call(files, 0, 1);
+            }
+            if (this.component.storage && files && files.length) {
+                this.fileDropHidden = true;
+                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {
+                    yield this.prepareFileToUpload(file);
                     this.redraw();
+                })));
+            }
+            else {
+                return Promise.resolve();
+            }
+        });
+    }
+    handleFilesToUpload(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.prepareFilesToUpload(files);
+            if (!this.autoSync) {
+                yield this.syncFiles();
+            }
+        });
+    }
+    prepareFileToDelete(fileInfo) {
+        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync
+                ? this.t('Ready to be removed from storage')
+                : this.t('Preparing file to remove') }));
+        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
+        this.splice(index);
+        this.redraw();
+    }
+    handleFileToRemove(fileInfo) {
+        this.prepareFileToDelete(fileInfo);
+        if (!this.autoSync) {
+            this.syncFiles();
+        }
+    }
+    deleteFile(fileInfo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { options = {} } = this.component;
+            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {
+                const { fileService } = this;
+                if (fileService && typeof fileService.deleteFile === 'function') {
+                    return yield fileService.deleteFile(fileInfo, options);
                 }
-                // Check file pattern
-                if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
-                    fileUpload.status = 'error';
-                    fileUpload.message = this.t('File is the wrong type; it must be {{ pattern }}', {
-                        pattern: this.component.filePattern,
-                    });
-                }
-                // Check file minimum size
-                if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
-                    fileUpload.status = 'error';
-                    fileUpload.message = this.t('File is too small; it must be at least {{ size }}', {
-                        size: this.component.fileMinSize,
-                    });
+                else {
+                    const formio = this.options.formio || (this.root && this.root.formio);
+                    if (formio) {
+                        return yield formio.makeRequest('', fileInfo.url, 'delete');
+                    }
                 }
-                // Check file maximum size
-                if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
-                    fileUpload.status = 'error';
-                    fileUpload.message = this.t('File is too big; it must be at most {{ size }}', {
-                        size: this.component.fileMaxSize,
-                    });
+            }
+        });
+    }
+    delete() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.filesToSync.filesToDelete.length) {
+                return Promise.resolve();
+            }
+            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    if (fileToSync.isValidationError) {
+                        return { fileToSync };
+                    }
+                    yield this.deleteFile(fileToSync);
+                    fileToSync.status = 'success';
+                    fileToSync.message = this.t('Succefully removed');
                 }
-                // Get a unique name for this file to keep file collisions from occurring.
-                const dir = this.interpolate(this.component.dir || '');
-                const { fileService } = this;
-                if (!fileService) {
-                    fileUpload.status = 'error';
-                    fileUpload.message = this.t('File Service not provided.');
+                catch (response) {
+                    fileToSync.status = 'error';
+                    fileToSync.message = typeof response === 'string' ? response : response.toString();
                 }
-                if (this.root.form.submissionRevisions !== 'true') {
-                    this.statuses.push(fileUpload);
+                finally {
                     this.redraw();
                 }
-                if (fileUpload.status !== 'error') {
-                    if (this.component.privateDownload) {
-                        file.private = true;
-                    }
-                    const { storage, options = {} } = this.component;
-                    const url = this.interpolate(this.component.url, { file: fileUpload });
-                    let groupKey = null;
-                    let groupPermissions = null;
-                    //Iterate through form components to find group resource if one exists
-                    this.root.everyComponent((element) => {
-                        var _a, _b;
-                        if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {
-                            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;
-                            });
-                        }
-                    });
-                    const fileKey = this.component.fileKey || 'file';
-                    const groupResourceId = groupKey ? this.currentForm.submission.data[groupKey]._id : null;
-                    let processedFile = null;
-                    if (this.root.options.fileProcessor) {
-                        try {
-                            if (this.refs.fileProcessingLoader) {
-                                this.refs.fileProcessingLoader.style.display = 'block';
-                            }
-                            const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);
-                            processedFile = yield fileProcessorHandler(file, this.component.properties);
-                        }
-                        catch (err) {
-                            fileUpload.status = 'error';
-                            fileUpload.message = this.t('File processing has been failed.');
-                            this.fileDropHidden = false;
-                            this.redraw();
-                            return;
-                        }
-                        finally {
-                            if (this.refs.fileProcessingLoader) {
-                                this.refs.fileProcessingLoader.style.display = 'none';
-                            }
-                        }
+                return { fileToSync };
+            })));
+        });
+    }
+    updateProgress(fileInfo, progressEvent) {
+        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);
+            progress.innerHTML = `<span class="visually-hidden">${fileInfo.progress}% ${this.t('Complete')}</span>`;
+            progress.style.width = `${fileInfo.progress}%`;
+            progress.ariaValueNow = fileInfo.progress.toString();
+        }
+    }
+    getMultipartOptions(fileToSync) {
+        let count = 0;
+        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, 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;
+    }
+    uploadFile(fileToSync) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield 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, () => { }, 
+            // Abort upload callback
+            (abort) => this.abortUploads.push({
+                id: fileToSync.id,
+                abort,
+            }), this.getMultipartOptions(fileToSync));
+        });
+    }
+    upload() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.filesToSync.filesToUpload.length) {
+                return Promise.resolve();
+            }
+            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {
+                let fileInfo = null;
+                try {
+                    if (fileToSync.isValidationError) {
+                        return {
+                            fileToSync,
+                            fileInfo,
+                        };
                     }
-                    // Prep for a potential multipart upload
-                    let count = 0;
-                    const multipartOptions = this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {
-                            count++;
-                            fileUpload.status = 'progress';
-                            fileUpload.progress = parseInt(100 * count / total);
-                            delete fileUpload.message;
-                            this.redraw();
-                        }, changeMessage: (message) => {
-                            fileUpload.message = message;
-                            this.redraw();
-                        } }) : false;
-                    fileUpload.message = this.t('Starting upload...');
+                    fileInfo = yield this.uploadFile(fileToSync);
+                    fileToSync.status = 'success';
+                    fileToSync.message = this.t('Succefully uploaded');
+                    fileInfo.originalName = fileToSync.originalName;
+                    fileInfo.hash = fileToSync.hash;
+                }
+                catch (response) {
+                    fileToSync.status = 'error';
+                    delete fileToSync.progress;
+                    fileToSync.message = typeof response === 'string'
+                        ? response
+                        : response.type === 'abort'
+                            ? this.t('Request was aborted')
+                            : response.toString();
+                }
+                finally {
+                    delete fileToSync.progress;
                     this.redraw();
-                    const filePromise = fileService.uploadFile(storage, processedFile || file, fileName, dir, 
-                    // Progress callback
-                    (evt) => {
-                        fileUpload.status = 'progress';
-                        fileUpload.progress = parseInt(100.0 * evt.loaded / evt.total);
-                        delete fileUpload.message;
-                        this.redraw();
-                    }, url, options, fileKey, groupPermissions, groupResourceId, 
-                    // Upload start callback
-                    () => {
-                        this.emit('fileUploadingStart', filePromise);
-                    }, (abort) => fileUpload.abort = abort, multipartOptions).then((fileInfo) => {
-                        const index = this.statuses.indexOf(fileUpload);
-                        if (index !== -1) {
-                            this.statuses.splice(index, 1);
-                        }
-                        fileInfo.originalName = escapedFileName;
-                        fileInfo.hash = fileUpload.hash;
-                        if (!this.hasValue()) {
-                            this.dataValue = [];
-                        }
-                        this.dataValue.push(fileInfo);
-                        lodash_1.default.pull(this.filesUploading, fileInfo.originalName);
-                        this.fileDropHidden = false;
-                        this.redraw();
-                        this.triggerChange();
-                        this.emit('fileUploadingEnd', filePromise);
-                    })
-                        .catch((response) => {
-                        fileUpload.status = 'error';
-                        fileUpload.message = typeof response === 'string' ? response : response.toString();
-                        delete fileUpload.progress;
-                        this.fileDropHidden = false;
-                        lodash_1.default.pull(this.filesUploading, file.name);
-                        this.redraw();
-                        this.emit('fileUploadingEnd', filePromise);
-                    });
                 }
-                else {
-                    this.filesUploading.splice(this.filesUploading.indexOf(file.name), 1);
+                return {
+                    fileToSync,
+                    fileInfo,
+                };
+            })));
+        });
+    }
+    syncFiles() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isSyncing = true;
+            this.fileDropHidden = true;
+            this.redraw();
+            try {
+                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);
+                this.filesToSync.filesToDelete = filesToDelete
+                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })
+                    .map(file => file.fileToSync);
+                this.filesToSync.filesToUpload = filesToUpload
+                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })
+                    .map(file => file.fileToSync);
+                if (!this.hasValue()) {
+                    this.dataValue = [];
                 }
-            }));
-        }
+                const data = filesToUpload
+                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })
+                    .map(file => file.fileInfo);
+                this.dataValue.push(...data);
+                this.triggerChange();
+                return Promise.resolve();
+            }
+            catch (err) {
+                return Promise.reject();
+            }
+            finally {
+                this.isSyncing = false;
+                this.fileDropHidden = false;
+                this.abortUploads = [];
+                this.redraw();
+            }
+        });
     }
     getFile(fileInfo) {
         const { options = {} } = this.component;
@@ -781,7 +1015,23 @@ class FileComponent extends Field_1.default {
             this.refs.fileBrowse.focus();
         }
     }
-    destroy(all = false) {
+    beforeSubmit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (!this.autoSync) {
+                    return Promise.resolve();
+                }
+                yield this.syncFiles();
+                return this.shouldSyncFiles
+                    ? Promise.reject('Synchronization is failed')
+                    : Promise.resolve();
+            }
+            catch (error) {
+                return Promise.reject(error.message);
+            }
+        });
+    }
+    destroy(all) {
         this.stopVideo();
         super.destroy(all);
     }