Have ideas to improve npm?Join in the discussion! »

    ngx-file-drop
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.2 • Public • Published

    npm npm downloads Travis MIT licensed

    Overview

    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 and Safari are 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

    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

    Install

    npm i ngx-file-drop

    DownloadsWeekly Downloads

    186,303

    Version

    11.0.2

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar