Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload file component updates

Browse Source
This commit is contained in:
Adina Țeudan 2024-03-07 18:15:32 +02:00
parent 9b427b0cac
commit ecf9c8912e
5 changed files with 89 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/assets/styles/common-file-upload.scss Normal file
View File

@ -0,0 +1,60 @@
.iqser-upload-file {
.upload-area,
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
background: var(--iqser-alt-background);
&.drag-over {
background-color: var(--iqser-file-drop-drag-over);
}
}
.upload-area {
gap: 16px;
height: 88px;
cursor: pointer;
padding: 0 32px;
mat-icon,
div {
opacity: 0.5;
transition: 0.1s;
}
div {
font-size: 16px;
font-weight: 500;
}
}
.file-area {
gap: 10px;
height: 48px;
mat-icon:first-child {
opacity: 0.5;
margin-left: 16px;
}
mat-icon:last-child {
margin-left: auto;
margin-right: 16px;
cursor: pointer;
}
mat-icon {
transform: scale(0.7);
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 490px;
}
}
}

1
src/assets/styles/common-styles.scss
View File

@ -28,6 +28,7 @@
@use 'common-toggle-button';
@use 'common-tooltips';
@use 'common-file-drop';
@use 'common-file-upload';
@use 'common-side-nav';
@use 'common-color-picker';
@use 'common-skeleton';

42
src/lib/upload-file/upload-file.component.html
View File

@ -1,24 +1,22 @@
<div>
<div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" *ngIf="!file" class="upload-area" iqserDragDropFileUpload>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" *ngIf="!file" class="upload-area" iqserDragDropFileUpload>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="upload-file.upload-area-text"></div>
</div>
<div *ngIf="file" class="file-area">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ file.name }}</p>
<mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
</div>
<input
#attachFileInput
id="file-upload-input"
(change)="attachFile($event)"
[accept]="accept"
[hidden]="true"
class="file-upload-input"
type="file"
/>
<div translate="upload-file.upload-area-text"></div>
</div>
<div *ngIf="file" class="file-area">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ file.name }}</p>
<mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
</div>
<input
#attachFileInput
id="file-upload-input"
(change)="attachFile($event)"
[accept]="accept"
[hidden]="true"
class="file-upload-input"
type="file"
/>

58
src/lib/upload-file/upload-file.component.scss
View File

@ -1,58 +0,0 @@
.upload-area,
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
background: var(--iqser-alt-background);
&.drag-over {
background-color: var(--iqser-file-drop-drag-over);
}
}
.upload-area {
gap: 16px;
height: 88px;
cursor: pointer;
padding: 0 32px;
mat-icon,
div {
opacity: 0.5;
transition: 0.1s;
}
div {
font-size: 16px;
font-weight: 500;
}
}
.file-area {
gap: 10px;
height: 48px;
mat-icon:first-child {
opacity: 0.5;
margin-left: 16px;
}
mat-icon:last-child {
margin-left: auto;
margin-right: 16px;
cursor: pointer;
}
mat-icon {
transform: scale(0.7);
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 490px;
}
}

13
src/lib/upload-file/upload-file.component.ts
View File

@ -1,9 +1,11 @@
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
@Component({
selector: 'iqser-upload-file',
templateUrl: './upload-file.component.html',
styleUrls: ['./upload-file.component.scss'],
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: { '[class.iqser-upload-file]': 'true' },
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UploadFileComponent {
@ViewChild('attachFileInput', { static: true }) attachFileInput!: ElementRef;
@ -17,12 +19,13 @@ export class UploadFileComponent {
this.attachFileInput.nativeElement.click();
}
attachFile(event: any) {
const files = event?.target?.files;
attachFile(event: Event) {
const target = event.target as HTMLInputElement;
const files = target?.files || [];
this.file = files[0];
// input field needs to be set as empty in case the same file will be selected second time
event.target.value = '';
target.value = '';
if (!this.file) {
console.error('No file to import!');