fix: #866 drag and drop issue file input and file emit

admin/package.json

@@ -23,8 +23,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@ng-bootstrap/ng-bootstrap": "^18.0.0",
-    "@ngx-dropzone/cdk": "^19.0.0",
-    "@ngx-dropzone/material": "^19.0.0",
+    "@ngx-dropzone/cdk": "^19.2.1",
+    "@ngx-dropzone/material": "^19.2.1",
     "@rxweb/reactive-form-validators": "~13.0.0",
     "@types/file-saver-es": "^2.0.3",
     "@types/luxon": "^3.4.2",

admin/src/app/foms/fom-add-edit/fom-add-edit.component.html

@@ -484,10 +484,8 @@ <h1 class="text-muted">{{isCreate ? 'Add New' : 'Edit'}} FOM {{isCreate ? '' : '
         </div>
         <div class="row">
           <div class="form-group col-md-6" >
-            <app-upload-box [isBlob]="true"
-                            [fileTypes]="fileTypesParentInitial"
-                            (fileUploaded)="addPublicNotice($event)"
-                            (outputFileContent)="loadPublicNoticeFileContent($event)"
+            <app-upload-box [fileTypes]="fileTypesParentInitial"
+                            (emitFile)="onFileEmitForPublicNotice($event)"
                             [maxFileSizeMB]="maxFileSize"
             ></app-upload-box>
             <div class="fileTypes"><em>Acceptable File Types: png, jpeg, jpg, tif, pdf </em></div>
@@ -536,10 +534,8 @@ <h6><em>Uploading this Public Notice attachment will overwrite the existing, sav
         </div>
           <div class="row">
             <div class="form-group col-md-6">
-              <app-upload-box [isBlob]="true"
-                              [fileTypes]="fileTypesParentSupporting"
-                              (fileUploaded)="addSupportingDocument($event)"
-                              (outputFileContent)="loadSupportingDocFileContent($event)"
+              <app-upload-box [fileTypes]="fileTypesParentSupporting"
+                              (emitFile)="onFileEmitForSupportingDocument($event)"
                               [maxFileSizeMB]="maxFileSize">
               </app-upload-box>
               <div class="fileTypes"><em>Acceptable File Types: png, jpeg, jpg, tif, pdf, txt, csv, doc, docx, xls, xlsx </em></div>

admin/src/app/foms/fom-add-edit/fom-add-edit.component.ts

@@ -15,12 +15,12 @@ import { AttachmentUploadService } from "@admin-core/utils/attachmentUploadServi
 import { DEFAULT_ISO_DATE_FORMAT, MAX_FILEUPLOAD_SIZE } from '@admin-core/utils/constants';
 import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
 import {
-    AttachmentResponse, DistrictResponse, ForestClientResponse,
-    ForestClientService,
-    ProjectCreateRequest,
-    ProjectPlanCodeEnum,
-    ProjectResponse,
-    ProjectService, WorkflowStateEnum
+  AttachmentResponse, DistrictResponse, ForestClientResponse,
+  ForestClientService,
+  ProjectCreateRequest,
+  ProjectPlanCodeEnum,
+  ProjectResponse,
+  ProjectService, WorkflowStateEnum
 } from '@api-client';
 import { RxFormBuilder, RxFormGroup } from '@rxweb/reactive-form-validators';
 import { User } from "@utility/security/user";
@@ -64,9 +64,7 @@ export class FomAddEditComponent implements OnInit, AfterViewInit, OnDestroy {
   ];
   forestClients: ForestClientResponse[] = [];
   public publicNotice: File = null;
-  publicNoticeContent: any;
   public supportingDocument: File = null;
-  supportingDocContent: any;
   public districtIdSelect: any = null;
   public forestClientSelect: any = null;
   public isInitialState: boolean = true;
@@ -207,20 +205,13 @@ export class FomAddEditComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
-  addPublicNotice(newFile: File) {
+  onFileEmitForPublicNotice(newFile: File) {
     this.publicNotice = newFile;
   }
 
-  addSupportingDocument(newFile: File) {
+  onFileEmitForSupportingDocument(newFile: File) {
+    this.supportingDocument = newFile;
     this.supportingDocument = newFile;
-  }
-
-  loadPublicNoticeFileContent(fileContent: any) {
-    this.publicNoticeContent = fileContent;
-  }
-
-  loadSupportingDocFileContent(fileContent: any) {
-    this.supportingDocContent = fileContent;
   }
 
   ngAfterViewInit() {
@@ -302,23 +293,18 @@ export class FomAddEditComponent implements OnInit, AfterViewInit, OnDestroy {
 
       await lastValueFrom(this.projectSvc.projectControllerUpdate(id, projectUpdateRequest));
 
-      let file: any = null;
-      let fileContent: any = null;
-
       if(this.publicNotice){
-        file = this.publicNotice;
-        fileContent = new Blob([this.publicNoticeContent], {type: file.type});
+        const file = this.publicNotice;
         await lastValueFrom(this.attachmentUploadSvc
-          .attachmentCreate(file, fileContent, id,
+          .attachmentCreate(file, file, id,
             AttachmentTypeEnum.PUBLIC_NOTICE).pipe(tap(obs => console.log(obs))));
 
       }
 
       if (this.supportingDocument){
-        file = this.supportingDocument;
-        fileContent = new Blob([this.supportingDocContent], {type: file.type});
+        const file = this.supportingDocument;
         await lastValueFrom(this.attachmentUploadSvc
-          .attachmentCreate(file, fileContent, id,
+          .attachmentCreate(file, file, id,
             AttachmentTypeEnum.SUPPORTING_DOC).pipe(tap(obs => console.log(obs))));
       }
 

admin/src/app/foms/fom-submission/fom-submission.component.html

@@ -92,11 +92,9 @@ <h1 class="text-muted">{{project.projectPlanCode == projectPlanCodeEnum.Fsp
         </div>
 
         <div class="form-group mb-0">
-
           <app-upload-box [fileTypes]="fileTypesParent"
                           [maxFileSizeMB]="maxSpatialFileSize"
-                          (fileUploaded)="addNewFile($event)"
-                          (outputFileContent)="getContentFileFromUpload($event)">
+                          (emitFile)="onFileEmit($event)">
           </app-upload-box>
           <div class="fileTypes"><em>Acceptable File Types: json, txt</em></div>
         </div>

admin/src/app/foms/fom-submission/fom-submission.component.ts

@@ -155,14 +155,16 @@ export class FomSubmissionComponent implements OnInit, AfterViewInit, OnDestroy
     this.ngUnsubscribe.complete();
   }
 
-  addNewFile(newFile: File) {
+  onFileEmit(newFile: File) {
     this.file = newFile;
-  }
-
-  getContentFileFromUpload(fileContent: any) {
-    this.contentFile = fileContent;
     try {
-      this.originalSubmissionRequest.jsonSpatialSubmission = JSON.parse(this.contentFile);
+      if (this.file) {
+        const reader = new FileReader();
+        reader.onload = (e: any) => {
+          this.originalSubmissionRequest.jsonSpatialSubmission = JSON.parse(e.target.result);
+        };
+        reader.readAsText(this.file);
+      }
     }catch (e) {
       this.modalSvc.openErrorDialog('The file is not in a valid JSON format. Please fix your file and try again.');
     }

admin/src/app/foms/interactions/interaction-detail/interaction-detail.component.html

@@ -78,11 +78,9 @@ <h2>&nbsp;</h2>
         *ngIf="editMode">
       <label for="upload">Engagement Attachment</label>
       <app-upload-box id="upload"
-                      [isBlob]="true"
                       [fileTypes]="supportingFileTypes"
                       [maxFileSizeMB]="maxFileSize"
-                      (fileUploaded)="addNewFile($event)"
-                      (outputFileContent)="getFileContent($event)">
+                      (emitFile)="onFileEmit($event)">
       </app-upload-box>
       <div class="fileTypes"><em>Acceptable File Types: png, jpeg, jpg, tif, pdf, txt, csv, doc, docx, xls, xlsx, msg, rtf </em></div>
     </div>

admin/src/app/foms/interactions/interaction-detail/interaction-detail.component.ts

@@ -41,7 +41,6 @@ export class InteractionDetailComponent {
 
   file: File = null; // only 1 attachment for Interaction.
   maxFileSize: number = MAX_FILEUPLOAD_SIZE.DOCUMENT;
-  fileContent: any;
 
   supportingFileTypes: string[] = 
   [ 'image/png', 'image/jpeg', 'image/jpg', 'application/pdf', 'image/tiff',
@@ -73,22 +72,16 @@ export class InteractionDetailComponent {
     // Force change detection to ensure child components render
     this.cdr.detectChanges();
   }
-  
-  addNewFile(newFile: File) {
+
+  onFileEmit(newFile: File) {
     this.file = newFile;
     if (!this.file) {
       this.interactionFormGroup.get('filename').setValue(null);
     }
     else {
       this.interactionFormGroup.get('filename').setValue(this.file .name);
     }
-  }
-
-  getFileContent(fileContent: any) {
-    this.fileContent = fileContent;
-    // Convert to proper Blob type for adding attachment to FormData.
-    const fileContentAsBlob = new Blob([this.fileContent], {type: this.file.type});
-    this.interactionFormGroup.get('fileContent').setValue(fileContentAsBlob);
+    this.interactionFormGroup.get('fileContent').setValue(this.file);
   }
 
   private async retrieveAttachment(attachmentId: number) {

admin/src/core/components/file-upload-box/file-upload-box.component.html

@@ -1,17 +1,24 @@
+<div>
+    <mat-form-field appearance="outline">
+        <mat-label style="margin-top: 8px;">Drag file to upload or  <a href="javascript:void(0)">Browse</a> </mat-label>
+        <ngx-mat-dropzone>
 
-<mat-form-field appearance="outline">
-    <mat-label style="margin-top: 8px;">Drag file to upload or  <a href="javascript:void(0)">Browse</a> </mat-label>
-    <ngx-mat-dropzone (change)="onSelect($event)">
-        <input type="file" fileInput />
-        <mat-chip-row (removed)="remove()" *ngIf="uploadedFile">
-            {{ uploadedFile.name }}
-            <button matChipRemove>
-                <mat-icon>cancel</mat-icon>
-            </button>
-        </mat-chip-row>
-    </ngx-mat-dropzone>
-    <mat-icon matSuffix *ngIf="!uploadedFile">cloud_upload</mat-icon>
-</mat-form-field>
-<ng-container *ngIf="invalidTypeText">
-    <span class="invalid-type-msg">{{ invalidTypeText }}</span>
-</ng-container>
+        <input type="file" fileInput [mode]="'replace'" [formControl]="fileCtrl" />
+        @if (fileCtrl.value) {
+            <mat-chip-row (removed)="clear()">
+                {{ fileCtrl.value.name }}
+                <button matChipRemove>
+                    <mat-icon>cancel</mat-icon>
+                </button>
+            </mat-chip-row>
+        }
+        </ngx-mat-dropzone>
+        <mat-icon matSuffix>cloud_upload</mat-icon>
+    </mat-form-field>
+    <mat-error *ngIf="fileCtrl.hasError('accept')">
+        The file type is not accepted.
+    </mat-error>
+    <mat-error *ngIf="fileCtrl.hasError('maxSize')">
+        File is too large. Max: {{ maxFileSize / BYTES_PER_MB }} MB
+    </mat-error>
+</div>