Mat-upload NPM

This project made by ZELLKON.

Github

NPM Package

Installation

npm i mat-upload

Implement

Import

import { MatUploadModule } from 'mat-upload';

Add Module

@NgModule({
  imports: [
    ...
    MatUploadModule
  ],
  declarations: [	
    AppComponent,
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use library in your component

Last Update: Angular 15 remove fxLayout, change preview image to image icon

  <div>
    <mat-upload 
    [options]="yourOption"
    formControlName="file"></mat-upload>
  </div>

Selector: mat-upload

Properties

Name	Description
Latest update	combine @Input() options: MatUploadOptions
label: string	The label for upload card.
description: string	Description for drag and drop.
serverUrl: string or undefined	Environment for case image Url return `Test/sample.png` this will returun serverUrl + `Test/sample.png`.
apiUrl: string	Environment api server for upload file.
typeUpload: string	`single` or `multiple` or `dragNdrop`
accessToken: string or undefined	Your bearer token.
location: string or undefined	Your location upload.
accept: string	Read more https://www.w3schools.com/tags/att_input_accept.asp . Example: `image/png,image/jpg`
valueKey: string	This's key of response object. Example: `{error: 0, message: 'success'}` =>`keyUrl = "message"` => `formControl.value = ['success']`
messageUploadError: string	This is error upload message.
messageExtensionError: string	This is error extension message.
snackBarClass: string	Defined class for SnackBar. Example: `snackBarClass="errorUpload"` and add `.errorUpload{background: red; color: white;}` into your `styles.scss`. Update css for Angular 15 example: `.mat-mdc-snack-bar-container {&.error-snackBar {--mdc-snackbar-container-color: #2196f3; --mat-mdc-snack-bar-button-color: #fff; --mdc-snackbar-supporting-text-color: #fff; }}`
requestParam = 'file'	Defined param for request.
errorKey = 'm'	Defined error message for response.
@Output() delete$: event	This is file url delete.
@Output() onClickItem: event	Emit current url of file.