Schema type: File (#5095)

Author: EnvBsh

frontend/src/app/modules/schema-engine/schema-form-view/schema-form-view.component.html

@@ -38,7 +38,8 @@
                                     class="guardian-button guardian-button-secondary">Copy CID</button>
                             </div>
                         </div>
-                        <div class="form-field-img">
+
+                        <div *ngIf="item?.customType !== 'file'" class="form-field-img">
                             <img *ngIf="!item.loading; else loading" class="ipfs-image" [src]="item.imgSrc" [alt]="item.value">
                             <ng-template #loading>
                                 <div class="guardian-loading">
@@ -69,8 +70,8 @@
                     <div
                         *ngIf="isFormulas(item) as formulas"
                         class="form-field-formula">
-                        <button 
-                            class="guardian-icon-button guardian-icon-button-secondary" 
+                        <button
+                            class="guardian-icon-button guardian-icon-button-secondary"
                             (click)="showFormulas(formulas)">
                             <svg-icon
                                 src="/assets/images/icons/function.svg"

frontend/src/app/modules/schema-engine/schema-form-view/schema-form-view.component.ts

@@ -156,7 +156,7 @@ export class SchemaFormViewComponent implements OnInit {
                     || this.values[item.name] === undefined
                     ? ""
                     : this.values[item.name];
-                if (this.isIPFS(field)) {
+                if (this.isIPFS(field) && field.customType !== 'file') {
                     this.loadImg(item)
                 }
             }
@@ -188,7 +188,7 @@ export class SchemaFormViewComponent implements OnInit {
                         }]
                         item.isInvalidType = true;
                     }
-                    if (this.isIPFS(field)) {
+                    if (this.isIPFS(field) && field.customType !== 'file') {
                         this.loadImgs(value);
                     }
                 }
@@ -361,4 +361,4 @@ export class SchemaFormViewComponent implements OnInit {
         });
         dialogRef.onClose.subscribe((result: any) => { });
     }
-}
+}

frontend/src/app/modules/schema-engine/schema-form/schema-form.component.html

@@ -60,7 +60,7 @@
                                     </p-progressSpinner>
 
                                     <button mat-icon-button *ngSwitchCase="false" class="upload-btn"
-                                            (click)="uploadFile(item)">
+                                            (click)="uploadFile(item, isFile(item))">
                                         <i class="pi pi-paperclip"></i>
                                     </button>
                                 </ng-container>
@@ -204,7 +204,7 @@
                                                 [style]="{ width: '38px', height: '38px' }">
                                             </p-progressSpinner>
                                             <button *ngSwitchCase="false" class="upload-btn"
-                                                    (click)="uploadFile(listItem)">
+                                                    (click)="uploadFile(listItem, isFile(item))">
                                                 <i class="pi pi-paperclip"></i>
                                             </button>
                                         </ng-container>

frontend/src/app/modules/schema-engine/schema-form/schema-form.component.ts

@@ -84,6 +84,7 @@ interface IFieldIndexControl<T extends UntypedFormControl | UntypedFormGroup> {
     open: boolean
 }
 
+const FILE_EXTENSIONS = '.txt, .pdf, .doc, .docx, .xls, .csv, .kml, .geoJSON';
 /**
  * Form built by schema
  */
@@ -387,13 +388,13 @@ export class SchemaFormComponent implements OnInit {
         );
     }
 
-    uploadFile(item: any): void {
+    uploadFile(item: any, isFile: boolean): void {
         const input = document.createElement('input');
 
         const control = item.control;
 
         input.type = 'file';
-        input.accept = 'image/*';
+        input.accept = isFile ? FILE_EXTENSIONS : 'image/*' ;
         input.onchange = (event) => {
             const file = input.files ? input.files[0] : undefined;
             if (!file) {
@@ -713,6 +714,10 @@ export class SchemaFormComponent implements OnInit {
             || item.pattern === '^ipfs:\/\/.+';
     }
 
+    public isFile(item: SchemaField): boolean {
+        return item.customType === 'file';
+    }
+
     private postFormat(item: any, control: UntypedFormControl): any {
         const format = item.format;
         const type = item.type;

interfaces/src/helpers/field-types-dictionary.ts

@@ -95,6 +95,14 @@ export class FieldTypesDictionary {
             pattern: '^ipfs:\/\/.+',
             isRef: false
         },
+        {
+            name: 'File',
+            type: 'string',
+            format: undefined,
+            pattern: '^ipfs:\/\/.+',
+            isRef: false,
+            customType: 'file'
+        },
         {
             name: 'Enum',
             type: 'string',
@@ -236,4 +244,4 @@ export class DefaultFieldDictionary {
         }
         return [];
     }
-}
+}