@rign/angular2-filemanager

Angular2 Filemanager

This project is a very simple Angular2 file manager.

Features

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 constant as a configuration service

@NgModule({
  ...
  imports: [
    ...,
    FileManagerModule
  ],
  providers: [
    {provide: 'fileManagerConfiguration', useValue: 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. 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
• removeFile(file: IOuterFile): Observable; - remove single file
• 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

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