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 b3ae5b60f..2542e31eb 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
@@ -73,19 +73,20 @@ export class AddEditComponentMappingDialogComponent
         }
     }
 
-    fileChanged(file: Blob) {
+    fileChanged(file: File) {
         this.form.get('file').setValue(file);
+        this.form.get('fileName').setValue(file?.name);
     }
 
     save() {
-        const fileName = document.getElementById('file-name-label')?.textContent;
-        this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue(), fileName });
+        this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue() });
     }
 
     #getForm(): UntypedFormGroup {
         return this._formBuilder.group({
             name: [this.data?.mapping?.name, Validators.required],
             file: [null, Validators.required],
+            fileName: [this.data?.mapping?.fileName, Validators.required],
             encoding: this.encodingTypeOptions.find(e => e === this.data?.mapping?.encoding) ?? this.encodingTypeOptions[0],
             delimiter: [this.data?.mapping?.delimiter ?? ',', Validators.required],
         });