From 6b62870bb265940162f54e50bf2cd818bad4966d Mon Sep 17 00:00:00 2001
From: Maxime Robert <maxime.robert@smile.fr>
Date: Thu, 5 Feb 2026 10:40:30 +0100
Subject: [PATCH] WIP

---
 .../archive-search.component.spec.ts          |   2 -
 .../archive-search.component.ts               |   1 -
 .../transfer-acknowledgment.component.html    | 159 ++++++----------
 .../transfer-acknowledgment.component.scss    | 149 ---------------
 .../transfer-acknowledgment.component.spec.ts | 128 ++++---------
 .../transfer-acknowledgment.component.ts      | 158 ++++++----------
 .../src/app/archive/archive.module.ts         |   2 -
 .../update-units-metadata.component.html      |   8 +-
 .../update-units-metadata.component.scss      |  92 ----------
 .../create-project.component.html             |  49 +++--
 .../create-project.component.scss             | 173 ------------------
 .../projects/collect/src/assets/i18n/en.json  |   1 -
 .../projects/collect/src/assets/i18n/fr.json  |   1 -
 .../display-file/display-file.component.html  |   7 +-
 .../display-file/display-file.component.ts    |   1 +
 .../file-selector.component.html              |   2 +-
 .../file-selector/file-selector.component.ts  |   4 +-
 17 files changed, 173 insertions(+), 764 deletions(-)
 delete mode 100644 ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.scss

diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.spec.ts b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.spec.ts
index 87af23d93fa..9e67cda109c 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.spec.ts
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.spec.ts
@@ -218,12 +218,10 @@ describe('ArchiveSearchComponent', () => {
       expect(archiveServiceStub.hasArchiveSearchRole).toHaveBeenCalled();
     });
     it('should open a modal with TransferAcknowledgmentComponent', () => {
-      component.accessContractId = 'accessContract';
       component.showAcknowledgmentTransferForm();
       expect(matDialogSpy.open).toHaveBeenCalledWith(TransferAcknowledgmentComponent, {
         disableClose: true,
         data: {
-          accessContract: 'accessContract',
           tenantIdentifier: '1',
         },
       });
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.ts b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.ts
index 5fdc6c79115..0d9697301dc 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.ts
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.ts
@@ -1448,7 +1448,6 @@ export class ArchiveSearchComponent implements OnInit, OnChanges, OnDestroy, Aft
     const dialogRef = this.dialog.open(TransferAcknowledgmentComponent, {
       disableClose: true,
       data: {
-        accessContract: this.accessContractId,
         tenantIdentifier: this.tenantIdentifier.toString(),
       },
     });
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.html b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.html
index bc9ea98b9b6..8ea22711624 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.html
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.html
@@ -3,33 +3,33 @@
   [title]="'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.TITLE_FIRST_STEP' | translate"
 ></vitamui-dialog-header>
 
-<vitamui-stepper #stepper [selectedIndex]="stepIndex" (selectionChange)="stepIndex = $event.selectedIndex">
+<vitamui-stepper #stepper>
   <!-- Step 1 -->
   <cdk-step>
     <mat-dialog-content>
-      <div>
-        <h4>
-          {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.DOWNLOAD_ATR_FILE' | translate }}
-          <i
-            class="vitamui-icon vitamui-icon-info"
-            [vitamuiTooltip]="'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.DOWNLOAD_ATR_FILE_TEXT' | translate"
-          ></i>
-        </h4>
+      <div class="text large bold my-2">
+        {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.DOWNLOAD_ATR_FILE' | translate }}
+        <i
+          class="vitamui-icon vitamui-icon-info"
+          [vitamuiTooltip]="'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.DOWNLOAD_ATR_FILE_TEXT' | translate"
+        ></i>
       </div>
 
-      <div *ngIf="isLoadingData; then loadingMode; else dragAndDropArea"></div>
+      <vitamui-file-selector
+        [formControl]="atrControl"
+        [maxSizeInBytes]="FILE_MAX_SIZE"
+        [extensions]="[ATR_EXTENSION]"
+        [fileValidators]="atrContentValidator"
+        [errorMessageMap]="{
+          fileBadFormat: 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.FILE_BAD_FORMAT',
+          atrNotValid: 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ATR_NOT_VALID',
+        }"
+      />
     </mat-dialog-content>
 
     <mat-dialog-actions>
-      <button
-        (click)="validateAndParseXmlFile()"
-        [disabled]="isDisabled || hasError || hasFileSizeError || isAtrNotValid || isLoadingData"
-        class="btn primary"
-        type="button"
-      >
-        {{ 'COMMON.NEXT' | translate }}
-      </button>
-      <button (click)="onClose()" class="btn cancel link" type="button" [disabled]="isLoadingData">
+      <vitamui-next-step [disabled]="atrControl.invalid || atrControl.pending" />
+      <button (click)="onClose()" class="btn cancel link" type="button">
         {{ 'COMMON.UNDO' | translate }}
       </button>
     </mat-dialog-actions>
@@ -39,40 +39,40 @@ <h4>
   <cdk-step>
     <mat-dialog-content>
       <div>
-        <p class="detail-text">
+        <p class="text normal bold primary">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.OPERATION_MESSAGE_IDENTIFIER' | translate }}
         </p>
         <p>{{ transfertDetails.messageRequestIdentifier }}</p>
       </div>
 
       <div>
-        <p class="detail-text">
+        <p class="text normal bold primary">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.TRANSFER_REALISATION_DATE' | translate }}
         </p>
         <p>{{ transfertDetails.date | dateTime: 'dd/MM/yyyy' }}</p>
       </div>
 
       <div>
-        <p class="detail-text">{{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ENTRY_CONTRACT' | translate }}</p>
+        <p class="text normal bold primary">{{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ENTRY_CONTRACT' | translate }}</p>
         <p>{{ transfertDetails.archivalAgreement }}</p>
       </div>
 
       <div>
-        <p class="detail-text">
+        <p class="text normal bold primary">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ARCHIVAL_AGENCY_IDENTIFIER' | translate }}
         </p>
         <p>{{ transfertDetails.archivalAgency }}</p>
       </div>
 
       <div>
-        <p class="detail-text">
+        <p class="text normal bold primary">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.TRANSFERRING_AGENCY_IDENTIFIER' | translate }}
         </p>
         <p>{{ transfertDetails.transferringAgency }}</p>
       </div>
 
       <div>
-        <p class="detail-text">
+        <p class="text normal bold primary">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.TRANSFER_ACKNOWLEDGMENT_STATUS' | translate }}
         </p>
         <p>{{ transfertDetails.archiveTransferReply }}</p>
@@ -81,9 +81,7 @@ <h4>
 
     <mat-dialog-actions>
       <div>
-        <button (click)="goToNextStep()" class="btn primary" type="button">
-          {{ 'COMMON.NEXT' | translate }}
-        </button>
+        <vitamui-next-step />
         <button (click)="onCancel()" class="btn cancel link" type="button">
           {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CANCEL_ACTION' | translate }}
         </button>
@@ -95,7 +93,32 @@ <h4>
   <!-- Step 3 -->
   <cdk-step>
     <mat-dialog-content>
-      <div *ngIf="isSubmitBtnDisabled; then loadingMode; else transferReplyStatusDetails"></div>
+      @if (isSubmitBtnDisabled) {
+        <div class="vitamui-min-content">
+          <mat-spinner class="vitamui-spinner large"></mat-spinner>
+        </div>
+      } @else {
+        <div>
+          <p class="text normal bold primary">
+            {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ACKNOWLEDGMENT_TRANSFER_CONTROL' | translate }}
+          </p>
+          <p class="text medium bold">
+            {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ACKNOWLEDGMENT_TRANSFER_REPLY_CODE' | translate }}
+            {{ transfertDetails.archiveTransferReply }}
+          </p>
+          <p class="text medium bold">
+            @if (transfertDetails.archiveTransferReply === 'OK') {
+              {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_SUCCESS_TRANSFER' | translate }}
+            }
+            @if (transfertDetails.archiveTransferReply === 'WARNING') {
+              {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_SUCCESS_TRANSFER' | translate }}
+            }
+            @if (transfertDetails.archiveTransferReply === 'KO') {
+              {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_FAILURE_TRANSFER' | translate }}
+            }
+          </p>
+        </div>
+      }
     </mat-dialog-content>
 
     <mat-dialog-actions>
@@ -129,81 +152,3 @@ <h4>
     </button>
   </mat-dialog-actions>
 </ng-template>
-
-<ng-template #loadingMode>
-  <div class="vitamui-min-content">
-    <mat-spinner class="vitamui-spinner large"></mat-spinner>
-  </div>
-</ng-template>
-
-<ng-template #transferReplyStatusDetails>
-  <div>
-    <p class="detail-text">
-      {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ACKNOWLEDGMENT_TRANSFER_CONTROL' | translate }}
-    </p>
-    <p class="text-size">
-      {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ACKNOWLEDGMENT_TRANSFER_REPLY_CODE' | translate }}
-      {{ transfertDetails.archiveTransferReply }}
-    </p>
-    <p class="text-size" [ngSwitch]="transfertDetailsCode">
-      <ng-container *ngSwitchCase="'OK'"> {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_SUCCESS_TRANSFER' | translate }}</ng-container>
-      <ng-container *ngSwitchCase="'WARNING'">
-        {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_SUCCESS_TRANSFER' | translate }}
-      </ng-container>
-      <ng-container *ngSwitchCase="'KO'">
-        {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.CONFIRM_FAILURE_TRANSFER' | translate }}
-      </ng-container>
-    </p>
-  </div>
-</ng-template>
-
-<ng-template #dragAndDropArea>
-  <div class="d-flex">
-    <div class="drag-and-drop-area" vitamuiCommonDragAndDrop (fileToUploadEmitter)="handleFile($event)">
-      <div *ngIf="fileName && fileSize > 0 && fileSizeString" class="drag-container">
-        <div class="file-info-class">
-          {{ fileName }}
-          <span class="text light"> | {{ fileSizeString }} </span>
-          <i class="material-icons success-icon" *ngIf="!hasError">check_circle</i>
-          <div>
-            <span class="text danger bold">{{ message }} </span>
-            <i class="material-icons error-icon" *ngIf="hasError">cancel </i>
-          </div>
-
-          <div *ngIf="hasFileSizeError">
-            <div>
-              <span class="text danger bold"> {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.AUTHORIZED_SIZE' | translate }}</span>
-              <i class="material-icons error-icon">cancel </i>
-            </div>
-          </div>
-
-          <div *ngIf="isAtrNotValid">
-            <div>
-              <span class="text danger bold"> {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ATR_NOT_VALID' | translate }}</span>
-              <i class="material-icons error-icon">cancel </i>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <input type="file" #atrXmlFile class="input-file" (change)="handleFile($event.target.files)" />
-
-      <div class="drop-area">
-        <div class="atr-drop">{{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.DRAG_AND_DROP' | translate }}<br /></div>
-
-        <div class="atr-drop">
-          <div class="upload">
-            <span class="url-select" (click)="addTransferAtrFile()">
-              {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.BROWSE' | translate }}</span
-            >
-          </div>
-        </div>
-        <div class="atr-drop-small">
-          <span> {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.ACCEPTED_FORMAT' | translate }}</span
-          ><br /><br />
-          <span> {{ 'ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.MAX_SIZE' | translate }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</ng-template>
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.scss b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.scss
deleted file mode 100644
index f4062908c60..00000000000
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-$field-spacing: 15px;
-
-h2 {
-  font-size: 23px;
-  line-height: 46px;
-  margin-top: 10px;
-}
-
-h4 {
-  font-size: 19px;
-  line-height: 26px;
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-
-.input-file {
-  display: none;
-}
-
-.inline-label {
-  padding-top: 5px;
-}
-
-button.back {
-  margin-top: 60px;
-}
-
-.url-select {
-  cursor: pointer;
-  font-size: 30px;
-  color: var(--vitamui-primary);
-  letter-spacing: 0.1px;
-  white-space: nowrap;
-  transform-origin: left;
-  transition: transform 150ms ease-out;
-}
-
-.on-over {
-  border: 2px solid var(--vitamui-secondary);
-
-  p {
-    color: var(--vitamui-white);
-  }
-
-  .drop-area {
-    background: var(--vitamui-grey-400);
-    opacity: 0.9;
-    color: var(--vitamui-white);
-  }
-}
-
-.drag-container {
-  width: 100%;
-  height: 160px;
-  vertical-align: middle;
-  text-align: center;
-}
-
-.drop-area {
-  text-align: center;
-  height: 156px;
-}
-
-.atr-drop {
-  font-size: 19px;
-  line-height: 26px;
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-.atr-drop-small {
-  text-align: center;
-  margin-top: 190px;
-  margin-bottom: 10px;
-  color: var(--vitamui-primary);
-  font-style: normal;
-  font-weight: bold;
-  font-size: 15px;
-  line-height: 10px;
-}
-.error-message {
-  color: var(--vitamui-red);
-  font-size: 16px;
-  margin-top: 80px;
-}
-
-.message-success {
-  padding-bottom: 50%;
-  padding: 34px 0px 34px 34px;
-}
-.success-icon {
-  color: var(--vitamui-green);
-  font-size: 50px;
-}
-
-.error-icon {
-  color: var(--vitamui-red);
-  font-size: 50px;
-}
-
-.file-info-container {
-  padding: 34px 0px 34px 34px;
-  display: flex;
-  flex-direction: row;
-  max-width: 50%;
-}
-
-.file-info-class {
-  line-height: 20px;
-  text-align: center;
-  margin-top: 50px;
-  margin-bottom: 10px;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.font-class-file {
-  font-size: 13px;
-}
-
-.drag-and-drop-area {
-  width: 100%;
-  height: 300px;
-  border: 2px dashed var(--vitamui-primary);
-  border-radius: 6px;
-  background: var(--vitamui-white);
-  overflow: hidden;
-
-  p {
-    padding-top: 20px;
-  }
-}
-
-.text-size {
-  font-size: 15px;
-  font-family: Mulish;
-  font-weight: bold;
-}
-
-.detail-text {
-  font-family: Mulish;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 14px;
-  color: var(--vitamui-primary) !important;
-}
-.btn-up {
-  margin-top: 0px;
-}
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.spec.ts b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.spec.ts
index f2248539475..c32661630e6 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.spec.ts
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.spec.ts
@@ -45,6 +45,8 @@ import { ArchiveService } from '../../archive.service';
 import { TransferAcknowledgmentComponent } from './transfer-acknowledgment.component';
 import { DecimalPipe } from '@angular/common';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CdkStep } from '@angular/cdk/stepper';
 
 const translations: any = { TEST: 'Mock translate test' };
 
@@ -84,8 +86,11 @@ describe('TransferAcknowledgmentComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TransferAcknowledgmentComponent, MockDateTimePipe],
+      declarations: [MockDateTimePipe],
       imports: [
+        TransferAcknowledgmentComponent,
+        CdkStep,
+        NoopAnimationsModule,
         InjectorModule,
         LoggerModule.forRoot(),
         TranslateModule.forRoot({
@@ -118,77 +123,23 @@ describe('TransferAcknowledgmentComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('All the parameters must be initialized', () => {
-    // When
-    component.initializeParameters();
-
-    // Then
-    expect(component.transfertDetailsCode).toBeNull();
-    expect(component.isDisabled).toBeFalsy();
-    expect(component.hasFileSizeError).toBeFalsy();
-    expect(component.isAtrNotValid).toBeFalsy();
-    expect(component.transfertDetails).toEqual({});
-    expect(component.hasError).toBeFalsy();
-    expect(component.message).toBeNull();
-  });
-
-  it('Should return true when the file extension is xml ', () => {
-    // Given
-    const fileName = 'ATR_aeeaaaaaaghduohdabkogamdgezb2taaaaaq.xml';
-
-    // When
-    const response: boolean = component.checkFileExtension(fileName);
-
-    // Then
-    expect(response).toBeTruthy();
-  });
-
-  it('Should have an accessContract ', () => {
-    expect(component.data.accessContract).not.toBeNull();
-  });
-
-  it('Should return false when the file extension is not xml ', () => {
-    // Given
-    const fileName = 'SIP-recherche-perf.zip';
-    // When
-    const response: boolean = component.checkFileExtension(fileName);
-    // Then
-    expect(response).toBeFalsy();
-  });
-
-  it('Should have a tenant identifier ', () => {
-    expect(component.data.tenantIdentifier).not.toBeNull();
-  });
-
-  it('Should return true if the extension file is xml ', () => {
-    const contents = 'text for test';
-    const blob = new Blob([contents], { type: 'text/plain' });
-    const file = new File([blob], 'fileExample.xml', { type: 'text/plain' });
-    expect(component.checkFileExtension(file.name)).toBeTruthy();
-  });
-
   it('should call transferAcknowledgment()', () => {
     const archiveService = TestBed.inject(ArchiveService);
     const matDialogRef = TestBed.inject(MatDialogRef);
-    component.applyTransferAcknowledgment();
-    expect(archiveService.transferAcknowledgment).toHaveBeenCalled();
-    expect(matDialogRef.close).toHaveBeenCalled();
-  });
-
-  it('should return KO as status()', () => {
-    // Given
-    component.transfertDetails = { archiveTransferReply: '\n\t\tKO\n\t' };
 
-    // When
-    component.goToNextStep();
+    const file = new File([''], '');
+    component.atrControl.setValue([file]);
+    component.data.tenantIdentifier = '42';
 
-    // Then
-    expect(component.transfertDetailsCode).not.toBeNull();
-    expect(component.transfertDetailsCode).toEqual('KO');
+    component.applyTransferAcknowledgment();
+    expect(archiveService.transferAcknowledgment).toHaveBeenCalledWith('42', file);
+    expect(matDialogRef.close).toHaveBeenCalled();
   });
 
   it('should parseXmlToTransferDetails for valid XML', async () => {
-    const xmlOK = `<?xml version="1.0" encoding="UTF-8"?>
+    const xmlOK = new File(
+      [
+        `<?xml version="1.0" encoding="UTF-8"?>
 <ArchiveTransferReply xmlns="fr:gouv:culture:archivesdefrance:seda:v2.3"
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                       xsi:schemaLocation="fr:gouv:culture:archivesdefrance:seda:v2.3 seda-2.3/seda-2.3-main.xsd">
@@ -202,10 +153,13 @@ describe('TransferAcknowledgmentComponent', () => {
     <TransferringAgency>
         <Identifier>Identifier5</Identifier>
     </TransferringAgency>
-</ArchiveTransferReply>`;
+</ArchiveTransferReply>`,
+      ],
+      'ok.xml',
+    );
 
-    await component.parseXmlToTransferDetails(xmlOK);
-    expect(component.isAtrNotValid).toBeFalse();
+    const errors = await component.atrContentValidator(xmlOK);
+    expect(errors).toBeFalsy();
     expect(component.transfertDetails).toEqual({
       messageRequestIdentifier: 'SIP SEDA de test',
       date: '2024-06-04T12:56:58.824Z',
@@ -217,18 +171,21 @@ describe('TransferAcknowledgmentComponent', () => {
   });
 
   it('should parseXmlToTransferDetails for XML without ArchiveTransferReply', async () => {
-    const xmlNoArchiveTransferReply = '<toto></toto>';
+    const xmlNoArchiveTransferReply = new File(['<toto></toto>'], 'xmlNoArchiveTransferReply.xml');
 
-    await component.parseXmlToTransferDetails(xmlNoArchiveTransferReply);
-    expect(component.isAtrNotValid).toBeTrue();
+    const errors = await component.atrContentValidator(xmlNoArchiveTransferReply);
+    expect(errors).toBeTruthy();
+    expect(errors.fileErrors.atrNotValid).toBeTruthy();
+    expect(errors.controlErrors.invalidFiles).toBeTruthy();
   });
 
   it('should parseXmlToTransferDetails for invalid XML', async () => {
-    const xmlBadFormat = 'This is not XML';
+    const xmlBadFormat = new File(['This is not XML'], 'xmlBadFormat.xml');
 
-    await component.parseXmlToTransferDetails(xmlBadFormat);
-    expect(component.hasError).toBeTrue();
-    expect(component.message).toBeTruthy();
+    const errors = await component.atrContentValidator(xmlBadFormat);
+    expect(errors).toBeTruthy();
+    expect(errors.fileErrors.fileBadFormat).toBeTruthy();
+    expect(errors.controlErrors.invalidFiles).toBeTruthy();
   });
 
   describe('DOM', () => {
@@ -240,24 +197,6 @@ describe('TransferAcknowledgmentComponent', () => {
       expect(formTitlesHtmlElements[0].textContent).toContain('ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.OPERATION_MESSAGE_IDENTIFIER ');
     });
 
-    it('should emit handleFileInput function when a file is added ', () => {
-      // Given
-      const contents = '<a>test</a>';
-      const blob = new Blob([contents], { type: 'text/plain' });
-      const file = new File([blob], 'atrFile.xml', { type: 'text/plain' });
-      component.fileToUpload = file;
-      spyOn(component, 'handleFile');
-      const nativeElement = fixture.nativeElement;
-      const checkBox = nativeElement.querySelector('input[type=file]');
-
-      // When
-      checkBox.dispatchEvent(new Event('change'));
-      fixture.detectChanges();
-
-      // Then
-      expect(component.handleFile).toHaveBeenCalled();
-    });
-
     it('should have an input file', () => {
       const nativeElement = fixture.nativeElement;
       const elInput = nativeElement.querySelector('input[type=file]');
@@ -270,11 +209,6 @@ describe('TransferAcknowledgmentComponent', () => {
       expect(matDialogSpyTest.close).toHaveBeenCalled();
     });
 
-    it('should have 3 cdk steps', () => {
-      const elementCdkStep = fixture.nativeElement.querySelectorAll('cdk-step');
-      expect(elementCdkStep.length).toBe(3);
-    });
-
     it('should call close for all open dialogs', () => {
       const matDialogSpyTest = TestBed.inject(MatDialogRef);
       component.onConfirm();
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.ts b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.ts
index 5e6bcc350af..89e77b11079 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.ts
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/transfer-acknowledgment/transfer-acknowledgment.component.ts
@@ -34,13 +34,27 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { Component, Inject, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { TranslateService } from '@ngx-translate/core';
+import { Component, Inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
-import { ApplicationId, BytesPipe, Logger, SnackBarService } from 'vitamui-library';
+import {
+  ApplicationId,
+  DialogHeaderComponent,
+  FileSelectorComponent,
+  FileValidationErrors,
+  Logger,
+  PipesModule,
+  readFileContent,
+  SnackBarService,
+  VitamUICommonModule,
+  VitamUILibraryModule,
+} from 'vitamui-library';
 import { ArchiveService } from '../../archive.service';
 import { XMLParser } from 'fast-xml-parser';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { CdkStep } from '@angular/cdk/stepper';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 const FILE_MAX_SIZE = 10737418240;
 const ATR_EXTENSION = '.xml';
@@ -48,37 +62,32 @@ const ATR_EXTENSION = '.xml';
 @Component({
   selector: 'app-transfer-acknowledgment',
   templateUrl: './transfer-acknowledgment.component.html',
-  styleUrls: ['./transfer-acknowledgment.component.scss'],
-  standalone: false,
+  imports: [
+    CdkStep,
+    DialogHeaderComponent,
+    FileSelectorComponent,
+    MatDialogActions,
+    MatDialogContent,
+    MatProgressSpinner,
+    PipesModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    VitamUICommonModule,
+    VitamUILibraryModule,
+  ],
 })
-export class TransferAcknowledgmentComponent implements OnInit, OnDestroy {
-  stepIndex = 0;
-  fileSize = 0;
-
-  isAtrNotValid = false;
-  isDisabled = true;
-  hasFileSizeError = false;
-  hasError = false;
-  isLoadingData = false;
+export class TransferAcknowledgmentComponent implements OnDestroy {
   isSubmitBtnDisabled = false;
 
-  fileToUpload: File = null;
   transfertDetails: any = {};
 
-  message: string;
-  fileName: string;
-  fileSizeString: string;
-  accessContract: string;
-  tenantIdentifier: string;
-  transfertDetailsCode: string;
-
   transferAcknowledgementSubscription: Subscription;
 
+  atrControl = new FormControl<File[]>(undefined, [Validators.required]);
+
   @ViewChild('confirmDeleteTransferAcknowledgmentDialog', { static: true })
   confirmDeleteTransferAcknowledgmentDialog: TemplateRef<TransferAcknowledgmentComponent>;
 
-  @ViewChild('atrXmlFile', { static: false }) atrXmlFile: any;
-
   constructor(
     public dialog: MatDialog,
     private dialogRef: MatDialogRef<TransferAcknowledgmentComponent>,
@@ -86,47 +95,40 @@ export class TransferAcknowledgmentComponent implements OnInit, OnDestroy {
     public logger: Logger,
     @Inject(MAT_DIALOG_DATA)
     public data: {
-      accessContract: string;
       tenantIdentifier: string;
     },
     private archiveSearchService: ArchiveService,
-    private translate: TranslateService,
-    private bytesPipe: BytesPipe,
     private snackBarService: SnackBarService,
   ) {}
 
-  async parseXmlToTransferDetails(xmlFileContent: string) {
-    this.isLoadingData = true;
+  atrContentValidator = async (file: File): Promise<FileValidationErrors> => {
+    const xmlFileContent = await readFileContent(file);
 
     const parser = new XMLParser();
     try {
       const parsedXml: { ArchiveTransferReply: any } = parser.parse(xmlFileContent, true);
       if (parsedXml.ArchiveTransferReply === undefined || parsedXml.ArchiveTransferReply === null) {
-        this.isAtrNotValid = true;
-        this.isLoadingData = false;
+        return {
+          fileErrors: { atrNotValid: true },
+          controlErrors: { invalidFiles: true },
+        };
       } else {
         this.transfertDetails.messageRequestIdentifier = parsedXml.ArchiveTransferReply?.MessageRequestIdentifier;
         this.transfertDetails.date = parsedXml.ArchiveTransferReply?.Date;
         this.transfertDetails.archivalAgreement = parsedXml.ArchiveTransferReply?.ArchivalAgreement;
         this.transfertDetails.archivalAgency = parsedXml.ArchiveTransferReply.ArchivalAgency?.Identifier;
         this.transfertDetails.transferringAgency = parsedXml.ArchiveTransferReply.TransferringAgency?.Identifier;
-        this.transfertDetails.archiveTransferReply = parsedXml.ArchiveTransferReply.ReplyCode;
-        this.isAtrNotValid = false;
-        this.stepIndex = this.stepIndex + 1;
-        this.isLoadingData = false;
+        this.transfertDetails.archiveTransferReply = parsedXml.ArchiveTransferReply.ReplyCode?.replace(/(\r\n|\n|\r)/gm, '')?.trim();
       }
     } catch (error: any) {
-      this.message = this.translate.instant('ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.FILE_BAD_FORMAT');
-      this.hasError = true;
-      this.isLoadingData = false;
       this.logger.error('Error with parsing the xml file :', error);
+      return {
+        fileErrors: { fileBadFormat: true },
+        controlErrors: { invalidFiles: true },
+      };
     }
-  }
-
-  ngOnInit(): void {
-    this.accessContract = this.data.accessContract;
-    this.tenantIdentifier = this.data.tenantIdentifier;
-  }
+    return null;
+  };
 
   ngOnDestroy(): void {
     this.transferAcknowledgementSubscription?.unsubscribe();
@@ -150,71 +152,12 @@ export class TransferAcknowledgmentComponent implements OnInit, OnDestroy {
     this.dialogRef.close(true);
   }
 
-  initializeParameters() {
-    this.isDisabled = false;
-    this.hasError = false;
-    this.hasFileSizeError = false;
-    this.message = null;
-    this.isAtrNotValid = false;
-    this.transfertDetails = {};
-    this.transfertDetailsCode = null;
-  }
-
-  private isFileList(files: FileList | File[]): files is FileList {
-    return files instanceof FileList;
-  }
-
-  private initializeFileToUpload(files: FileList | File[]) {
-    if (files) {
-      this.fileToUpload = this.isFileList(files) ? files.item(0) : files[0];
-      this.fileName = this.fileToUpload.name;
-      this.fileSize = this.fileToUpload.size;
-    }
-  }
-
-  handleFile(files: FileList | File[]) {
-    this.initializeParameters();
-    this.initializeFileToUpload(files);
-
-    this.fileSizeString = this.bytesPipe.transform(this.fileSize);
-
-    if (!this.checkFileExtension(this.fileName)) {
-      this.message = this.translate.instant('ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.FILE_BAD_FORMAT');
-      this.hasError = true;
-    } else {
-      if (this.fileSize > FILE_MAX_SIZE) {
-        this.logger.error(this.translate.instant('ARCHIVE_SEARCH.TRANSFER_ACKNOWLEDGMENT.AUTHORIZED_SIZE'));
-        this.hasFileSizeError = true;
-      }
-    }
-  }
-
-  addTransferAtrFile() {
-    this.atrXmlFile.nativeElement.click();
-  }
-
-  checkFileExtension(fileName: string): boolean {
-    return fileName.endsWith(ATR_EXTENSION);
-  }
-
-  goToNextStep() {
-    this.stepIndex = this.stepIndex + 1;
-    this.transfertDetailsCode = this.transfertDetails.archiveTransferReply.replace(/(\r\n|\n|\r)/gm, '').trim();
-  }
-
-  // Step 1 :
-  validateAndParseXmlFile() {
-    if (this.fileToUpload && !this.hasError && !this.hasFileSizeError) {
-      this.isLoadingData = true;
-      this.fileToUpload.text().then((xmlFileContent) => this.parseXmlToTransferDetails(xmlFileContent));
-    }
-  }
-
   // Step 3 :
   applyTransferAcknowledgment() {
     this.isSubmitBtnDisabled = true;
+    const atrFile = this.atrControl.value[0];
     this.transferAcknowledgementSubscription = this.archiveSearchService
-      .transferAcknowledgment(this.tenantIdentifier, this.fileToUpload)
+      .transferAcknowledgment(this.data.tenantIdentifier, atrFile)
       .subscribe(
         (operationId) => {
           this.dialogRef.close(true);
@@ -238,4 +181,7 @@ export class TransferAcknowledgmentComponent implements OnInit, OnDestroy {
         },
       );
   }
+
+  protected readonly FILE_MAX_SIZE = FILE_MAX_SIZE;
+  protected readonly ATR_EXTENSION = ATR_EXTENSION;
 }
diff --git a/ui/ui-frontend/projects/archive-search/src/app/archive/archive.module.ts b/ui/ui-frontend/projects/archive-search/src/app/archive/archive.module.ts
index 932fa7d7f84..2deed251120 100644
--- a/ui/ui-frontend/projects/archive-search/src/app/archive/archive.module.ts
+++ b/ui/ui-frontend/projects/archive-search/src/app/archive/archive.module.ts
@@ -88,7 +88,6 @@ import { SearchCriteriaListComponent } from './archive-search/search-criteria-li
 import { SearchCriteriaSaverComponent } from './archive-search/search-criteria-saver/search-criteria-saver.component';
 import { SimpleCriteriaSearchComponent } from './archive-search/simple-criteria-search/simple-criteria-search.component';
 import { TitleAndDescriptionCriteriaSearchComponent } from './archive-search/title-and-description-criteria-search/title-and-description-criteria-search.component';
-import { TransferAcknowledgmentComponent } from './archive-search/transfer-acknowledgment/transfer-acknowledgment.component';
 import { ArchiveComponent } from './archive.component';
 import { CriteriaSearchComponent } from './criteria-search/criteria-search.component';
 import { ClassificationTreeComponent } from './filing-holding-scheme/classification-tree/classification-tree.component';
@@ -162,7 +161,6 @@ import { ConfirmActionModule } from './archive-search/search-criteria-list/confi
     SimpleCriteriaSearchComponent,
     StorageRuleSearchComponent,
     TitleAndDescriptionCriteriaSearchComponent,
-    TransferAcknowledgmentComponent,
     TransferRequestModalComponent,
     UnlockCategoryInheritanceComponent,
     UnlockRulesInheritanceComponent,
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.html b/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.html
index fe0e5b85257..e7ce21f9a64 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.html
+++ b/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.html
@@ -4,11 +4,9 @@
   <!-- Step 1 -->
   <cdk-step>
     <mat-dialog-content>
-      <div>
-        <h4>
-          {{ 'COLLECT.UPDATE_UNITS_METADATA.ACTION_SUB_TITLE' | translate }}
-          <i class="vitamui-icon vitamui-icon-info" [vitamuiTooltip]="'COLLECT.UPDATE_UNITS_METADATA.ACTION_DESCRIPTION' | translate"></i>
-        </h4>
+      <div class="text large bold my-2">
+        {{ 'COLLECT.UPDATE_UNITS_METADATA.ACTION_SUB_TITLE' | translate }}
+        <i class="vitamui-icon vitamui-icon-info" [vitamuiTooltip]="'COLLECT.UPDATE_UNITS_METADATA.ACTION_DESCRIPTION' | translate"></i>
       </div>
 
       @if (isLoadingData) {
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.scss b/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.scss
index 686f3465c95..32083703a82 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.scss
+++ b/ui/ui-frontend/projects/collect/src/app/collect/archive-search-collect/update-units-metadata/update-units-metadata.component.scss
@@ -1,95 +1,3 @@
-h2 {
-  font-size: 23px;
-  line-height: 46px;
-  margin-top: 10px;
-}
-
-h4 {
-  font-size: 19px;
-  line-height: 26px;
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-
-button.primary {
-  margin-right: 20px;
-}
-
-.drag-and-drop-area {
-  width: 100%;
-  height: 300px;
-  border: 2px dashed var(--vitamui-primary);
-  border-radius: 6px;
-  background: var(--vitamui-white);
-  overflow: hidden;
-
-  p {
-    padding-top: 20px;
-  }
-}
-
-.drag-container {
-  width: 100%;
-  height: 160px;
-  vertical-align: middle;
-  text-align: center;
-}
-
-.success-icon {
-  color: var(--vitamui-green);
-  font-size: 50px;
-}
-
-.input-file {
-  display: none;
-}
-
-.drop-csv-file-area {
-  text-align: center;
-  height: 156px;
-}
-
-.on-over {
-  border: 2px solid var(--vitamui-secondary);
-
-  p {
-    color: var(--vitamui-white);
-  }
-
-  .drop-csv-file-area {
-    background: var(--vitamui-grey-400);
-    opacity: 0.9;
-    color: var(--vitamui-white);
-  }
-}
-
-.csv-drop {
-  font-size: 19px;
-  line-height: 26px;
-  margin-top: 7px;
-  margin-bottom: 7px;
-}
-.csv-drop-small {
-  text-align: center;
-  margin-top: 190px;
-  margin-bottom: 10px;
-  color: var(--vitamui-primary);
-  font-style: normal;
-  font-weight: bold;
-  font-size: 15px;
-  line-height: 10px;
-}
-
-.url-select {
-  cursor: pointer;
-  font-size: 30px;
-  color: var(--vitamui-primary);
-  letter-spacing: 0.1px;
-  white-space: nowrap;
-  transform-origin: left;
-  transition: transform 150ms ease-out;
-}
-
 .scroll-area {
   overflow-y: auto;
   max-height: 264px;
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
index cf2f41093c8..7ba95ee1cb5 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
+++ b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.html
@@ -53,31 +53,30 @@
     <cdk-step>
       <mat-dialog-content>
         <div class="main-content">
-          <div class="toggle-right">
-            <vitamui-slide-toggle
-              class="fields-padding d-flex"
-              [checked]="true"
-              formControlName="connectedToArchivingSystem"
-              (change)="onConnectedToArchivingSystemChangeValue()"
-            >
-              {{
-                easOptions.length > 1
-                  ? ('COLLECT.PROJECT_REFERENTIAL_CONNECTION_BUTTON' | translate)
-                  : ('COLLECT.PROJECT_REFERENTIAL_CONNECTION_LOCALLY_BUTTON' | translate)
-              }}
-            </vitamui-slide-toggle>
-          </div>
-          <vitamui-select
-            formControlName="archivingSystem"
-            [placeholder]="'COLLECT.PROJECT_REFERENTIAL_EAS' | translate"
-            [searchBarPlaceHolder]="'COLLECT.PROJECT_REFERENTIAL_EAS' | translate"
-            (change)="onArchivingSystemChangeValue()"
-            [options]="easOptions"
-            [multiple]="false"
-            [required]="true"
-            [enableSearch]="true"
-            *ngIf="connectedToArchivingSystem && easOptions.length > 1"
-          ></vitamui-select>
+          <vitamui-slide-toggle
+            class="fields-padding d-flex"
+            [checked]="true"
+            formControlName="connectedToArchivingSystem"
+            (change)="onConnectedToArchivingSystemChangeValue()"
+          >
+            {{
+              easOptions.length > 1
+                ? ('COLLECT.PROJECT_REFERENTIAL_CONNECTION_BUTTON' | translate)
+                : ('COLLECT.PROJECT_REFERENTIAL_CONNECTION_LOCALLY_BUTTON' | translate)
+            }}
+          </vitamui-slide-toggle>
+          @if (connectedToArchivingSystem && easOptions.length > 1) {
+            <vitamui-select
+              formControlName="archivingSystem"
+              [placeholder]="'COLLECT.PROJECT_REFERENTIAL_EAS' | translate"
+              [searchBarPlaceHolder]="'COLLECT.PROJECT_REFERENTIAL_EAS' | translate"
+              (change)="onArchivingSystemChangeValue()"
+              [options]="easOptions"
+              [multiple]="false"
+              [required]="true"
+              [enableSearch]="true"
+            />
+          }
         </div>
       </mat-dialog-content>
       <mat-dialog-actions>
diff --git a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
index 7db3d676e1b..b4afa554e90 100644
--- a/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
+++ b/ui/ui-frontend/projects/collect/src/app/collect/projects/create-project/create-project.component.scss
@@ -1,176 +1,3 @@
-@use 'bootstrap/scss/bootstrap-grid';
-
-.header {
-  @extend .pt-5;
-  @extend .px-5;
-}
-
-.content {
-  .main-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .actions {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .line {
-      margin-bottom: 20px;
-    }
-
-    button {
-      margin-right: 20px;
-    }
-  }
-}
-
-.drag-and-drop-area {
-  width: 100%;
-  height: 25vh;
-  border: 2px dashed var(--vitamui-primary);
-  border-radius: 6px;
-  background: var(--vitamui-white);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  p {
-    padding-top: 20px;
-  }
-
-  .drag-container {
-    width: 100%;
-    vertical-align: middle;
-    text-align: center;
-    overflow-y: scroll;
-  }
-
-  .drop-area {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: center;
-    align-items: center;
-
-    .sip-drop {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.on-over {
-  border: 2px solid var(--vitamui-secondary);
-  height: 300px;
-
-  p {
-    color: var(--vitamui-white);
-  }
-
-  .drop-area {
-    height: 100%;
-    background: var(--vitamui-grey-400);
-    opacity: 0.9;
-    color: var(--vitamui-white);
-    overflow: hidden;
-  }
-}
-
-.input-file {
-  display: none;
-}
-
-.url-select {
-  cursor: pointer;
-  font-size: 30px;
-  color: var(--vitamui-primary);
-  letter-spacing: 0.1px;
-  white-space: nowrap;
-  transform-origin: left;
-  transition: transform 150ms ease-out;
-}
-
-.select {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--vitamui-primary);
-
-  .option {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--vitamui-primary);
-  }
-}
-
-.vitamui-chip-list {
-  width: 90%;
-  margin: 10px auto 0 auto;
-
-  .vitamui-chip {
-    width: 80%;
-    margin: 5px auto;
-    text-align: flex-start;
-  }
-
-  .file-size {
-    color: var(--vitamui-grey-600);
-    margin-left: 15px;
-  }
-}
-
-.mat-mdc-form-field {
-  label,
-  .mat-mdc-select {
-    padding: 0 20px !important;
-  }
-
-  label {
-    font-weight: 700;
-    color: var(--vitamui-primary);
-  }
-}
-
-.radio-group {
-  border: solid 1px var(--vitamui-primary);
-  display: flex;
-  flex: 1;
-  border-radius: 5px;
-  overflow: hidden;
-  text-align: right;
-
-  .radio-label {
-    color: var(--vitamui-primary);
-    display: flex;
-    flex: 1;
-    cursor: pointer;
-    font-weight: bold;
-    padding: 5px 20px;
-
-    .checked {
-      background: var(--vitamui-primary);
-    }
-  }
-}
-
-.toggle-right {
-  align-items: end;
-  justify-content: center;
-}
-
-.shrink {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 vitamui-common-accordion ::ng-deep {
   .header,
   .content {
diff --git a/ui/ui-frontend/projects/collect/src/assets/i18n/en.json b/ui/ui-frontend/projects/collect/src/assets/i18n/en.json
index 3b11e24a281..7b5d4e8c6b9 100644
--- a/ui/ui-frontend/projects/collect/src/assets/i18n/en.json
+++ b/ui/ui-frontend/projects/collect/src/assets/i18n/en.json
@@ -18,7 +18,6 @@
       "ADD_FILE": "Drag and drop",
       "BROWSE": "or Browse",
       "ACCEPTED_FORMAT": "Accepted format: csv",
-      "FILE_BAD_FORMAT": "The uploaded file is not in the correct format",
       "SUCCESS_MESSAGE": "The metadata update operation was successfully processed",
       "WAIT_MESSAGE": "The operation is in progress, please do not shut down or refresh your browser",
       "ACTION_DELETE": "Delete archive unit",
diff --git a/ui/ui-frontend/projects/collect/src/assets/i18n/fr.json b/ui/ui-frontend/projects/collect/src/assets/i18n/fr.json
index c3c4b9fc08f..a5e496cf37d 100644
--- a/ui/ui-frontend/projects/collect/src/assets/i18n/fr.json
+++ b/ui/ui-frontend/projects/collect/src/assets/i18n/fr.json
@@ -18,7 +18,6 @@
       "ADD_FILE": "Glisser-déposer",
       "BROWSE": "ou Parcourir",
       "ACCEPTED_FORMAT": "format accepté : csv",
-      "FILE_BAD_FORMAT": "Le fichier déposé n'est pas au bon format",
       "SUCCESS_MESSAGE": "L'opération de mise à jour des métadonnées a bien été traitée",
       "WAIT_MESSAGE": "L'opération est en cours, merci de ne pas éteindre ou rafraîchir votre navigateur",
       "ACTION_DELETE": "Supprimer des unités archivistiques",
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.html b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.html
index 25d2d94e63c..1d579ab8f5d 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.html
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.html
@@ -12,6 +12,11 @@
 </div>
 @if (file.errors && Object.entries(file.errors)?.length) {
   @for (entry of Object.entries(file.errors); track entry[0]) {
-    <vitamui-form-error class="pt-1" [errorKey]="entry[0]" [translateParams]="entry[1]"></vitamui-form-error>
+    <vitamui-form-error
+      class="pt-1"
+      [errorKey]="entry[0]"
+      [translateParams]="entry[1]"
+      [errorMessageMap]="errorMessageMap"
+    ></vitamui-form-error>
   }
 }
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.ts b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.ts
index 83645629cf8..5ea5a211112 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.ts
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/display-file/display-file.component.ts
@@ -48,6 +48,7 @@ import { CommonTooltipModule } from '../../common-tooltip/common-tooltip.module'
 })
 export class DisplayFileComponent {
   @Input() file: DisplayFile;
+  @Input() errorMessageMap: { [key: string]: string } = {};
   @Output() removeFile = new EventEmitter<DisplayFile>();
 
   protected readonly Object = Object;
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.html b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.html
index d1c6c31739c..0f9e0f870dd 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.html
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.html
@@ -37,7 +37,7 @@
   @if (displayFiles.length) {
     <div class="files-wrapper gap-2 align-items-stretch">
       @for (file of displayFiles; track file) {
-        <vitamui-display-file [file]="file" (removeFile)="removeFile($event)"></vitamui-display-file>
+        <vitamui-display-file [file]="file" (removeFile)="removeFile($event)" [errorMessageMap]="errorMessageMap"></vitamui-display-file>
       }
     </div>
   }
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.ts b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.ts
index 2f63552bd1b..a2a437e2c1d 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.ts
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/file-selector/file-selector.component.ts
@@ -53,7 +53,7 @@ import { I18nPluralPipe, NgTemplateOutlet } from '@angular/common';
 import { PipesModule } from '../../pipes/pipes.module';
 import { DisplayFile } from './display-file/display-file.interface';
 import { CustomFile } from '../../../../lib/models/custom-file';
-import { AbstractControl, FormsModule, NG_VALUE_ACCESSOR, ValidationErrors } from '@angular/forms';
+import { AbstractControl, FormControl, FormsModule, NG_VALUE_ACCESSOR, ValidationErrors } from '@angular/forms';
 import { FormErrorsComponent } from '../../../../lib/components/form-errors/form-errors.component';
 import { BytesPipe } from '../../pipes';
 import { AbstractFormInputDirective } from '../../../../lib/components/abstract-form-input.directive';
@@ -100,6 +100,8 @@ type FileValidatorFunction = (file: File) => Promise<FileValidationErrors | null
   providers: [FILE_SELECTOR_VALUE_ACCESSOR, BytesPipe],
 })
 export class FileSelectorComponent extends AbstractFormInputDirective implements OnInit {
+  protected control: FormControl<File[]>;
+
   /**
    * Allowed extensions. Ex: ['.json', '.rng']
    */