Socket
Socket
Sign inDemoInstall

ngx-file-drop

Package Overview
Dependencies
5
Maintainers
1
Versions
72
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-file-drop

Angular ngx-file-drop - Simple desktop file and folder drag and drop


Version published
Maintainers
1
Weekly downloads
50,745
decreased by-10%

Weekly downloads

Readme

Source

npm npm downloads Travis MIT licensed

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

npm install ngx-file-drop --save

Usage

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

NameDescriptionExample
(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)"
acceptString of accepted formatsaccept=".png"
directoryWhether directories are accepteddirectory="true"
dropZoneLabelText to be displayed inside the drop boxdropZoneLabel="Drop files here"
dropZoneClassNameCustom style class name(s) to be used on the "drop-zone" areadropZoneClassName="my-style"
contentClassNameCustom style class name(s) to be used for the content areacontentClassName="my-style"
[disabled]Conditionally disable the dropzone[disabled]="condition"
[showBrowseBtn]Whether browse file button should be shown[showBrowseBtn]="true"
browseBtnClassNameCustom style class name(s) to be used for the buttonbrowseBtnClassName="my-style"
browseBtnLabelThe label of the browse file buttonbrowseBtnLabel="Browse files"
multipleWhether multiple or single files are acceptedmultiple="true"
useDragEnterUse dragenter event instead of dragoveruseDragEnter="true"

License

MIT

Change Log

CHANGELOG

Donate Crypto

  • Bitcoin: 18yJcRSyY7J9K7kHrkNQ2JspLfSgLKWUnh
  • Ethereum: 0xdF1E80c91599CA6d4a8745888e658f45B86b0FEd

Keywords

FAQs

Last updated on 19 Jun 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc