Package Exports
- ngx-file-drop
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-file-drop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Overview
An Angular 4 & 5 module for simple desktop file and folder drag and drop
DEMO
You can check the DEMO of the library
Installation
npm install ngx-file-drop --saveUsage
Simple usage example can be found in the sandbox folder
Importing The 'ngx-file-drop' Module
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 { FileDropModule } from 'ngx-file-drop';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
FileDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Enabling File Drag
import { Component } from '@angular/core';
import { UploadEvent, UploadFile } from 'ngx-file-drop';
@Component({
selector: 'demo-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public files: UploadFile[] = [];
public dropped(event: UploadEvent) {
this.files = event.files;
for (const file of event.files) {
file.fileEntry.file(info => {
console.log(info);
});
}
}
public fileOver(event){
console.log(event);
}
public fileLeave(event){
console.log(event);
}
}
<div class="center">
<file-drop headertext="Drop files here" (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<span>optional content (don't set headertext then)</span>
</file-drop>
<div class="upload-table">
<table class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody class="upload-name-style">
<tr *ngFor="let item of files; let i=index">
<td><strong>{{ item.relativePath }}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>Parameters
| Name | Description | Example |
|---|---|---|
| (onFileDrop) | On drop function called after the files are read | (onFileDrop)="dropped($event)" |
| (onFileOver) | On drop over function | (onFileOver)="fileOver($event)" |
| (onFileLeave) | On drop leave function | (onFileOver)="fileLeave($event)" |
| headertext | Text to be displayed inside the drop box | headertext="Drop files here" |
| customstyle | Custom style class name to be used | customstyle="my-style" |