v5.0.2

Author: Georgi Peltekov

CHANGELOG.md

@@ -1,4 +1,7 @@
 ## Change Log
+### [5.0.2](https://github.com/georgipeltekov/ngx-file-drop/compare/v5.0.1...v5.0.2) (2019-01-23)
+* Add browse file button functionality
+
 ### [5.0.1](https://github.com/georgipeltekov/ngx-file-drop/compare/v5.0.0...v5.0.1) (2019-01-18)
 * Support patch-level differences for zone.js
 * Update Readme

README.md

@@ -146,6 +146,7 @@ Name  | Description | Example |
 headertext  | Text to be displayed inside the drop box | headertext="Drop files here"
 customstyle  | Custom style class name to be used | customstyle="my-style"
 [disableIf]  | Conditionally disable the dropzone  | [disableIf]="condition"
+showBrowseBtn  | Whether browse file button should be shown  | showBrowseBtn="true"
 
 ## License
 

dist.tgz

@@ -1,6 +1,6 @@
 {
   "name": "ngx-file-drop",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -41,6 +41,7 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
+    "@angular/common": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@angular/compiler": "^7.0.0",
     "@angular-devkit/build-angular": "~0.10.2",

package-lock.json

@@ -4,5 +4,9 @@
     <div class="content">
         <ng-content></ng-content>
         {{headertext}}
+        <div *ngIf="showBrowseBtn">
+            <input type="file" id="selectedFile" (change)="uploadFiles($event)" multiple style="display: none;" /> 
+            <input type="button" class="btn btn-primary btn-xs" value="Custom Btn " onclick="document.getElementById('selectedFile').click();" />       
+        </div>        
     </div>
 </div>

package.json

@@ -20,6 +20,8 @@ export class FileComponent implements OnDestroy {
   customstyle: string = null;
   @Input()
   disableIf: boolean = false;
+  @Input()
+  showBrowseBtn: boolean = false;
 
   @Output()
   public onFileDrop: EventEmitter<UploadEvent> = new EventEmitter<UploadEvent>();
@@ -39,6 +41,9 @@ export class FileComponent implements OnDestroy {
 
   numOfActiveReadEntries = 0
 
+  length;
+  items;
+
   constructor(
     private zone: NgZone,
     private renderer: Renderer
@@ -75,29 +80,37 @@ export class FileComponent implements OnDestroy {
   }
 
   dropFiles(event: any) {
+    this.dragoverflag = false;
+    event.dataTransfer.dropEffect = 'copy';
+    if (event.dataTransfer.items) {
+      this.length = event.dataTransfer.items.length;
+      this.items = event.dataTransfer.items;
+    } else {
+      this.length = event.dataTransfer.files.length;
+      this.items = event.dataTransfer.files;
+    }
+    this.checkFiles();
+  }
+
+  uploadFiles(event: any) {
+    if (event.srcElement) { 
+      this.items = event.srcElement.files;
+      this.length = this.items.length;
+      this.checkFiles();
+    }
+  }
+
+  checkFiles() {
     if (!this.globalDisable && !this.disableIf) {
-      this.dragoverflag = false;
-      event.dataTransfer.dropEffect = 'copy';
-      let length;
-      if (event.dataTransfer.items) {
-        length = event.dataTransfer.items.length;
-      } else {
-        length = event.dataTransfer.files.length;
-      }
 
-      for (let i = 0; i < length; i++) {
+      for (let i = 0; i < this.length; i++) {
         let entry: FileSystemEntry;
-        if (event.dataTransfer.items) {
-          if (event.dataTransfer.items[i].webkitGetAsEntry) {
-            entry = event.dataTransfer.items[i].webkitGetAsEntry();
-          }
-        } else {
-          if (event.dataTransfer.files[i].webkitGetAsEntry) {
-            entry = event.dataTransfer.files[i].webkitGetAsEntry();
-          }
+        if(this.items[i].webkitGetAsEntry){
+          entry = this.items[i].webkitGetAsEntry();
         }
+         
         if (!entry) {
-          const file: File = event.dataTransfer.files[i];
+          const file: File = this.items[i];
           if (file) {
             const fakeFileEntry: FileSystemFileEntry = {
               name: file.name,

src/lib/ngx-drop/file-drop.component.html

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {FileComponent} from './file-drop.component';
 
 @NgModule({
   declarations: [
     FileComponent,
   ],
   exports: [FileComponent],
-  imports: [],
+  imports: [CommonModule],
   providers: [],
   bootstrap: [FileComponent],
 })