# Angular FTP File Manager

## This is an FTP client for Angular.

![Image of File manager](https://imgur.com/xp6WuTX.png)

## 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

``` ts
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
``` html
<ngx-ffm [input]="file"></ngx-ffm>
```
#### Typescript
#### App Component
``` ts
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

```ts
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

```ts
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
}
```