[ADF-4467] Fix Upload File Widget layout (#4675)

* [ADF-4467] Fix Upload File Widget layout * [ADF-4467] Refactor content services upload button
2025-05-26 17:24:56 +00:00 · 2019-05-07 17:32:35 +01:00 · 2019-05-07 17:32:35 +01:00 · 9d0e9ec219
commit 9d0e9ec219
parent 0e2e5e35a0
8 changed files with 69 additions and 92 deletions
--- a/docs/core/services/process-content.service.md
+++ b/docs/core/services/process-content.service.md
@ -84,7 +84,7 @@ Associate an uploaded file with a Process Instance.
 Let's say we have an upload button as follows: 

 ```html
-  <div class="button-row">
+  <div>
    <button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
      <mat-icon>attachment</mat-icon>
    </button>
--- a/lib/content-services/upload/components/upload-button.component.html
+++ b/lib/content-services/upload/components/upload-button.component.html
@ -1,21 +1,41 @@
 <form class="adf-upload-button-file-container">
    <!--Files Upload-->
-    <a *ngIf="!uploadFolders"
-        [disabled]="isButtonDisabled()"
-        mat-raised-button color="primary">
-        <mat-icon>file_upload</mat-icon>
+    <div *ngIf="!uploadFolders">
+
+        <!--Single Files Upload-->
+        <button *ngIf="!multipleFiles"
+            [disabled]="isButtonDisabled()"
+            mat-raised-button color="primary"
+            (click)="uploadSingleFile.click()">
+            <mat-icon>file_upload</mat-icon>
+            <span id="upload-single-file-label"
+                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+            <span id="upload-single-file-label-static"
+                *ngIf="staticTitle">{{ staticTitle }}</span>
+            <input #uploadSingleFile
+                id="upload-single-file"
+                data-automation-id="upload-single-file"
+                type="file"
+                name="uploadFiles"
+                accept="{{acceptedFilesType}}"
+                [attr.disabled]="isButtonDisabled()"
+                [title]="tooltip"
+                (change)="onFilesAdded($event)">
+        </button>

        <!--Multiple Files Upload-->
-        <span *ngIf="multipleFiles">
-            <label
-                id="upload-multiple-file-label"
-                *ngIf="!staticTitle"
-                for="upload-multiple-files">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
-            <label
+        <button *ngIf="multipleFiles"
+            [disabled]="isButtonDisabled()"
+            mat-raised-button color="primary"
+            (click)="uploadMultipleFiles.click()">
+            <mat-icon>file_upload</mat-icon>
+
+            <span id="upload-multiple-file-label"
+                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+            <span
                id="upload-multiple-file-label-static"
-                *ngIf="staticTitle"
-                for="upload-multiple-files">{{ staticTitle }}</label>
-            <input #uploadFiles
+                *ngIf="staticTitle">{{ staticTitle }}</span>
+            <input #uploadMultipleFiles
                id="upload-multiple-files"
                data-automation-id="upload-multiple-files"
                type="file"
@ -25,52 +45,31 @@
                [attr.disabled]="isButtonDisabled()"
                [title]="tooltip"
                (change)="onFilesAdded($event)">
-        </span>
-
-        <!--Single Files Upload-->
-        <span *ngIf="!multipleFiles">
-            <label
-                id="upload-single-file-label"
-                *ngIf="!staticTitle"
-                for="upload-single-file">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
-            <label
-                id="upload-single-file-label-static"
-                *ngIf="staticTitle"
-                for="upload-single-file">{{ staticTitle }}</label>
-            <input #uploadFiles
-                id="upload-single-file"
-                data-automation-id="upload-single-file"
-                type="file"
-                name="uploadFiles"
-                accept="{{acceptedFilesType}}"
-                [attr.disabled]="isButtonDisabled()"
-                [title]="tooltip"
-                (change)="onFilesAdded($event)">
-        </span>
-    </a>
+        </button>
+    </div>

    <!--Folders Upload-->
-    <a *ngIf="uploadFolders"
-        [disabled]="isButtonDisabled()" mat-raised-button color="primary">
-        <mat-icon>file_upload</mat-icon>
-        <label
-            id="uploadFolder-label"
-            *ngIf="!staticTitle"
-            for="uploadFolder">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</label>
-        <label
-            id="uploadFolder-label-static"
-            *ngIf="staticTitle"
-            for="uploadFolder">{{ staticTitle }}</label>
-        <input #uploadFolders
-            id="uploadFolder"
-            data-automation-id="uploadFolder"
-            type="file"
-            name="uploadFiles"
-            multiple="multiple"
-            accept="{{acceptedFilesType}}"
-            webkitdirectory directory
-            [attr.disabled]="isButtonDisabled()"
-            [title]="tooltip"
-            (change)="onDirectoryAdded($event)">
-    </a>
+    <div *ngIf="uploadFolders">
+        <button
+            [disabled]="isButtonDisabled()"
+            mat-raised-button color="primary"
+            (click)="uploadFolders.click()">
+            <mat-icon>file_upload</mat-icon>
+            <span id="uploadFolder-label"
+                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
+            <span id="uploadFolder-label-static"
+                *ngIf="staticTitle">{{ staticTitle }}</span>
+            <input #uploadFolders
+                id="uploadFolder"
+                data-automation-id="uploadFolder"
+                type="file"
+                name="uploadFiles"
+                multiple="multiple"
+                accept="{{acceptedFilesType}}"
+                webkitdirectory directory
+                [attr.disabled]="isButtonDisabled()"
+                [title]="tooltip"
+                (change)="onDirectoryAdded($event)">
+        </button>
+    </div>
 </form>
--- a/lib/content-services/upload/components/upload-button.component.scss
+++ b/lib/content-services/upload/components/upload-button.component.scss
@ -1,12 +1,5 @@
 .adf {
    &-upload-button-file-container input {
-        cursor: pointer;
-        height: 100%;
-        right: 0;
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        width: 300px;
-        z-index: 4;
+        display: none;
    }
 }
--- a/lib/core/form/components/widgets/upload/upload.widget.html
+++ b/lib/core/form/components/widgets/upload/upload.widget.html
@ -24,15 +24,15 @@
            </mat-list>
        </div>

-        <div class="button-row" *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-            <a mat-raised-button color="primary">
+        <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
+            <button mat-raised-button color="primary" (click)="uploadFiles.click()">
                {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
                <input #uploadFiles
                       [multiple]="multipleOption"
                       type="file"
                       [id]="field.id"
                       (change)="onFileChanged($event)"/>
-            </a>
+            </button>
        </div>
    </div>
    <error-widget [error]="field.validationSummary"></error-widget>
--- a/lib/core/form/components/widgets/upload/upload.widget.scss
+++ b/lib/core/form/components/widgets/upload/upload.widget.scss
@ -6,14 +6,7 @@
        margin-bottom: 15px;

        input {
-            cursor: pointer;
-            height: 100%;
-            right: 0;
-            opacity: 0;
-            position: absolute;
-            top: 0;
-            width: 300px;
-            z-index: 4;
+            display: none;
        }
    }

--- a/lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.html
@ -24,15 +24,15 @@
            </mat-list>
        </div>

-        <div class="button-row" *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-            <a mat-raised-button color="primary">
+        <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
+            <button mat-raised-button color="primary" (click)="uploadFiles.click()">
                {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
                <input #uploadFiles
                       [multiple]="multipleOption"
                       type="file"
                       [id]="field.id"
                       (change)="onFileChanged($event)"/>
-            </a>
+            </button>
        </div>
    </div>
    <error-widget [error]="field.validationSummary"></error-widget>
--- a/lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.scss
@ -1,18 +1,10 @@
-
 .adf-cloud {

    &-upload-widget-container {
        margin-bottom: 15px;

        input {
-            cursor: pointer;
-            height: 100%;
-            right: 0;
-            opacity: 0;
-            position: absolute;
-            top: 0;
-            width: 300px;
-            z-index: 4;
+            display: none;
        }
    }

--- a/lib/process-services/content-widget/attach-folder-widget.component.html
+++ b/lib/process-services/content-widget/attach-folder-widget.component.html
@ -15,7 +15,7 @@
            </div>
        </div>

-        <div class="button-row" *ngIf="!hasFolder && !field.readOnly">
+        <div *ngIf="!hasFolder && !field.readOnly">
            <button mat-raised-button
                color="primary"
                (click)="openSelectDialogFromFileSource()"