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

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

Demo

To run local demo you have to clone repo and start

ng start --project=filemanager-example

Or you can see it online demo with local storage

License

Licensed under MIT.