Skip to content

Instantly share code, notes, and snippets.

🌈
I'm fine

William Koza wKoza

View GitHub Profile
View upload.component.ts
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 {
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>
</button>
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
</div>
View dropzone.html
<div class="my-drop-zone" ngxDragAndDrop="ngxDropTargetOptions">
Drop files here to upload
</div>
View app.module.ts
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
NgxUploadModule.forRoot(ngxDropTargetOptions)
]
})
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;
}
You can’t perform that action at this time.