6.0.2 • Published 5 months ago

ng6-file-man v6.0.2

Weekly downloads
37
License
MIT
Repository
github
Last release
5 months ago

FileMan

Angular File Manager library.

Table of contents

Features

  • themeable
  • i18n support
  • upload (/w drag'n drop)
  • customizable parts
  • FileManager as button popup

Installing

Prerequisities

  • Downloaded and added fontawesome@^5.1.1
Downloading npm package

Install ng6-file-man

npm install ng6-file-man
-- OR --
yarn add ng6-file-man
Adding styles

In angular.json add to styles

"node_modules/ng6-file-man/assets/ng6-file-man-styles.scss",

Or use SASS in your project

//globalStyles.scss

@import "~ng6-file-man/assets/ng6-file-man-styles.scss";
Using in app

Add module

// app.module.ts

import {FileManagerModule} from 'ng6-file-man';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FileManagerModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Create config in constructor

// app.component.ts
  
const treeConfig: ConfigInterface = {
  baseURL: 'http://localhost:8080/',
  api: {
    listFile: 'api/file/list',
    uploadFile: 'api/file/upload',
    downloadFile: 'api/file/download',
    deleteFile: 'api/file/remove',
    createFolder: 'api/file/directory',
    renameFile: 'api/file/rename',
    searchFiles: 'api/file/search'
  },
  options: {
    allowFolderDownload: DownloadModeEnum.DOWNLOAD_FILES, //alternatively DOWNLOAD_DISABLED,DOWNLOAD_ALL
    showFilesInsideTree: false,
    openFolderOnDoubleClick: true,
    showFolderOptions: false
  }
};

Then save your TreeConfig and create new TreeModel

// app.component.ts
  
this.tree = new TreeModel(treeConfig)

Finaly, add it into html

<fm-file-manager [tree]="tree"></fm-file-manager>

Backend

UPDATE: Express API availible at https://github.com/Chiff/ng6-file-man-express

List files / folders

Method

  • Get

Parameters we are sending

  • parentPath (e.g. localhost:8080/api/file/list?parentPath=/folder1/folder2)

We are expecting response

  • Array of nodes with:
{
  size: string           // e.g. '3 KB'
  url?: string            // download url
  id: string | number;   // id can be path or database id
  dir: bool              // is current node dir?
  path: string           // path to current item (e.g. /folder1/someFile.txt)
  name?: string          // optional (but we are using id as name if name is not present) (e.g. someFile.txt)
}

Upload

This request is in form for Fine Uploader traditional server

Params

  • qqfile: MultipartFile[]
  • qquuid: String
  • qqfilename: String
  • qqpartindex: int
  • qqtotalparts: int
  • qqtotalfilesize: long
  • parentPath: String

Download

Method

  • Get

Parameters we are sending

  • path (e.g. localhost:8080/api/file/download?path=/folder1/someFile.txt)

Create directory

Method

  • POST

Parameters we are sending

  • dirName
  • parentPath

(e.g. localhost:8080/api/file/directory?parentPath=/folder1&dirName=newDir)

Remove file / folder

Method

  • DELETE

Parameters we are sending

  • path

(e.g. localhost:8080/api/file/remove?path=/folder1/newDir)

Rename file / folder

Method

  • POST

Parameters we are sending

  • path
  • newName

(e.g. localhost:8080/api/file/rename?path=/folder1/newDir&newName=newDirName)

Search

Method

  • GET

Parameters we are sending

  • query

(e.g. localhost:8080/api/file/search?query=searchTerm)

We are expecting response

  • Array of nodes with:
{
  size: string           // e.g. '3 KB'
  url?: string            // download url
  id: string | number;   // id can be path or database id
  dir: bool              // is current node dir?
  path: string           // path to current item (e.g. /folder1/someFile.txt)
  name?: string          // optional (but we are using id as name if name is not present) (e.g. someFile.txt)
}

Outputs

<fm-file-manager (itemClicked)="itemClicked($event)" ... ></fm-file-manager>

Event Types

  • select
  • download
  • rename
  • remove

Every event has node property

Inputs

nametyperequireddefault value
treeTreeModeltrue-
isPopupboolfalsefalse
languagestringfalse'en'
iconTemplateTemplateReffalse-
folderContentTemplateTemplateReffalse-
folderContentBackTemplateTemplateReffalse-
folderContentNewTemplateTemplateReffalse-
sideViewTemplateTemplateReffalse-
loadingOverlayTemplateTemplateReffalse-

SASS

Prerequisites

  • Global SASS file included in angular.json

file-manager-styles.scss !default variables

  • $main-color
  • $contrast-color
  • $text-color
  • $border-radius
  • $hasAnimations

Usage

//globalStyles.scss

$main-color: #626e80;
$text-color: black;
$contrast-color: white;
$hasAnimations: false;
$border-radius: 20px;

@import "~ng6-file-man/assets/ng6-file-man-styles.scss";

Customizing

<fm-file-manager [iconTemplate]="iconTemplate" ... ></fm-file-manager>

<!-- #iconTemplate is required, let-node is reference to node-->
<ng-template let-node #iconTemplate>
  <i class="fas fa-arrow-alt-circle-right" style="padding: 5px"></i>
  {{node.name}}
</ng-template>

Explanation

Template NameTemplate inputInput TypeTemplate Function
iconTemplatelet-nodeNodeInterfaceTree view node template
folderContentTemplatelet-nodeNodeInterfaceFolder content node template
folderContentBackTemplatelet-nodeNodeInterfaceBack button in folder content
folderContentNewTemplatelet-nodeNodeInterfaceNew button in folder content
sideViewTemplatelet-nodeNodeInterfaceData inside side view
loadingOverlayTemplatelet-timeoutMessagestringloading overlay screen

Component layout

|--------------------------------------------------|
| Nav Bar                                   Search |
|--------------------------------------------------|
|              |                   |               |
|              |                   |               |
|     Tree     |      Folder       |      Side     |
|     View     |      Content      |      View     |
|              |                   |               |
|              |                   |               |
|--------------------------------------------------|

Preview

By default, this is what component looks like (+ selected folder)

non customized default view + opened info popup

Example of customization and theming

customized default view + opened info popup

File upload

File upload

Note: in pictures above there are no translations availible, words will be translated after [lang].json is filled

i18n

  • Copy i18n file from ~node_modules/ng6-file-man/assets
  • Put it in ~src/assets/i18n/[language].json (e.g. ~src/assets/i18n/fr.json)
  • Fill empty strings with your translations (e.g. "Download": "Télécharger")
  • Set language property <fm-file-manager [language]="'fr'" ... ></fm-file-manager>
  • Voilà...

Built With

Build instructions

  1. Change package version
  2. gulp prod
  3. cd ../file-manager-lib
  4. npm publish

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

  • Martin Filo - Initial work - Chiff
  • Igor Kvasnicka - improvements and fine tuning

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Repository

Version

ng6-file-nameangular
4.0.014.3.0
5.0.015.2.8
6.0.1

5 months ago

6.0.0

5 months ago

6.0.2

5 months ago

5.0.2

11 months ago

5.0.1

11 months ago

5.0.0

11 months ago

4.0.0

2 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.6

4 years ago

2.1.5

4 years ago

2.1.4

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.0

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.12

6 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.1

6 years ago