fix/multistep-questionnaire

client/app/src/pages/whistleblower/form-field-input/form-field-input.component.html

@@ -137,12 +137,12 @@
             }
             @case ('voice') {
               <div id="{{fieldEntry}}">
-                <src-voice-recorder (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [field]="field" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry"></src-voice-recorder>
+                <src-voice-recorder (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [entry]="entry" [uploads]="uploads" [field]="field" [entryIndex]="entryIndex" [fieldEntry]="fieldEntry"></src-voice-recorder>
               </div>
             }
             @case ('fileupload') {
               <div id="{{fieldEntry}}">
-                <src-rfile-upload-button [file_id]="fieldEntry" (notifyFileUpload)="notifyFileUpload.emit()" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [field]="field" [formUploader]="true"></src-rfile-upload-button>
+                <src-rfile-upload-button [file_id]="fieldEntry" (notifyFileUpload)="notifyFileUpload.emit()" [entry]="entry" [fileUploadUrl]="fileUploadUrl" [uploads]="uploads" [field]="field" [formUploader]="true"></src-rfile-upload-button>
               </div>
             }
             @case ('fieldgroup') {

client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.html

@@ -2,8 +2,13 @@
   <ng-container #flow="flow" [flowConfig]="flowConfig"></ng-container>
   <div class="drag-drop" flowDrop [flow]="flow.flowJs">
     <div class="custom-file">
-      <input [attr.id]="'customFile-' + fileInput" id="customFile-{{fileInput}}" type="file" flowButton [flow]="flow.flowJs" [style.display]="'none'" class="custom-file-input" [required]="field && field.required" />
-      <label [attr.for]="'customFile-' + fileInput" for="customFile-{{fileInput}}" class="btn btn-sm btn-outline-secondary">
+        @if(!formUploader){
+          <input [attr.id]="'customFile-' + fileInput" [name]="'input-' + fileInput" id="customFile-{{fileInput}}" type="file" flowButton [flow]="flow.flowJs" [style.display]="'none'" class="custom-file-input" />
+        }
+        @else{
+          <input [attr.id]="'customFile-' + fileInput" [name]="'input-' + fileInput" id="customFile-{{fileInput}}" [(ngModel)]="fileModel" type="file" flowButton [flow]="flow.flowJs" [style.display]="'none'" class="custom-file-input" [required]="entry.required_status"/>
+        }
+        <label [attr.for]="'customFile-' + fileInput" for="customFile-{{fileInput}}" class="btn btn-sm btn-outline-secondary">
         <i class="fa-solid fa-upload"></i>
         <span> {{'Upload'|translate}}</span>
       </label>
@@ -18,7 +23,7 @@
                 <span>{{'File size not accepted.' | translate}}</span> {{errorFile.flowFile.name}} {{'Maximum file size is:' | translate}} {{appDataService.public.node.maximum_filesize}} MB
               </div>
             }
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile.flowFile.cancel(); showError=false"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="dismissError();errorFile.flowFile.cancel(); showError=false; fileModel = null"></button>
           </div>
         </div>
       }
@@ -30,7 +35,7 @@
             <div class="fileUploadBox mt-2 mb-2">
               @if (appDataService.public.node.maximum_filesize >= (transfer.size/1000000)) {
                 <div>
-                  <src-rfile-upload-status [formUploader]="formUploader" [file]="transfer"></src-rfile-upload-status>
+                  <src-rfile-upload-status (dataToParent)="receiveData($event)" [formUploader]="formUploader" [file]="transfer"></src-rfile-upload-status>
                 </div>
               }
             </div>

client/app/src/shared/partials/rfile-upload-button/r-file-upload-button.component.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, inject} from "@angular/core";
 import {FlowDirective, Transfer, NgxFlowModule} from "@flowjs/ngx-flow";
 import {AppDataService} from "@app/app-data.service";
-import {ControlContainer, NgForm} from "@angular/forms";
+import {ControlContainer, FormsModule, NgForm} from "@angular/forms";
 import {Subscription} from "rxjs";
 import {FlowOptions} from "@flowjs/flow.js";
 import {Field} from "@app/models/resolvers/field-template-model";
@@ -18,7 +18,7 @@ import {TranslatorPipe} from "@app/shared/pipes/translate";
     templateUrl: "./r-file-upload-button.component.html",
     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     standalone: true,
-    imports: [NgxFlowModule, NgClass, RFileUploadStatusComponent, RFilesUploadStatusComponent, AsyncPipe, TranslateModule, TranslatorPipe]
+    imports: [NgxFlowModule, NgClass, FormsModule, RFileUploadStatusComponent, RFilesUploadStatusComponent, AsyncPipe, TranslateModule, TranslatorPipe]
 })
 export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDestroy {
   private cdr = inject(ChangeDetectorRef);
@@ -32,6 +32,7 @@ export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDest
   @Input() uploads: { [key: string]: any };
   @Input() field: Field | undefined = undefined;
   @Input() file_id: string;
+  @Input() entry: any;
   @Output() notifyFileUpload: EventEmitter<any> = new EventEmitter<any>();
   @ViewChild("flow") flow: FlowDirective;
 
@@ -41,6 +42,7 @@ export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDest
   errorFile: Transfer;
   confirmButton = false;
   flowConfig: FlowOptions;
+  fileModel: File | null = null;
 
   ngOnInit(): void {
     this.file_id = this.file_id ? this.file_id:"status_page";
@@ -80,6 +82,11 @@ export class RFileUploadButtonComponent implements AfterViewInit, OnInit, OnDest
     });
   }
 
