Package Exports
- ngx-file-drop-temp
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-temp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Overview
This is temporary package, which resolve some issues on ngx-file-drop main repository and it's not planned to be maintained.
An Angular 11 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
npm install ngx-file-drop --saveUsage
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 { NgxFileDropModule } from 'ngx-file-drop';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgxFileDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Enabling File Drag
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);
}
}
<div class="center">
<ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
Optional custom content that replaces the the entire default content.
<button type="button" (click)="openFileSelector()">Browse Files</button>
</ng-template>
</ngx-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 | (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
Change Log
Donate Crypto
- Bitcoin: 18yJcRSyY7J9K7kHrkNQ2JspLfSgLKWUnh
- Ethereum: 0xdF1E80c91599CA6d4a8745888e658f45B86b0FEd