@rign/angular2-filemanager NPM

Angular Filemanager Component

This project is a very simple Angular2 file manager.

Installation

Install npm package

npm i @rign/angular2-filemanager --save

It also require such dependencies:

@angular/animations
@angular/cdk
@angular/common
@angular/core
@angular/forms
@angular/http
@rign/angular2-tree
@ngrx/core
@ngrx/effects
@ngrx/store
angular-confirmation-popover
angular2-uuid
bootstrap
core-js
font-awesome
lodash.isequal
ng2-dnd
ng2-file-upload
ng2-img-cropper
ngx-contextmenu
rxjs
zone.js

you can install it using below command

npm i @angular/cdk @angular/common @angular/core @angular/forms @angular/http @rign/angular2- @ngrx/core @ngrx/effects @ngrx/store @ngrx/store-devtools @ngx-translate/core angular-confirmation-popover angular2-notifications angular2-uuid bootstrap core-js font-awesome lodash.isequal ng2-dnd ng2-file-upload ng2-img-cropper ngx-contextmenu rxjs zone.js --save

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,
  allowChooseMultipleFiles: true
}
...

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
allowChooseMultipleFiles - allow/disallow choose multiple files event

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

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

You have also add few other modules:

imports: [
  ...,
  BrowserAnimationsModule,
  ConfirmationPopoverModule.forRoot(),
  EffectsModule.forRoot([]),
  FileManagerModule.forRoot(fileManagerConfiguration),
  StoreModule.forRoot({}),
  TreeModule.forRoot(),
  TranslateModule.forRoot(),
]

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):

FileManagerActionTypes.CHOOSE_FILES
FileManagerActionTypes.CROP_FILE
FileManagerActionTypes.CROP_FILE_SUCCESS
FileManagerActionTypes.CROP_FILE_ERROR
FileManagerActionTypes.DELETE_FILE
FileManagerActionTypes.DELETE_FILE_SUCCESS
FileManagerActionTypes.DELETE_FILE_SELECTION
FileManagerActionTypes.DELETE_FILE_SELECTION_SUCCESS
FileManagerActionTypes.INVERSE_FILE_SELECTION
FileManagerActionTypes.LOAD_FILES
FileManagerActionTypes.LOAD_FILES_SUCCESS
FileManagerActionTypes.SELECT_ALL
FileManagerActionTypes.SELECT_FILE
FileManagerActionTypes.UNSELECT_FILE
FileManagerActionTypes.UNSELECT_ALL
FileManagerActionTypes.UPLOAD_FILE
FileManagerActionTypes.UPLOAD_FILE_ERROR
FileManagerActionTypes.UPLOAD_FILE_SUCCESS

Translation

From version 2.0.0 translation dependency is removed from @rign/angular2-filemanager. Now you have to create service which implements IFilemanagerTranslation interface:

import {IFilemanagerTranslation} from '@rign/angular2-filemanager';

export class TranslationService implements IFilemanagerTranslation {
    readonly RI_TREE_LBL_ADD_NODE = 'Add data';
    readonly RI_TREE_LBL_EDIT_NODE = 'Edit data';
    readonly RI_TREE_LBL_REMOVE_NODE = 'Delete data';
    readonly RI_TREE_LBL_DROP_ZONE = 'Drop here to move data to root level';
    readonly RI_FM_BTN_LANDSCAPE = 'Landscape';
    readonly RI_FM_BTN_PORTRAIT = 'Portrait';
    readonly RI_FM_BTN_SAVE = 'Save';
    readonly RI_FM_BTN_DELETE_YES = 'Yes';
    readonly RI_FM_BTN_DELETE_NO = 'No';
    readonly RI_FM_LBL_CHOOSE_SELECTION = 'Choose selection';
    readonly RI_FM_LBL_DELETE_SELECTION = 'Delete selection';
    readonly RI_FM_LBL_INVERSE_SELECTION = 'Inverse selection';
    readonly RI_FM_LBL_REMOVE_TITLE = 'Remove file';
    readonly RI_FM_LBL_SEARCH_FOR = 'Search for...';
    readonly RI_FM_LBL_SELECT_ALL = 'Select all';
    readonly RI_FM_LBL_UNSELECT_ALL = 'Unselect all';
    readonly RI_FM_MSG_REMOVE_QUESTION = 'You are try to delete ${FILENAME}. Are you sure?'; 
}

and set is as provider in module which use FilemanagerModule

providers: [
    TreeOneNodeService,
    {provide: FILEMANAGER_TRANSLATION_TOKEN, useClass: TranslationService},
]

Please remember to add also translations for TreeModule. Look at Translations

Notifications

Filemanager module has its own service FilemanagerNotifications which store all notifications that comes from inside of that module. You can override this service using INotificationService interface.

export interface INotificationService {
  readonly notification$: Observable<INotification>;

  send(notification: INotification): void;
}

You can listen on that notification$ property and display your own type of notification. Each notification has such interface

export interface INotification {
  type: 'alert' | 'error' | 'success';
  title: string;
  message?: string;
}

Features

v3.0.0

remove dependency to @ngx-translate/core
change translation mechanism
remove dependency to angular2-notifications, now you have to use your own notifications - see Notifications section
remove deprecated services: FileManagerDispatcherService and FileManagerActionsService

v2.1.0

update to Angular 8

v2.0.0

update to Angular 7
integration with @rign/angular2-tree in version 4.x
display current selected folder parents list
rewrite actions and dispatcher, both services will be deprecated in 3.x, from this version you should use store.dispatch and one of bellow action
- ChooseFilesAction
- CropFileAction
- CropFileErrorAction
- CropFileSuccessAction
- DeleteFileAction
- DeleteFileSuccessAction
- DeleteSelectedFilesAction
- DeleteSelectedFilesSuccessAction
- InverseFilesSelectionAction
- LoadFilesAction
- LoadFilesSuccessAction
- MoveFilesErrorAction
- MoveFilesSuccessAction
- SelectAllFilesAction
- SelectFileAction
- UnSelectAllFilesAction
- UnSelectFileAction
- UploadFilesAction
- UploadFilesErrorAction
- UploadFilesSuccessAction
use action names from FileManagerActionTypes enum, instead of properties from FileManagerActionsService
change LESS to SCSS

v1.3.0

fix issue - compilation AOT
add new event - FILEMANAGER_CHOOSE_FILES

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