Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
ngx-file-drop
Advanced tools
Angular ngx-file-drop - Simple desktop file and folder drag and drop
Weekly downloads
Readme
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
You can check the DEMO of the library
npm install ngx-file-drop --save
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);
}
}
<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>
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" |
FAQs
Angular ngx-file-drop - Simple desktop file and folder drag and drop
The npm package ngx-file-drop receives a total of 41,216 weekly downloads. As such, ngx-file-drop popularity was classified as popular.
We found that ngx-file-drop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.