FIO-9866: added fileUploadingEnd and fielUplaodingStart events back

src/components/file/File.js

@@ -1038,7 +1038,7 @@ export default class FileComponent extends Field {
   }
 
   async uploadFile(fileToSync) {
-    return await this.fileService.uploadFile(
+    const filePromise = this.fileService.uploadFile(
       fileToSync.storage,
       fileToSync.file,
       fileToSync.name,
@@ -1050,14 +1050,17 @@ export default class FileComponent extends Field {
       fileToSync.fileKey,
       fileToSync.groupPermissions,
       fileToSync.groupResourceId,
-      () => {},
+      () => {
+        this.emit('fileUploadingStart', filePromise);
+      },
       // Abort upload callback
       (abort) => this.abortUploads.push({
         id: fileToSync.id,
         abort,
       }),
       this.getMultipartOptions(fileToSync),
     );
+    return await filePromise;
   }
 
   async upload() {
@@ -1081,6 +1084,7 @@ export default class FileComponent extends Field {
 
         fileInfo.originalName = fileToSync.originalName;
         fileInfo.hash = fileToSync.hash;
+        this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
       }
       catch (response) {
         fileToSync.status = 'error';
@@ -1090,7 +1094,7 @@ export default class FileComponent extends Field {
           : response.type === 'abort'
             ? this.t('Request was aborted')
             : response.toString();
-
+        this.emit('fileUploadingEnd', Promise.reject(response));
         this.emit('fileUploadError', {
           fileToSync,
           response,

test/forms/formWithFileComponent.js

@@ -0,0 +1,51 @@
+export const form = {
+  _id: '67e12a989ec98121f71fa67e',
+  title: 'file upload',
+  name: 'fileUpload',
+  path: 'fileupload',
+  type: 'form',
+  display: 'form',
+  owner: '637b2e6b48c1227e60b1f910',
+  components: [
+    {
+      label: 'Upload',
+      tableView: false,
+      storage: 'base64',
+      webcam: false,
+      capture: false,
+      fileTypes: [
+        {
+          label: '',
+          value: '',
+        },
+      ],
+      validateWhenHidden: false,
+      key: 'file',
+      type: 'file',
+      input: true,
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+  project: '67caad5b0416ffb92916c9ad',
+  created: '2025-03-24T09:49:12.892Z',
+  modified: '2025-03-25T08:25:20.906Z',
+  machineName: 'bcmuuifnsbrkvdx:fileUpload',
+};
+
+export const files = [
+  {
+    lastModified: 1742889250910,
+    lastModifiedDate: new Date(),
+    name: 'textFieldCalendar (1).json',
+    size: 34387,
+    type: 'application/json',
+    webkitRelativePath: '',
+  },
+];

test/unit/File.unit.js

@@ -4,6 +4,7 @@ import FileComponent from '../../src/components/file/File';
 import { comp1, comp2 } from './fixtures/file';
 import { Formio } from '../../src/Formio';
 import _ from 'lodash';
+import * as testFileUpload from '../forms/formWithFileComponent';
 
 describe('File Component', () => {
   it('Should create a File Component', () => {
@@ -364,4 +365,37 @@ describe('File Component', () => {
       component.handleFilesToUpload([file]);
     });
   });
+
+  it('Should emit fileUploadingStart and fileUploadingEnd events', (done) => {
+      Formio.createForm(document.createElement('div'), testFileUpload.form)
+        .then((form) => {
+          const controlParameters = {
+            uploadStart: 0,
+            uploadStartPromiseEnd: 0,
+            uploadEnd: 0,
+            uploadEndPromiseEnd: 0,
+          };
+
+          form.on('fileUploadingStart', (uploadPromise) => {
+            ++controlParameters.uploadStart;
+            console.log('start'); 
+            uploadPromise.catch(() => {}).finally(() => ++controlParameters.uploadStartPromiseEnd);
+          });
+          form.on('fileUploadingEnd', (uploadPromise) => {
+            ++controlParameters.uploadEnd;
+            console.log('end'); 
+            uploadPromise.catch(() => {}).finally(() => ++controlParameters.uploadEndPromiseEnd);
+          });
+
+          const fileComponent = form.getComponent('file');
+          fileComponent.handleFilesToUpload(testFileUpload.files);
+
+          setTimeout(() => {
+            _.each(controlParameters, (value, param) => {
+              assert.equal(value, 1, `The ${param} should be equal to 1`)
+            })
+            done();
+          }, 300);
+        });
+  });
 });