Skip to content

Instantly share code, notes, and snippets.

A new opportunity ? hmmm why not

William Koza wKoza

A new opportunity ? hmmm why not
View GitHub Profile
View upload.component.ts
import { Component, OnInit } from '@angular/core';
import { FileItem, HttpClientUploadService } from '@wkoza/ngx-upload';
selector: 'app-root',
templateUrl: './simple.component.html',
styleUrls: ['./simple.component.css']
export class SimpleBootstrapComponent implements OnInit {
View options2.ts
optionsInput: InputFileOptions = {
multiple: true,
accept: [MineTypeEnum.Image, MineTypeEnum.Application_Pdf]
View material.html
<button mat-raised-button [color]="'primary'" >
<ng-template ngxInputFile> Upload local files</ng-template>
View bootstrap.html
<span class="btn btn-outline-success btn-s" *ngxInputFile>Upload local files</span>
View dropzone2.html
<div class="my-drop-zone" ngxDragAndDrop *ngxInputFile>
Drop files here to upload
View dropzone.html
<div class="my-drop-zone" ngxDragAndDrop="ngxDropTargetOptions">
Drop files here to upload
View app.module.ts
imports: [
export class AppModule {}
View options.ts
export const ngxDropTargetOptions: DropTargetOptions = {
color: 'dropZoneColor',
colorDrag: 'dropZoneColorDrag',
colorDrop: 'dropZoneColorDrop'
View styles.css
.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
View style.css
.my-drop-zone {
  width: 300px;
  height: 300px;
  cursor: pointer;
  padding: 1em;
  opacity: 0.4;
  text-align: center;