ngx-ffm

Angular FTP File Manager

This is an FTP client for Angular.

Features

1. File upload to FTP server. (single)
2. File download from FTP server. (single or multiple)
3. File delete from FTP server. (single or multiple)
4. Displays the specified directory's file list.

Getting started

Prerequisites:

npm install @angular/material
npm install @angular/flex-layout

Installation

npm install ngx-ffm

App Module

import { NgxFfmModule } from 'projects/ngx-ffm/src/public-api';
// And the material modules ...
...
 imports: [
     NgxFfmModule.forRoot({
     apiHost: 'http://127.0.0.1:5000/api'
    })
 ],
 ...
 

Usage

Html

<ngx-ffm [input]="file"></ngx-ffm>

Typescript

App Component

import { NgxFfmComponent } from 'projects/ngx-ffm/src/public-api';
...
file: File; // ngx-ffm type
...
title = 'filemanager';
 
ngOnInit(): void {
    this.file = {
      filePath : '/filepath/to/your/server/directory'
      // and the optional fields
    };
  }

Ngx-ffm Service

getDocuments(filepath) // Get files from the FTP server using the filepath given in the parameter
 
async getDocumentOpen(filename, filepath) // Download the specified file(s) from the FTP server using the filepath given in the parameter.
 
async postDocument(formData, filepath) // Upload the specified file from the FTP server using the filepath given in the parameter. formData --> file object
 
async deleteDocumentLocal(filename) // Delete the specified file from the local file system
 
deleteDocument(filenames, filepath) // Delete the specified file(s) from the FTP server using the filepath given in the paramerter

File-manager model

export class File {
    filePath?: string;  // FTP server directory filepath
    delete?: boolean;  // displays the 'download' button, optional, default value is true
    download?: boolean; // displays the 'download' button, optional, default value is true
    upload?: boolean; // displays the 'upload' button, optional, default value is true
}