egov-file-upload v15.0.0

FileUpload Component

Installation

ng add sf-file-upload

Configuration

Setup the hosting component

*.component.html
===================================================================================================
<file-upload
    [showFileList]="true"
    [showUpload]="true"
    [canDelete]="false"
    [componentTitle]="'File Upload'"
    [fileTypeHint]="'JPG'"
    [maxFileCount]="1000"
    [showFileTypeHint]="true"
    [allowedFileTypes]="['pdf', 'jpg', 'png']"
    [showTitle]="true"
    [downloadAllowed]="true"
    (addFile)="onAddFile($event)"
    (downloadFile)=onDownloadFile($event)
    (removeFile)="onRemoveFile($event)">
</file-upload>

Accessing the upload component from a other component:

If you have one component then you can use @ViewChild but if you user more than one component your should user @ViewChildren

  Usage...
  @ViewChild(FileUploadContainerComponent) upload!: FileUploadContainerComponent;
  upload.updateFileList(files);
  

  @ViewChildren(FileUploadContainerComponent) uploads!: QueryList<FileUploadContainerComponent>;
  uploads.first.updateFileList(files);
  uploads.last.updateFileList(files)

*.component.ts
===================================================================================================
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements {
  files!: DocumentResponse[];

  @ViewChild(FileUploadContainerComponent) upload!: FileUploadContainerComponent;
  @ViewChildren(FileUploadContainerComponent) uppies!: QueryList<FileUploadContainerComponent>;
  
  constructor() { }

  onAddFile(fileDescription: DocumentResponse) {
    console.log('AppComponent#onAddFile fileDescription=%O', fileDescription);
    this.upload.updateFileList(fileDescription);
  }

  onRemoveFile(id: number) {
    console.log('AppComponent#onRemoveFile id=%O', id);
    this.files = this.files.filter(file => file.id !== id);
    this.upload.setFileList(this.files);
  }
}

Styling

.component {
  --component-title: gray;
  --component-title-size: 2em;
  --component-title-margin: 30px 0 0 2px;
  
  --description-text-color: gray;
  --description-text-size: 1em;
  --description-text-margin: 5px 0 2px 20px;
  
  --file-count-tracker-text-color: gray;
  --file-count-tracker-text-size: 1.2em;
  --file-count-tracker-text-margin: 0 10px 2px 0;
  
  --max-file-reached-text-color: yellow;
  --max-file-reached-text-size: 1.2em;
  --max-file-reached-text-margin: 10px 0 2px 10px;

  --file-type-hint-text-color: gray;
  --file-type-hint-text-size: 1.2em;
  --file-type-hint-text-margin: 10px 10px 0 0;

  --file-size-exceeded-alert-text-color: red;
  --file-size-exceeded-alert-text-size: 1.4em;
  --file-size-exceeded-alert-text-margin: 10px 0 0 2px;

  --upload-margin: 0 10px 0 10px;
  --upload-padding: 3px 3px;

  --dropzone-padding: 40px 0 0 0;
  --dropzone-height: 350px;
  --dropzone-button-color: white;

  --drop-icon-text-row-display: inline; // you can set it to flex to make the icon and be displayed in a row
  --drop-icon-text-row-direction: row;
  --drop-icon-text-row-justify: center;
  --dropzone-icon-color: black;

  --dropzone-button-text: black;
  --dropzone-button-margin: 0 0 0 0;

  --dropzone-text-color: black;
  --dropzone-text-size: 1.2em;
  --dropzone-text-margin: 0 0 10px 0;
  --dropzone-text-font-weight: lighter;

  --dropzone-background: #f5f5f7;

  --dropzone-error-text-color: red;
  --dropzone-error-text-size: 1.5em;
  --dropzone-error-text-margin: 0 0 0 0;
  --dropzone-error-font-weight: normal;
}
```


### Configure the needed icons
With the installation of the package there are also delivered the needed icons. To setup the usage of the icons add following lines to your angular.json.

```
"architect": {
    build": {
        "options": {
            "assets": [
                {
                    "glob": "**/*",
                    "input": "./node_modules/sf-file-upload/assets/file-upload-images",
                    "output": "/assets/images"
                }
            ]
        }
    }
}

Parameters

You can customize your file upload with the following parameters

Models

export interface DocumentResponse {
  id: number;
  createDate: Date;
  filename: string;
  fileSize: number;
  mimeType: string;
}

Functions

To react to user actions like upload and delete of files you can implement this functions in your component.

Paginator translation

The Paginator is in english and can't be translated without ngx-translate.

The Host applction should have the ngx-translation up an running:

{
  "general.paginator.from.to.label": "von",
  "general.paginator.items.per.page": "Anzahl Einträge",
  "general.paginator.next.page": "Nächste Seite",
  "general.paginator.previous.page": "Vorherige Seite",
  "general.paginator.last.page": "Letzte Seite",
  "general.paginator.first.page": "Erste Seite"
}

app.module.ts
imports: [
    FileUploadModule,
    TranslateModule.forRoot({
      defaultLanguage: 'de',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }), providers: [
    { provide: MatPaginatorIntl, useClass: TranslatedPaginatorService },
  ],
]

Development

When testing the library by installing it from file sistem npm instal ../local/directory/dist/lib or by linking npm directory npm link ... you must use preserveSymlink in the host application.

angular.json

"architect": {
    "build": {
      "options": {
        "preserveSymlinks": true,
        .
        .
        .