diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
index 28c4fd351..b3ae5b60f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
 import { FileAttributeEncodingTypes, IComponentMapping } from '@red/domain';
 import { FormBuilder, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,6 +22,7 @@ interface DialogResult {
     file: Blob;
     encoding: string;
     delimiter: string;
+    fileName?: string;
 }
 
 @Component({
@@ -63,9 +64,10 @@ export class AddEditComponentMappingDialogComponent
     async ngOnInit() {
         if (this.data.mapping?.fileName) {
             this.activeFile = { name: this.data.mapping.fileName } as File;
-            const file = await firstValueFrom(
+            const fileContent = await firstValueFrom(
                 this._componentMappingService.getComponentMappingFile(this.data.dossierTemplateId, this.data.mapping.id),
             );
+            const file = new Blob([fileContent.body as Blob], { type: 'text/csv' });
             this.form.get('file').setValue(file);
             this.initialFormValue = this.form.getRawValue();
         }
@@ -76,7 +78,8 @@ export class AddEditComponentMappingDialogComponent
     }
 
     save() {
-        this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue() });
+        const fileName = document.getElementById('file-name-label')?.textContent;
+        this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue(), fileName });
     }
 
     #getForm(): UntypedFormGroup {
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
index 09ef65805..b451d54b3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
@@ -99,8 +99,8 @@ export default class ComponentMappingsScreenComponent extends ListingComponent<C
         const result = await dialog.result();
         if (result) {
             this._loadingService.start();
-            const { id, name, encoding, delimiter } = result;
-            const newMapping = { id, name, encoding, delimiter };
+            const { id, name, encoding, delimiter, fileName } = result;
+            const newMapping = { id, name, encoding, delimiter, fileName };
             await firstValueFrom(
                 this._componentMappingService.createUpdateComponentMapping(this.#dossierTemplateId, newMapping, result.file),
             );
diff --git a/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts b/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts
index b124f0681..76be4dd06 100644
--- a/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/component-mappings.service.ts
@@ -22,7 +22,7 @@ export class ComponentMappingsService extends EntitiesService<IComponentMapping,
         file: Blob,
     ): Observable<IComponentMapping> {
         const formParams = new FormData();
-        formParams.append('file', file);
+        formParams.append('file', file, componentMapping.fileName);
 
         const queryParams: List<QueryParam> = [
             { key: 'name', value: componentMapping.name },
diff --git a/libs/common-ui b/libs/common-ui
index 98ac49fbc..9df87dc21 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 98ac49fbc81bb9989c14a8ca06c11d98ed042c86
+Subproject commit 9df87dc218ea8090159059a7bad184aaaeba8854