ft115637850 / ngx-folder-uploader

Angular Folder Uploader

This is an Angular library for folder upload. This library only provides the core behavior of folder upload. Drag folders or files into the dropzone area. By event, it will send you the data to display or to upload. For appearance, you can define whatever you want. And because most frontend projects have their own services to send data to backend, this lib doesn't encapsulate POST method. Instead, it pass out the file data for you to post in your way.

Browser versions tested

• Google Chrome 70
• Mozilla Firefox 63
• Apple Safari 11.1.0

Installing an usage

npm i ngx-folder-uploader-lib --save

Load the module for your app

import { NgxFolderUploaderLibModule } from 'ngx-folder-uploader-lib';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    NgxFolderUploaderLibModule
  ],
  providers: [],
})

Use it in your HTML template

<div id="dropzone" fuDropzone (filesLoaded)="onFilesLoaded($event)" (dropZoneActive)="onActive()" (dropZoneInactive)="onInactive()" (error)="onErr($event)" />

fuDropzone              // Used to declare dropzone area.
(filesLoaded)           // Event handler for dropzone load complete event. 
                        // It sends out
                        // folderData -- this is used for display folder structure.
                        // filesData  --  this is used for POST files to backend.
(dropZoneActive)        // Event handler for the dropzone active event.
(dropZoneInactive)      // Event handler for the dropzone inactive event.
(error)                 // Event handler for the dropzone error event.

For more detail, check src/app as example.