Lnl-files-manager NPM

LNL FILES MANAGER

Overview

This plugin allows the management of files to download in an angular application.

Prerequisites

Make sure you have correctly installed:

Jquery
Font-awesome
Bootstrap

Installation

run this command: npm install --save lnl-files-manager

Usage

in you module

import { NgModule } from '@angular/core';
...
import { LnlFilesManagerModule } from 'lnl-files-manager'; //<==== import module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    LnlFilesManagerModule //<===== include module here
  ],
  providers: []
})
export class MyModule { }

In your component.html

<button type="button" lnlFmTrigger="#input1" class="btn btn-primary">Trigger</button>

<input type="file" multiple="" lnlFmInput class="form-control" id="input1" placeholder="Input field">

<lnl-fm-output (files)="handleFiles($event)" (errors)="handleErrors($event)" [multiple]="true" selector="#input1"></lnl-fm-output>

In your component.ts

import { Component, OnInit } from '@angular/core';
import { LnlFilesManagerService, ParamsModel, FileManagerModel } from 'lnl-files-manager';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
  files: FileManagerModel[] = [];
  files2: FileManagerModel[] = [];
  params: ParamsModel[] = []; 
  constructor(private fmService: LnlFilesManagerService){
  	this.params = [
      new ParamsModel('firstname', 'John'),
      new ParamsModel('lastname', 'Doe')
    ];
  }

  ngOnInit(){
  	let allFiles: FileManagerModel[] = this.fmService.concatArrays(files, files2);
    this.fmService.submit('http://api/url', 
      this.fmService.buildFormData(allFiles, this.params))
    .subscribe(data => {
      // backend response
    });
  }

  handleFiles(event){
    this.files = event;
    console.log('FILES', event);
  }

  handleErrors(event){
    console.log('ERRORS', event);
  }
}

Parameters

These following parameters are used on lnl-fm-output componnent.

Inputs

hint: this is the text that appears when no file is loaded
accept: take by default the value of the input to which it is linked
multiple: this attribute is true or false. It defines the method of loading files
name: it defines the name of the files to upload. The name should never be followed by []. The script does it.
max_upload_size: set the maximum size of the files to upload for an input
max_files_number: set the maximum files to upload for an input. Default value is -1

Outputs

errors: Returns a message when an error occurs
files: returns the array of selected files

Functions

submit(url:string, data: FormData):void
buildFormData(files: FileManagerModel[], params: ParamsModel[], multiple: boolean): FormData
concatArrays(tab1: any[], tab2: any[]): any[]