+  receiveData(data: any) {
+    if(this.flow.flowJs.files.length == 0){
+      this.fileModel = data;
+    }
+  }
 
   ngOnDestroy() {
     this.autoUploadSubscription.unsubscribe();

client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.html

@@ -6,7 +6,7 @@
           <div class="file-buttons">
             @if (appDataService.page === 'submissionpage' || !file.complete) {
               <div class="removeFileButton text-danger">
-                <div class="btn btn-sm btn-danger" (click)="file.flowFile.cancel()">
+                <div class="btn btn-sm btn-danger" (click)="file.flowFile.cancel();dataToParent.emit(null)">
                   <i class="fa-solid fa-times" aria-label="{'Remove' | translate}"></i>
                 </div>
               </div>

client/app/src/shared/partials/rfile-upload-status/r-file-upload-status.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, inject} from "@angular/core";
+import {Component, EventEmitter, Input, Output, inject} from "@angular/core";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {AppDataService} from "@app/app-data.service";
 import {Transfer} from "@flowjs/ngx-flow";
@@ -16,7 +16,7 @@ import {ByteFmtPipe} from "@app/shared/pipes/byte-fmt.pipe";
 export class RFileUploadStatusComponent {
   protected utilsService = inject(UtilsService);
   protected appDataService = inject(AppDataService);
-
+  @Output() dataToParent: EventEmitter<any> = new EventEmitter<any>();
   @Input() file: Transfer;
   @Input() formUploader: boolean;
 }

client/app/src/shared/partials/voice-recorder/voice-recorder.component.html

@@ -26,7 +26,7 @@
     </div>
     <div class="row">
       <div class="col-md-12">
-        <input class="d-none" [attr.id]="'customFile-' + fileInput" [(ngModel)]="_fakeModel" [required]="field && field.required && !uploads[fileInput]?.files.length" [name]="'input-' + entryIndex" type="file" />
+        <input class="d-none" [attr.id]="'customFile-' + fileInput" [(ngModel)]="_fakeModel" [required]="entry.required_status" [name]="'input-' + fileInput" type="text" />
         @if (audioPlayer) {
           <iframe #viewer id="{{fieldEntry}}-audio" class="audio-player-iframe" sandbox="allow-downloads allow-scripts" [src]="iframeUrl" ></iframe>
         }

client/app/src/shared/partials/voice-recorder/voice-recorder.component.ts

@@ -7,11 +7,12 @@ import {Field} from "@app/models/resolvers/field-template-model";
 import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
 import {UtilsService} from "@app/shared/services/utils.service";
 import {NgClass} from "@angular/common";
-import {FormsModule} from "@angular/forms";
+import {ControlContainer, FormsModule, NgForm} from "@angular/forms";
 
 @Component({
     selector: "src-voice-recorder",
     templateUrl: "./voice-recorder.component.html",
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     standalone: true,
     imports: [NgClass, FormsModule]
 })
@@ -27,7 +28,8 @@ export class VoiceRecorderComponent implements OnInit {
   @Input() fileUploadUrl: string;
   @Input() entryIndex: number;
   @Input() fieldEntry: string;
-  _fakeModel: File;
+  @Input() entry: any;
+  _fakeModel: string;
   fileInput: string;
   seconds: number = 0;
   activeButton: string | null = null;
@@ -44,7 +46,6 @@ export class VoiceRecorderComponent implements OnInit {
 
   @Output() notifyFileUpload: EventEmitter<any> = new EventEmitter<any>();
   private audioContext: AudioContext|null;
-  entry: any;
   iframeUrl: SafeResourceUrl;
   @ViewChild("viewer") viewerFrame: ElementRef;
 
@@ -182,6 +183,7 @@ export class VoiceRecorderComponent implements OnInit {
       }
 
       if (this.seconds >= parseInt(this.field.attrs.min_len.value) && this.seconds <= parseInt(this.field.attrs.max_len.value)) {
+        this._fakeModel = "audio";
         this.flow.addFile(this.recording_blob);
         window.addEventListener("message", (message: MessageEvent) => {
           const iframe = this.viewerFrame.nativeElement;
@@ -215,6 +217,7 @@ export class VoiceRecorderComponent implements OnInit {
 
   deleteRecording(): void {
     this.audioPlayer = false;
+    this._fakeModel = "";
     if (this.flow) {
       this.flow.cancel();
     }

client/cypress/e2e/18-test-globaleaks-process.cy.ts

@@ -143,8 +143,8 @@ describe("globaleaks process", function () {
     cy.wait(6000);
     cy.get("#stop_recording").click();
     cy.get("#NextStepButton").click();
-    cy.get("input[type='text']").eq(1).should("be.visible").type("abc");
-    cy.get("input[type='text']").eq(2).should("be.visible").type("xyz");
+    cy.get("input[type='text']").eq(2).should("be.visible").type("abc");
+    cy.get("input[type='text']").eq(3).should("be.visible").type("xyz");
     cy.get("select").first().select(1);
     cy.get("#SubmitButton").should("be.visible");
     cy.get("#SubmitButton").click();