@rign/angular2-filemanager

Angular2 Filemanager

This project is a very simple Angular2 file manager.

Features

v1.2.1

• fix issue - upload files to localStorage

v1.2.0

• add "forRoot" to module initialization
• change translation module to ng2-translate
• upgrade angular to verison ^5.0.0
• upgrade @ngrx/store to version ^4.1.0 (use forFeature to init store and effects)
• upgrade @rign/angular2-tree to version 2.2.0

v1.1.0

• change store structure
• add option "remove selected files"
• add LICENSE section
• move file between folders (in the future, I would like to add possibilities to move selection of files and copy files)
• add translations

v1.0.1

• fix bugs

v1.0.0

• update angular2-tree to verison 2.x.x
• update angular to version 4.x.x
• use ngrx/store
• prepare events for all actions
• update configuration: allowed file types filter for upload files, allow limit for uploaded file
• create examples: with backend in node, without backend on local storage

v0.5.4

• fix problem with open "choose file window"

v0.5.3

• use 0.8.1 version of angular2-tree

v0.5.2

• use 0.7.0 version of angular2-tree

v0.5.1

• use 0.6.2 version of angular2-tree
• fix example

v0.5.0

• add multi selection configuration
• add onSingleFileSelect event, which could be use to select file

v0.4.4

• remove title from main template
• fix crop example
• fix preview
• fix example API

v0.4.3

• create FileManagerUploader service to control upload files, it could be override by external module

v0.4.2

• remove unnecessary export file

v0.4.1

• manage directory structure
• upload/delete files
• filter files in directory by mime types
• search file in directory by name
• preview files

Installation

Install npm package

npm i @rign/angular2-filemanager

Usage

In your project put this line

<filemanager>Loading...</filemanager>

Provide configuration

In your module add following lines with configuration

import {FileManagerModule, IFileManagerConfiguration} from '../../../main';
...
const fileManagerConfiguration: IFileManagerConfiguration = {
  urls: {
    foldersUrl: '/api/folder',
    filesUrl: /api/files,
    folderMoveUrl: '/api/folder/move'
  },
  isMultiSelection: true,
  mimeTypes: ['image/jpg', 'image/jpeg', 'image/png'],
  maxFileSize: 50 * 1024
}
... 

You can create a simple configuration object, it should contains a subset of below options

• urls
  • foldersUrl - url for create (POST), delete (DELETE), edit (PUT) and get (GET) folders
  • filesUrl - url for upload (POST), edit (PUT), delete (DELETE) and get (GET) files
  • folderMoveUrl -
• isMultiselection - allow/disallow multiselection
• mimeTypes - list of file type mimes which are allowed to upload
• maxFileSize - limit of the single file size

Then you have to provide this value as configuration for the module

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

Create API service

Now you should create your own API service to communicate with backend or use existing one FileManagerBackendApiService (remember, it should extend AbstractFileManagerApi and implements IFileManagerApi). If you create your own API service it should have implemented IFileManagerApi interface

• add(node: IOuterNode, parentNodeId: string): Observable; - create new node of the tree
• load(nodeId: string): Observable<IOuterNode[]>; - load tree branch (if nodeId is empty string it loads root level)
• move(srcNode: IOuterNode, targetNode: IOuterNode | null): Observable; - move one node (with all its sub nodes) to another parent
• update(node: IOuterNode): Observable; - update node name
• remove(nodeId: string): Observable; - remove node
• cropFile(file: IOuterFile, bounds: ICropBounds): Observable; - crop file to provided bounds
• loadFiles(nodeId: string): Observable<IOuterFile[]>; - load files from given node
• moveFile(files: IOuterFile[], node: IOuterNode = null): Observable<IOuterFile[]> - move single file to new node
• removeFile(file: IOuterFile): Observable; - remove single file
• removeSelectedFiles(selectedFiles: string[]): Observable - remove selected files
• uploadFile(file: IOuterFile): Observable; - do actions with uploaded file (real upload is done in ng2-upload-file)

All those actions should manipulate on two protected properties:

• nodes: IOuterNode[] - list of all loaded nodes
• files: IFileDataProperties[] - list of files form current node

You can see two examples of that service:

• FileManagerApiService - works on local storage
• FileManagerBackendApiService - works on backend (written in node)

Attach to any Effects

Because of using store, actions and effects you can attach to any actions by creating your own effects service. You are able to connect to actions for doing something special (but this is not obligatory, this is only possibility):

• FileManagerActionsService.FILEMANAGER_CROP_FILE
• FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS
• FileManagerActionsService.FILEMANAGER_CROP_FILE_ERROR
• FileManagerActionsService.FILEMANAGER_DELETE_FILE
• FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS
• FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION
• FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS
• FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION
• FileManagerActionsService.FILEMANAGER_LOAD_FILES
• FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS
• FileManagerActionsService.FILEMANAGER_SELECT_ALL
• FileManagerActionsService.FILEMANAGER_SELECT_FILE
• FileManagerActionsService.FILEMANAGER_UNSELECT_FILE
• FileManagerActionsService.FILEMANAGER_UNSELECT_ALL
• FileManagerActionsService.FILEMANAGER_UPLOAD_FILE
• FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR
• FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS

Translation

Filemanager module has configured translation for english (default language) and polish. You can add translations for other languages as it is described in Translate Module documentation. In Filemanager Module you are able to set following labels:

• RI_TREE_LBL_ADD_NODE - Add node
• RI_TREE_LBL_EDIT_NODE - Edit node
• RI_TREE_LBL_REMOVE_NODE - Delete node
• RI_TREE_LBL_DROP_ZONE - Drop here to move node to root level
• RI_FM_BTN_LANDSCAPE - Landscape
• RI_FM_BTN_PORTRAIT - Portrait
• RI_FM_BTN_SAVE - Save
• RI_FM_LBL_DELETE_SELECTION - Delete selection
• RI_FM_LBL_INVERSE_SELECTION - Inverse selection
• RI_FM_LBL_SEARCH_FOR - Search for...
• RI_FM_LBL_SELECT_ALL - Select all
• RI_FM_LBL_UNSELECT_ALL - Unselect all

To change language to polish you have to add these lines to your app module:

export class AppModule {
  public constructor(translate: TranslateService) {
    translate.use('pl');
  }
}

Demo

To run local demo you have to serve frontend and backend. To do this run:

• frontend:

  • using local storage

    npm start
    

  • or using real backend

    npm run startWithBackend
    

• backend

    npm run backend
  

Or you can see online demo with local storage

License

Licensed under MIT.