ngx-file-drop

   

Overview

An Angular module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.

For previous Angular support please use older versions.

This library relies on HTML 5 File API thus IE is not supported

DEMO

You can check the DEMO of the library

Installation

``bash
npm install ngx-file-drop --save
`

Usage

$3

`TypeScript
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 { }

`

$3

`TypeScript
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);
}
}


`
`HTML

(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">

Optional custom content that replaces the the entire default content.
Browse Files

Name
{{ item.relativePath }}

``

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| (onFileLeave)="fileLeave($event)"
accept | String of accepted formats | accept=".png"
directory | Whether directories are accepted | directory="true"
dropZoneLabel | Text to be displayed inside the drop box | dropZoneLabel="Drop files here"
dropZoneClassName | Custom style class name(s) to be used on the "drop-zone" area | dropZoneClassName="my-style"
contentClassName | Custom style class name(s) to be used for the content area | contentClassName="my-style"
\[disabled\] | Conditionally disable the dropzone | \[disabled\]="condition"
\[showBrowseBtn\] | Whether browse file button should be shown | \[showBrowseBtn\]="true"
browseBtnClassName | Custom style class name(s) to be used for the button | browseBtnClassName="my-style"
browseBtnLabel | The label of the browse file button | browseBtnLabel="Browse files"
multiple | Whether multiple or single files are accepted | multiple="true"
useDragEnter | Use dragenter event instead of dragover | useDragEnter="true"

License

MIT

Change Log

CHANGELOG

Donate Crypto

* Bitcoin: 18yJcRSyY7J9K7kHrkNQ2JspLfSgLKWUnh
* Ethereum: 0xdF1E80c91599CA6d4a8745888e658f45B86b0FEd