wKoza

import { Component, OnInit } from '@angular/core';
import { FileItem, HttpClientUploadService } from '@wkoza/ngx-upload';


@Component({
    selector: 'app-root',
    templateUrl: './simple.component.html',
    styleUrls: ['./simple.component.css']
})
export class SimpleBootstrapComponent implements OnInit {

wKoza

optionsInput: InputFileOptions = {
  multiple: true,
  accept: [MineTypeEnum.Image, MineTypeEnum.Application_Pdf]
};

wKoza

<button mat-raised-button [color]="'primary'" >
   <ng-template ngxInputFile> Upload local files</ng-template>
</button>

wKoza

<span class="btn btn-outline-success btn-s" *ngxInputFile>Upload local files</span>

wKoza

<div class="my-drop-zone" ngxDragAndDrop *ngxInputFile>
        Drop files here to upload
</div>

wKoza

<div class="my-drop-zone" ngxDragAndDrop="ngxDropTargetOptions">
        Drop files here to upload
</div>

wKoza

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    NgxUploadModule.forRoot(ngxDropTargetOptions)
  ]
})
export class AppModule {}

wKoza

export const ngxDropTargetOptions: DropTargetOptions = {
  color: 'dropZoneColor',
  colorDrag: 'dropZoneColorDrag',
  colorDrop: 'dropZoneColorDrop'
};

wKoza

.dropZoneColor {
  border: 3px dotted rgba(0,0,0,0.08);
  background-color: rgba(0,0,0,0.12)
}

.dropZoneColorDrag {
  border: 3px dotted rgba(0,0,0,0.28);
  background-color: grey
}

wKoza

.my-drop-zone {
  width: 300px;
  height: 300px;
  cursor: pointer;
  padding: 1em;
  opacity: 0.4;
  text-align: center;
}