ngx-upload-dragdrop

NgxUploadDragdrop

This library was generated with Angular CLI version 8.2.0.

Installation

Add ngx-upload-dragdrop module as dependency to your project.

npm install ngx-upload-dragdrop --save

Include NgxUploadDragdropModule into your main AppModule or in module where you will use it.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUploadDragdropModule } from 'ngx-upload-dragdrop';

 
@NgModule({
  imports: [
    BrowserModule,
    NgxUploadDragdropModule
  ],
  declarations: [ AppComponent ]
})
export class AppModule {}

or include NgxUploadDragdropModule into your SharedModule. This could be usefull if your project has nested Modules.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUploadDragdropModule } from 'ngx-upload-dragdrop';
...
 
@NgModule({
  imports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  exports: [
    CommonModule,
    NgxUploaderModule,
    ...
  ],
  ...
})
export class SharedModule {
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared.module';
 
@NgModule({
  imports: [
    BrowserModule,
    SharedModule
  ],
  declarations: [ AppComponent ]
})
export class AppModule {}

#Template Code ##For whole template code please check here.

<enl-ngx-upload-dragdrop [uploadIconClass]="upload_icon_class" [trashIconClass]="trash_icon_class"  (onFileDropped)="uploadFiles($event)"></enl-ngx-upload-dragdrop>

#Typescript Code ##For whole Typescript code please check here.

upload_icon_class = "fas fa-upload";
trash_icon_class = "fas fa-trash fa-1x";

uploadFiles(event) {
    console.log(event);
  }

Please use Fontawesome url on index.html

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >

##Upcoming features

• Presignin
• File type restrictions
• Icons
• Customclass
• File size restrictions
• Onsuccess
• OnFailure