import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { NgxFileDropModule } from 'ngx-file-drop'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, NgxFileDropModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

import { Component } from '@angular/core'; import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop'; @Component({ selector: 'demo-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { public files: NgxFileDropEntry[] = []; public dropped(files: NgxFileDropEntry[]) { this.files = files; for (const droppedFile of files) { // Is it a file? if (droppedFile.fileEntry.isFile) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; fileEntry.file((file: File) => { // Here you can access the real file console.log(droppedFile.relativePath, file); /**  // You could upload it like this:  const formData = new FormData()  formData.append('logo', file, relativePath)   // Headers  const headers = new HttpHeaders({  'security-token': 'mytoken'  })   this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })  .subscribe(data => {  // Sanitized logo returned from backend  })  **/ }); } else { // It was a directory (empty directories are added, otherwise only files) const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry; console.log(droppedFile.relativePath, fileEntry); } } } public fileOver(event){ console.log(event); } public fileLeave(event){ console.log(event); } }