diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..86659e2
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,25 @@
+sudo: required
+dist: trusty
+language: node_js
+node_js: "6.11.0"
+
+cache:
+  directories:
+    - node_modules
+
+apt:
+  sources:
+    - google-chrome
+  packages:
+    - google-chrome-stable
+    - google-chrome-beta
+
+install:
+  - npm i -g @angular/cli
+  - npm i
+  - npm test
+
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..d4d931c
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2017 The angular-translate team and Pascal Precht
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index c07eed6..cdcbb3a 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,14 @@ 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" 
@@ -59,37 +67,110 @@ Install npm package
   
 In your project put this line
   
-    <filemanager  [multiSelection]="isMultiSelection" (onSingleFileSelect)="selectFile($event)">Loading...</filemanager>
-
-## Override API
-
-To override endpoints to manage files and directories provide special provider in you module
-
+    <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({
-        ...
-        providers: [
-            ...
-            {
-                provide: 'fileManagerUrls',
-                useValue: {foldersUrl: '/api/filemanager/folder', filesUrl: '/api/filemanager/file'}
-            }
-        ]
-        ...
+      ...
+      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<IOuterNode>;_ - 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<IOuterNode>;_ - move one node (with all its sub nodes) to another parent
+* _update(node: IOuterNode): Observable<IOuterNode>;_ - update node name 
+* _remove(nodeId: string): Observable<IOuterNode>;_ - remove node
+* _cropFile(file: IOuterFile, bounds: ICropBounds): Observable<IOuterFile>;_ - crop file to provided bounds 
+* _loadFiles(nodeId: string): Observable<IOuterFile[]>;_ - load files from given node
+* _removeFile(file: IOuterFile): Observable<boolean>;_ - remove single file
+* _uploadFile(file: IOuterFile): Observable<IOuterFile>;_ - 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_](src/store/fileManagerApi.service.ts) - works on local storage
+* [_FileManagerBackendApiService_](src/store/fileManagerBackendApi.service.ts) - 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 demo you have to serve frontend and backend. To do this run:
+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
 
-## TODO
-
-* files upload progress
-* multi selection events (delete, select)
+Or you can see online [demo](https://qjon.github.io/angular2-filemanager/) with _local storage_
diff --git a/angular-cli.json b/angular-cli.json
index 2e5935e..f9cf3ba 100644
--- a/angular-cli.json
+++ b/angular-cli.json
@@ -1,11 +1,12 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.32.3",
+    "version": "1.2.0",
     "name": "angular2-filemanager"
   },
   "apps": [
     {
+      "name": "withoutBackend",
       "root": "demo/src",
       "outDir": "dist",
       "assets": [
@@ -16,8 +17,37 @@
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
-      "test": "test.ts",
+      "test": "../../src/test.ts",
       "tsconfig": "tsconfig.json",
+      "testTsconfig": "../../src/tsconfig.spec.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "../../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../../node_modules/font-awesome/css/font-awesome.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    },
+    {
+      "name": "withBackend",
+      "root": "demo/src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "icons",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "mainWithBackend.ts",
+      "polyfills": "polyfills.ts",
+      "test": "../../src/test.ts",
+      "tsconfig": "tsconfig.json",
+      "testTsconfig": "../../src/tsconfig.spec.json",
       "prefix": "app",
       "mobile": false,
       "styles": [
diff --git a/demo/backend/index.js b/demo/backend/index.js
index 6f6bf53..0947435 100644
--- a/demo/backend/index.js
+++ b/demo/backend/index.js
@@ -37,15 +37,16 @@ app.use(express.static(basePath));
 
 app.get('/folders', function (req, res) {
   var paths = [];
-  var subdir = req.query.nodeId || '';
-  var items = fs.readdirSync(basePath + subdir);
+  var subNode = req.query.nodeId || '';
+  var items = fs.readdirSync(basePath + subNode);
 
   for (var i = 0; i < items.length; i++) {
     var name = items[i];
-    var stat = fs.statSync(basePath + subdir + '/' + name);
+    var stat = fs.statSync(basePath + subNode + '/' + name);
     if (stat && stat.isDirectory()) {
       var dir = {
-        id: subdir + '/' + name,
+        id: subNode + '/' + name,
+        parentId: subNode || null,
         name: name,
         children: []
       };
@@ -59,79 +60,105 @@ app.get('/folders', function (req, res) {
 });
 
 app.put('/folders', function (req, res) {
-  var folder = req.body;
+  var node = req.body;
 
-  if (isDirectory(folder.id)) {
-    var subdirs = folder.id.split('/');
-    subdirs[subdirs.length - 1] = folder.name;
-    var newDirName = subdirs.join('/');
+  if (isDirectory(node.id)) {
+    var subNodes = node.id.split('/');
+    subNodes[subNodes.length - 1] = node.name;
+    var newNodeName = subNodes.join('/');
 
-    if (isDirectory(newDirName)) {
+    if (isDirectory(newNodeName)) {
       res.sendStatus(403);
       res.json({msg: 'Directory already exists'});
     }
     else {
-      fs.renameSync(basePath + folder.id, basePath + newDirName);
+      fs.renameSync(basePath + node.id, basePath + newNodeName);
 
-      if (isDirectory(newDirName)) {
-        folder.id = newDirName;
-        res.json(folder);
+      if (isDirectory(newNodeName)) {
+        node.id = newNodeName;
+        res.json(node);
       } else {
         res.sendStatus(403);
-        res.json({msg: 'Could not change directory name'});
+        res.json({msg: 'Could not change node name'});
       }
     }
 
   } else {
     res.sendStatus(403);
-    res.json({msg: 'Directory does not exist'});
+    res.json({msg: 'Node does not exist'});
   }
-
 });
 
+app.put('/folders/move', function (req, res) {
+  var data = req.body;
+  console.log(data);
+
+  if (data.target === null) {
+    data.target = '';
+  }
+
+  if (isDirectory(data.source) && isDirectory(data.target)) {
+    var subNodes = data.source.split('/');
+    var dirName = subNodes[subNodes.length - 1];
+    var newNodeName = data.target + '/' + dirName;
+
+    fs.renameSync(basePath + data.source, basePath + newNodeName);
+    var dir = {
+      id: newNodeName,
+      name: dirName,
+      parentId: data.target,
+      children: []
+    };
+
+    res.json(dir);
+  } else {
+    res.sendStatus(403);
+    res.json({msg: 'Node does not exist'});
+  }
+
+});
 
 app.post('/folders', function (req, res) {
   var data = req.body;
-  var folder = data.node;
+  var node = data.node;
   var parentFolderId = data.parentNodeId || '';
-  var newDirId = parentFolderId + '/' + folder.name;
+  var newNodeId = parentFolderId + '/' + node.name;
 
-  if (!isDirectory(newDirId)) {
-    fs.mkdirSync(basePath + newDirId);
+  if (!isDirectory(newNodeId)) {
+    fs.mkdirSync(basePath + newNodeId);
 
-    if (isDirectory(newDirId)) {
+    if (isDirectory(newNodeId)) {
       res.json({
-        id: newDirId,
-        name: folder.name,
+        id: newNodeId,
+        name: node.name,
+        parentId: parentFolderId || null,
         children: []
       });
     } else {
       res.sendStatus(403);
-      res.json({msg: 'Directory has not been added'});
+      res.json({msg: 'Node has not been added'});
     }
 
   } else {
     res.sendStatus(403);
-    res.json({msg: 'Directory exists'});
+    res.json({msg: 'Node exists'});
   }
-
 });
 
 
 app.delete('/folders', function (req, res) {
   var data = req.body;
-  var folderId = data.nodeId || null;
+  var nodeId = data.nodeId || null;
 
-  if (isDirectory(folderId)) {
-    fs.rmdirSync(basePath + folderId);
+  if (isDirectory(nodeId)) {
+    fs.rmdirSync(basePath + nodeId);
     res.json({
-      success: !isDirectory(folderId)
+      success: !isDirectory(nodeId)
     });
   } else {
     res.sendStatus(403);
     res.json({msg: 'Directory exists'});
   }
-
 });
 
 
@@ -155,7 +182,7 @@ function prepareFile(filePath) {
     name: name,
     thumbnailUrl: src,
     url: src,
-    mime: mimeType,
+    type: mimeType,
     width: isImage ? dimensions.width : 0,
     height: isImage ? dimensions.height : 0
   };
@@ -182,6 +209,7 @@ app.get('/files', function (req, res) {
 
 app.post('/files', function (req, res) {
   var fileExist = false;
+  var newPath;
   var form = new formidable.IncomingForm();
 
   form.multiples = true;
@@ -190,7 +218,6 @@ app.post('/files', function (req, res) {
 
   form.on('file', function (field, file) {
     var folder = req.header('folderId');
-    var newPath;
 
     file.name = file.name.replace(/[^A-Za-z0-9\-\._]/g, '');
 
@@ -217,7 +244,7 @@ app.post('/files', function (req, res) {
       res.statusCode = 409;
       res.end('error');
     } else {
-      res.end('success');
+      res.json(prepareFile(newPath));
     }
   });
 
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 94ce9cb..e32d140 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -2,9 +2,9 @@
     <h1>Filemanager</h1>
     <div class="configuration-bar">
         <button class="btn btn-primary" (click)="toggleMultiSelection()">
-            <i class="fa" [ngClass]="{'fa-check-square': isMultiSelection, 'fa-square': !isMultiSelection}"></i>
+            <i class="fa" [ngClass]="{'fa-check-square': this.fileManagerConfiguration.isMultiSelection, 'fa-square': !this.fileManagerConfiguration.isMultiSelection}"></i>
             <span>Use multiselection</span>
         </button>
     </div>
-    <filemanager [multiSelection]="isMultiSelection" (onSingleFileSelect)="selectFile($event)">Loading...</filemanager>
+    <ri-filemanager>Loading...</ri-filemanager>
 </div>
diff --git a/demo/src/app/app.component.spec.ts b/demo/src/app/app.component.spec.ts
deleted file mode 100644
index be6cd8a..0000000
--- a/demo/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import {TestBed, async} from '@angular/core/testing';
-import {AppComponent} from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    });
-    TestBed.compileComponents();
-  });
-
-  it('should create the app', async(() => {
-    let fixture = TestBed.createComponent(AppComponent);
-    let app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app works!'`, async(() => {
-    let fixture = TestBed.createComponent(AppComponent);
-    let app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    let fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    let compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
-  }));
-});
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index 0f84a3a..f812cc0 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -1,21 +1,22 @@
 import {Component} from '@angular/core';
-import {ISelectFile} from "../../../main";
+import {FileManagerConfiguration, FileManagerDispatcherService} from '../../../main';
+
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.less']
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.less']
 })
 export class AppComponent {
-    title = 'app works!';
-
-    public isMultiSelection = false;
+  public constructor(public fileManagerConfiguration: FileManagerConfiguration,
+                     private fileManagerDispatcher: FileManagerDispatcherService) {
+  }
 
-    public toggleMultiSelection() {
-        this.isMultiSelection = !this.isMultiSelection;
-    }
+  public toggleMultiSelection() {
+    this.fileManagerConfiguration.isMultiSelection = !this.fileManagerConfiguration.isMultiSelection;
 
-    public selectFile(data: ISelectFile) {
-        console.log(data);
+    if (!this.fileManagerConfiguration.isMultiSelection) {
+      this.fileManagerDispatcher.unSelectAllFiles();
     }
+  }
 }
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index e4305a5..b8bcf8b 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -4,8 +4,18 @@ import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 
 import {AppComponent} from './app.component';
-import {FileManagerModule} from "../../../src/filemanager.module";
+import {FileManagerModule, IFileManagerConfiguration} from '../../../main';
 
+const fileManagerConfiguration: IFileManagerConfiguration = {
+  urls: {
+    foldersUrl: '/api/folder',
+    filesUrl: null,
+    folderMoveUrl: '/api/folder/move'
+  },
+  isMultiSelection: true,
+  mimeTypes: ['image/jpg', 'image/jpeg', 'image/png'],
+  maxFileSize: 50 * 1024
+};
 
 @NgModule({
   declarations: [
@@ -18,7 +28,7 @@ import {FileManagerModule} from "../../../src/filemanager.module";
     HttpModule
   ],
   providers: [
-    {provide: 'fileManagerUrls', useValue: {foldersUrl: '/api/folder', filesUrl: '/api/files'}}
+    {provide: 'fileManagerConfiguration', useValue: fileManagerConfiguration}
   ],
   bootstrap: [AppComponent]
 })
diff --git a/demo/src/appWithBackend/appWithBackend.component.html b/demo/src/appWithBackend/appWithBackend.component.html
new file mode 100644
index 0000000..3150356
--- /dev/null
+++ b/demo/src/appWithBackend/appWithBackend.component.html
@@ -0,0 +1,10 @@
+<div class="container">
+    <h1>Filemanager with backend</h1>
+    <div class="configuration-bar">
+        <button class="btn btn-primary" (click)="toggleMultiSelection()">
+            <i class="fa" [ngClass]="{'fa-check-square': this.fileManagerConfiguration.isMultiSelection, 'fa-square': !this.fileManagerConfiguration.isMultiSelection}"></i>
+            <span>Use multiselection</span>
+        </button>
+    </div>
+    <ri-filemanager>Loading...</ri-filemanager>
+</div>
diff --git a/demo/src/appWithBackend/appWithBackend.component.less b/demo/src/appWithBackend/appWithBackend.component.less
new file mode 100644
index 0000000..9bb0a40
--- /dev/null
+++ b/demo/src/appWithBackend/appWithBackend.component.less
@@ -0,0 +1,3 @@
+.configuration-bar {
+  margin: 10px 0;
+}
\ No newline at end of file
diff --git a/demo/src/appWithBackend/appWithBackend.component.ts b/demo/src/appWithBackend/appWithBackend.component.ts
new file mode 100644
index 0000000..0e801be
--- /dev/null
+++ b/demo/src/appWithBackend/appWithBackend.component.ts
@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {FileManagerConfiguration, FileManagerDispatcherService} from '../../../main';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './appWithBackend.component.html',
+  styleUrls: ['./appWithBackend.component.less']
+})
+export class AppWithBackendComponent {
+  public constructor(public fileManagerConfiguration: FileManagerConfiguration,
+                     private fileManagerDispatcher: FileManagerDispatcherService) {
+  }
+
+  public toggleMultiSelection() {
+    this.fileManagerConfiguration.isMultiSelection = !this.fileManagerConfiguration.isMultiSelection;
+
+    if (!this.fileManagerConfiguration.isMultiSelection) {
+      this.fileManagerDispatcher.unSelectAllFiles();
+    }
+  }
+}
diff --git a/demo/src/appWithBackend/appWithBackend.module.ts b/demo/src/appWithBackend/appWithBackend.module.ts
new file mode 100644
index 0000000..8f652cb
--- /dev/null
+++ b/demo/src/appWithBackend/appWithBackend.module.ts
@@ -0,0 +1,37 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {HttpModule} from '@angular/http';
+
+import {AppWithBackendComponent} from './appWithBackend.component';
+import {FileManagerModule, FileManagerApiService, IFileManagerConfiguration, FileManagerBackendApiService} 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
+};
+
+@NgModule({
+  declarations: [
+    AppWithBackendComponent
+  ],
+  imports: [
+    BrowserModule,
+    FileManagerModule,
+    FormsModule,
+    HttpModule
+  ],
+  providers: [
+    {provide: 'fileManagerConfiguration', useValue: fileManagerConfiguration},
+    {provide: FileManagerApiService, useClass: FileManagerBackendApiService}
+  ],
+  bootstrap: [AppWithBackendComponent]
+})
+export class AppWithBackendModule {
+}
diff --git a/demo/src/mainWithBackend.ts b/demo/src/mainWithBackend.ts
new file mode 100644
index 0000000..7acc0a6
--- /dev/null
+++ b/demo/src/mainWithBackend.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { environment } from './environments/environment';
+import {AppWithBackendModule} from './appWithBackend/appWithBackend.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppWithBackendModule);
diff --git a/demo/src/tsconfig.json b/demo/src/tsconfig.json
index 1731556..c8d3c9a 100644
--- a/demo/src/tsconfig.json
+++ b/demo/src/tsconfig.json
@@ -1,18 +1,22 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "",
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
+    "lib": [
+      "es2016",
+      "dom"
+    ],
     "mapRoot": "./",
-    "module": "es6",
+    "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../dist/out-tsc",
     "sourceMap": true,
     "target": "es5",
     "typeRoots": [
-      "./example"
+      "../node_modules/@types"
     ]
   }
 }
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..aad1ca8
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1 @@
+export * from './main';
diff --git a/karma.conf.js b/karma.conf.js
index 1f2613a..798f0c2 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -4,40 +4,30 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['angular-cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'karma-remap-istanbul']
-              : ['progress'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: true
   });
 };
diff --git a/main.ts b/main.ts
index a3ebb64..9645b70 100644
--- a/main.ts
+++ b/main.ts
@@ -1,13 +1,33 @@
-import {FileManagerModule} from './src/filemanager.module';
+import {FileManagerActionsService} from './src/store/fileManagerActions.service';
+import {FileManagerApiService} from './src/store/fileManagerApi.service';
+import {FileManagerBackendApiService} from './src/store/fileManagerBackendApi.service';
 import {FileManagerComponent} from './src/filemanager.component';
 import {FileManagerConfiguration} from './src/configuration/fileManagerConfiguration.service';
+import {FileManagerDispatcherService} from './src/store/fileManagerDispatcher.service';
+import {FileManagerModule} from './src/filemanager.module';
+import {FilemanagerNotifcations} from './src/services/FilemanagerNotifcations';
 import {FileManagerUploader} from './src/filesList/fileManagerUploader.service';
 import {ISelectFile} from './src/filesList/interface/ISelectFile';
+import {IOuterFile} from './src/filesList/interface/IOuterFile';
+import {IFileDataProperties} from './src/services/imageDataConverter.service';
+import {IFileManagerApi} from './src/store/IFileManagerApi';
+import {IFileManagerConfiguration} from './src/configuration/IFileManagerConfiguration';
+import {ICropBounds} from './src/crop/ICropBounds';
 
 export {
+  FileManagerActionsService,
   FileManagerModule,
+  FileManagerBackendApiService,
   FileManagerComponent,
   FileManagerConfiguration,
+  FileManagerDispatcherService,
   FileManagerUploader,
+  FilemanagerNotifcations,
+  FileManagerApiService,
+  ICropBounds,
+  IFileDataProperties,
+  IFileManagerApi,
+  IFileManagerConfiguration,
+  IOuterFile,
   ISelectFile
-}
+};
diff --git a/package.json b/package.json
index f1366cf..9161b73 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,15 @@
 {
   "name": "@rign/angular2-filemanager",
-  "version": "0.5.4",
+  "version": "1.0.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
     "backend": "node demo/backend/index.js",
-    "start": "ng serve --proxy-config demo/proxy.config.example.json"
+    "build": "ng build --app withoutBackend",
+    "start": "ng serve --app withoutBackend",
+    "startWithBackend": "ng serve --proxy-config demo/proxy.config.example.json --app withBackend ",
+    "test": "./node_modules/.bin/karma --config karma.conf.js start",
+    "gh-pages": "ng build --app withoutBackend --env=prod --base-href \"https://qjon.github.io/angular2-filemanager/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"rafal@ignaszewski.pl\" --no-silent"
   },
   "repository": {
     "type": "git",
@@ -16,52 +20,64 @@
     "file",
     "manager"
   ],
-  "main": "main.ts",
+  "main": "main",
   "author": "Rafal Ignaszewski <rafal@ignaszewski.pl> http://ignaszewski.pl",
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
-    "@rign/angular2-tree": "^0.8.1",
-    "angular2-bootstrap-confirm": "^1.0.4",
-    "angular2-notifications": "^0.4.53",
-    "bootstrap": "^3.3.7",
-    "core-js": "^2.4.1",
-    "font-awesome": "^4.7.0",
-    "ng2-file-upload": "^1.2.0",
-    "ng2-img-cropper": "^0.7.7",
-    "rxjs": "^5.1.0",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.6"
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@ngrx/core": "1.2.0",
+    "@ngrx/effects": "2.0.3",
+    "@ngrx/store": "2.2.2",
+    "@rign/angular2-tree": "2.0.1",
+    "@types/jasmine": "2.5.54",
+    "angular-confirmation-popover": "3.2.0",
+    "angular2-contextmenu": "0.7.7",
+    "angular2-notifications": "0.7.7",
+    "angular2-uuid": "1.1.1",
+    "bootstrap": "3.3.7",
+    "core-js": "2.4.1",
+    "font-awesome": "4.6.3",
+    "ng2-dnd": "4.2.0",
+    "ng2-file-upload": "1.2.0",
+    "ng2-img-cropper": "0.9.0",
+    "rxjs": "5.1.0",
+    "ts-helpers": "1.1.1",
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.32.3",
-    "@angular/compiler-cli": "^2.4.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
-    "codelyzer": "~2.0.0-beta.4",
+    "@angular/cli": "1.2.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@ngrx/store-devtools": "^3.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "angular-cli-ghpages": "^0.5.1",
+    "codelyzer": "~3.0.1",
     "easyimage": "^2.1.0",
     "file-loader": "^0.8.5",
     "formidable": "^1.0.17",
     "image-size": "^0.5.1",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-remap-istanbul": "^0.2.1",
     "mime-types": "^2.1.14",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.4.2",
-    "typescript": "~2.0.0"
+    "protractor": "~5.1.2",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
   }
 }
diff --git a/src/_unitTestMocks/fileDataMock.ts b/src/_unitTestMocks/fileDataMock.ts
new file mode 100644
index 0000000..ddf17ee
--- /dev/null
+++ b/src/_unitTestMocks/fileDataMock.ts
@@ -0,0 +1,13 @@
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+
+export const fileData: IOuterFile = {
+  id: '39097132-ed56-3c72-bfd7-898e1cc00299',
+  folderId: 'dd9b20d8-260b-54c1-7eca-c22eae257edc',
+  name: 'avatar.jpg',
+  type: 'image/jpeg',
+  url: 'some base 64png',
+  thumbnailUrl: 'some base 64png',
+  size: 6076,
+  width: 125,
+  height: 125
+};
diff --git a/src/_unitTestMocks/folderDataMock.ts b/src/_unitTestMocks/folderDataMock.ts
new file mode 100644
index 0000000..8e6be09
--- /dev/null
+++ b/src/_unitTestMocks/folderDataMock.ts
@@ -0,0 +1,10 @@
+import {IOuterNode} from '@rign/angular2-tree';
+
+export const rootNode: IOuterNode = {
+  'id': 'dd9b20d8-260b-54c1-7eca-c22eae257edc',
+  'treeId': 'tree',
+  'name': 'Nowy folder',
+  'parentId': '',
+  'children': [],
+  'parents': []
+};
diff --git a/src/configuration/IFileManagerConfiguration.ts b/src/configuration/IFileManagerConfiguration.ts
new file mode 100644
index 0000000..16c2860
--- /dev/null
+++ b/src/configuration/IFileManagerConfiguration.ts
@@ -0,0 +1,8 @@
+import {IUrlConfiguration} from './IUrlConfiguration';
+
+export interface IFileManagerConfiguration {
+  urls: IUrlConfiguration;
+  isMultiSelection?: boolean;
+  maxFileSize?: number;
+  mimeTypes?: string[];
+}
diff --git a/src/configuration/IUrlConfiguration.ts b/src/configuration/IUrlConfiguration.ts
index bd2f3e9..2f8dac3 100644
--- a/src/configuration/IUrlConfiguration.ts
+++ b/src/configuration/IUrlConfiguration.ts
@@ -1,4 +1,5 @@
 export class IUrlConfiguration {
-  filesUrl: string;
+  filesUrl: string | null;
   foldersUrl: string;
+  folderMoveUrl: string;
 }
diff --git a/src/configuration/fileManagerConfiguration.service.ts b/src/configuration/fileManagerConfiguration.service.ts
index 619877a..79f0397 100644
--- a/src/configuration/fileManagerConfiguration.service.ts
+++ b/src/configuration/fileManagerConfiguration.service.ts
@@ -1,14 +1,26 @@
-import {IContextMenu} from "@rign/angular2-tree/main";
-import {Injectable, Inject} from "@angular/core";
-import {IFileTypeFilter} from "../toolbar/interface/IFileTypeFilter";
-import {ICropSize} from "../crop/ICropSize";
-import {IUrlConfiguration} from "./IUrlConfiguration";
+import {IContextMenu} from '@rign/angular2-tree';
+import {Injectable, Inject} from '@angular/core';
+import {IFileTypeFilter} from '../toolbar/interface/IFileTypeFilter';
+import {ICropSize} from '../crop/ICropSize';
+import {IFileManagerConfiguration} from './IFileManagerConfiguration';
 
 @Injectable()
 export class FileManagerConfiguration {
-  public contextMenuItems: IContextMenu[] = [];
 
-  public isMultiSelection: boolean = false;
+  public allowedCropSize: ICropSize[] = [
+    {
+      name: 'Landscape',
+      width: 300,
+      height: 100
+    },
+    {
+      name: 'Portrait',
+      width: 200,
+      height: 300
+    }
+  ];
+
+  public contextMenuItems: IContextMenu[] = [];
 
   public fileTypesFilter: IFileTypeFilter[] = [
     {
@@ -44,24 +56,21 @@ export class FileManagerConfiguration {
     }
   ];
 
-  public fileUrl: string = '/api/files';
+  public folderUrls: {foldersUrl: string, folderMoveUrl: string};
+  public fileUrl = '/api/files';
 
-  public allowedCropSize: ICropSize[] = [
-    {
-      name: 'Landscape',
-      width: 300,
-      height: 100
-    },
-    {
-      name: 'Portrait',
-      width: 200,
-      height: 300
-    }
-  ];
+  public isMultiSelection: boolean;
 
+  public maxFileSize: number;
 
-  constructor(@Inject('fileManagerUrls') urls: IUrlConfiguration) {
+  public mimeTypes: string[] | null;
 
-    this.fileUrl = urls.filesUrl;
+  constructor(@Inject('fileManagerConfiguration') configuration: IFileManagerConfiguration) {
+    const {foldersUrl, folderMoveUrl} = configuration.urls;
+    this.folderUrls = {foldersUrl, folderMoveUrl};
+    this.fileUrl = configuration.urls.filesUrl;
+    this.isMultiSelection = configuration.isMultiSelection || false;
+    this.maxFileSize = configuration.maxFileSize || 0;
+    this.mimeTypes = configuration.mimeTypes || null;
   }
 }
diff --git a/src/configuration/tree.service.ts b/src/configuration/tree.service.ts
index 7c83498..5b3fc0a 100644
--- a/src/configuration/tree.service.ts
+++ b/src/configuration/tree.service.ts
@@ -1,18 +1,19 @@
-import {Injectable, Inject} from "@angular/core";
-import {NodeService} from "@rign/angular2-tree/main";
-import {Http} from "@angular/http";
-import {IUrlConfiguration} from "./IUrlConfiguration";
+import {Injectable, Inject} from '@angular/core';
+import {NodeService} from '@rign/angular2-tree';
+import {Http} from '@angular/http';
+import {IFileManagerConfiguration} from './IFileManagerConfiguration';
 
 @Injectable()
 export class TreeService extends NodeService {
-  public constructor(http: Http, @Inject('fileManagerUrls') urls: IUrlConfiguration) {
+  public constructor(protected http: Http, @Inject('fileManagerConfiguration') configuration: IFileManagerConfiguration) {
     super(http);
 
     this.apiConfig = {
-      addUrl: urls.foldersUrl,
-      getUrl: urls.foldersUrl,
-      updateUrl: urls.foldersUrl,
-      removeUrl: urls.foldersUrl,
+      addUrl: configuration.urls.foldersUrl,
+      getUrl: configuration.urls.foldersUrl,
+      updateUrl: configuration.urls.foldersUrl,
+      removeUrl: configuration.urls.foldersUrl,
+      moveUrl: configuration.urls.folderMoveUrl
     };
   }
 }
diff --git a/src/crop/crop.component.ts b/src/crop/crop.component.ts
index db44309..7d9f07c 100644
--- a/src/crop/crop.component.ts
+++ b/src/crop/crop.component.ts
@@ -1,6 +1,6 @@
 import {
   Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, Output,
-  EventEmitter
+  EventEmitter, OnDestroy
 } from "@angular/core";
 import {FileModel} from "../filesList/file.model";
 import {CropperSettings} from "ng2-img-cropper/src/cropperSettings";
@@ -9,28 +9,31 @@ import {ICropSize} from "./ICropSize";
 import {FileManagerConfiguration} from "../configuration/fileManagerConfiguration.service";
 import {Bounds} from "ng2-img-cropper/src/model/bounds";
 import {ICropBounds} from "./ICropBounds";
+import {FileManagerDispatcherService} from "../store/fileManagerDispatcher.service";
 
 @Component({
   selector: 'crop-image',
   styleUrls: ['./crop.less'],
   template: `
-        <div class="crop-image">
-            <div class="crop-workbench">
-                <div #container></div>
-            </div>
-            <div class="btn-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-primary" *ngFor="let cropSize of cropSizeList" (click)="updateCropSize(cropSize)" [ngClass]="{'active': cropSize == currentCropSize}">{{cropSize.name}}</button>
-                </div>
-                <div class="btn-group pull-right">
-                    <button class="btn btn-success btn-icon" (click)="cropImage()">
-                        <i class="fa fa-check"></i>
-                        <span>Save</span>
-                    </button>
-                </div>
-            </div>
+    <div class="crop-image">
+      <div class="crop-workbench">
+        <div #container></div>
+      </div>
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <button class="btn btn-primary" *ngFor="let cropSize of cropSizeList" (click)="updateCropSize(cropSize)"
+                  [ngClass]="{'active': cropSize == currentCropSize}">{{cropSize.name}}
+          </button>
         </div>
-        `
+        <div class="btn-group pull-right">
+          <button class="btn btn-success btn-icon" (click)="cropImage()">
+            <i class="fa fa-check"></i>
+            <span>Save</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  `
 })
 
 export class CropComponent {
@@ -49,9 +52,9 @@ export class CropComponent {
   public cropSizeList: ICropSize[];
   public currentCropSize: ICropSize;
 
-  private scale: number = 1;
-
-  constructor(private resolver: ComponentFactoryResolver, private configuration: FileManagerConfiguration) {
+  constructor(private resolver: ComponentFactoryResolver,
+              private configuration: FileManagerConfiguration,
+              private fileManagerDispatcher: FileManagerDispatcherService) {
     this.cropSizeList = configuration.allowedCropSize;
   }
 
@@ -78,7 +81,7 @@ export class CropComponent {
 
   ngAfterContentInit() {
     this.updateCropSize(this.cropSizeList[0]);
-  }
+  };
 
   public cropImage() {
     let bounds: ICropBounds = {
@@ -88,7 +91,7 @@ export class CropComponent {
       height: this.bounds.height
     };
 
-    this.onCrop.emit({file: this.file, bounds: bounds});
+    this.fileManagerDispatcher.cropFile(this.file, bounds);
   }
 
 
@@ -98,8 +101,6 @@ export class CropComponent {
     let width = scale * this.file.getWidth();
     let height = scale * this.file.getHeight();
 
-    console.log(this.file, scale);
-
     cropperSettings.noFileInput = true;
     cropperSettings.width = this.currentCropSize.width;
     cropperSettings.height = this.currentCropSize.height;
diff --git a/src/decorators/logFunction.decorator.ts b/src/decorators/logFunction.decorator.ts
index 3aef8f8..89fe99f 100644
--- a/src/decorators/logFunction.decorator.ts
+++ b/src/decorators/logFunction.decorator.ts
@@ -1,4 +1,4 @@
-import {environment} from "../../demo/src/environments/environment";
+import {environment} from '../../demo/src/environments/environment';
 
 export function log(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) {
     let originalMethod = descriptor.value;
diff --git a/src/dropdown/dropdown.component.ts b/src/dropdown/dropdown.component.ts
index ad6db11..b89ee6e 100644
--- a/src/dropdown/dropdown.component.ts
+++ b/src/dropdown/dropdown.component.ts
@@ -1,37 +1,19 @@
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import {IButton} from "./IButton";
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {IButton} from './IButton';
+
 @Component({
-  selector: 'dropdown',
+  selector: 'ri-dropdown',
   styleUrls: ['./dropdown.less'],
-  template: `
-    <div class="btn-group dropdown" [ngClass]="{'open': isOpen}">
-        <button class="btn btn-default" (click)="selectButton(mainButton)"  >
-            <span *ngIf="mainButton.label">{{mainButton.name}}</span>
-            <i *ngIf="mainButton.icon" class="{{mainButton.iconCssClass}}"></i>
-        </button>
-        <button class="btn btn-default dropdown-toggle" (click)="toggleOpen()">
-            <span class="caret"></span>
-            <span class="sr-only">Split button!</span>
-        </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="single-button" (mouseleave)="hide()">
-            <!--<li class="divider"></li>-->
-            <li role="menuitem" *ngFor="let button of buttons">
-                <a (click)="selectButton(button)">
-                    <span *ngIf="button.icon" class="{{button.iconCssClass}}"></span>
-                    <span *ngIf="button.label">{{button.name}}</span>
-                </a>
-            </li>
-        </ul>
-    </div>`
+  templateUrl: './dropdown.html'
 })
 
-export class Dropdown {
+export class DropdownComponent {
   @Input() mainButton: IButton;
   @Input() buttons: IButton[];
 
   @Output() onClick = new EventEmitter();
 
-  public isOpen: boolean = false;
+  public isOpen = false;
 
   public hide() {
     this.isOpen = false;
@@ -45,6 +27,4 @@ export class Dropdown {
   public toggleOpen() {
     this.isOpen = !this.isOpen;
   }
-
-
 }
diff --git a/src/dropdown/dropdown.html b/src/dropdown/dropdown.html
new file mode 100644
index 0000000..ac8cd66
--- /dev/null
+++ b/src/dropdown/dropdown.html
@@ -0,0 +1,19 @@
+<div class="btn-group dropdown" [ngClass]="{'open': isOpen}">
+  <button class="btn btn-default" (click)="selectButton(mainButton)">
+    <span *ngIf="mainButton.label">{{mainButton.name}}</span>
+    <i *ngIf="mainButton.icon" class="{{mainButton.iconCssClass}}"></i>
+  </button>
+  <button class="btn btn-default dropdown-toggle" (click)="toggleOpen()">
+    <span class="caret"></span>
+    <span class="sr-only">Split button!</span>
+  </button>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="single-button" (mouseleave)="hide()">
+    <!--<li class="divider"></li>-->
+    <li role="menuitem" *ngFor="let button of buttons">
+      <a (click)="selectButton(button)">
+        <span *ngIf="button.icon" class="{{button.iconCssClass}}"></span>
+        <span *ngIf="button.label">{{button.name}}</span>
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/src/filemanager.component.ts b/src/filemanager.component.ts
index cb65818..989dc7d 100644
--- a/src/filemanager.component.ts
+++ b/src/filemanager.component.ts
@@ -1,74 +1,97 @@
-import {Component, OnInit, ViewChild, HostListener, Input, OnChanges, EventEmitter, Output} from '@angular/core';
-import {TreeComponent, NodeService, IContextMenu, IOuterNode, ITreeItemEvent} from '@rign/angular2-tree/main';
-import {FilesService} from "./filesList/files.service";
-import {IOuterFile} from "./filesList/interface/IOuterFile";
-import {FileModel} from "./filesList/file.model";
-import {log} from "./decorators/logFunction.decorator";
-import {IUploadItemEvent} from "./toolbar/interface/IUploadItemEvent";
-import {NotificationsService} from "angular2-notifications";
-import {IFileEvent} from "./filesList/interface/IFileEvent";
-import {Button} from "./toolbar/models/button.model";
-import {FilesList} from "./filesList/filesList.component";
-import {IToolbarEvent} from "./toolbar/interface/IToolbarEvent";
-import {IFileModel} from "./filesList/interface/IFileModel";
-import {FileManagerConfiguration} from "./configuration/fileManagerConfiguration.service";
-import {IFileTypeFilter} from "./toolbar/interface/IFileTypeFilter";
-import {ICropBounds} from "./crop/ICropBounds";
-import {TreeService} from "./configuration/tree.service";
+import {
+  Component, OnInit, ViewChild, HostListener, EventEmitter, Output
+} from '@angular/core';
+import {
+  TreeComponent,
+  NodeService,
+  IContextMenu,
+  IOuterNode,
+  ITreeData,
+  ITreeState,
+  IConfiguration,
+  TreeModel,
+  TreeActionsService,
+  NodeDispatcherService
+} from '@rign/angular2-tree';
+import {IOuterFile} from './filesList/interface/IOuterFile';
+import {FileModel} from './filesList/file.model';
+import {log} from './decorators/logFunction.decorator';
+import {NotificationsService} from 'angular2-notifications';
+import {IFileEvent} from './filesList/interface/IFileEvent';
+import {Button} from './toolbar/models/button.model';
+import {FilesListComponent} from './filesList/filesList.component';
+import {IToolbarEvent} from './toolbar/interface/IToolbarEvent';
+import {IFileModel} from './filesList/interface/IFileModel';
+import {FileManagerConfiguration} from './configuration/fileManagerConfiguration.service';
+import {IFileTypeFilter} from './toolbar/interface/IFileTypeFilter';
+import {Observable} from 'rxjs/Observable';
+import {Store} from '@ngrx/store';
+import {IFileManagerState} from './store/fileManagerReducer';
+import {FileTypeFilterService} from './services/fileTypeFilter.service';
+import {SearchFilterService} from './services/searchFilter.service';
+import {FileManagerDispatcherService} from './store/fileManagerDispatcher.service';
+import {FileManagerEffectsService} from './store/fileManagerEffects.service';
+import {FileManagerApiService} from './store/fileManagerApi.service';
+import {FilemanagerNotifcations, INotification} from './services/FilemanagerNotifcations';
 
 @Component({
-  selector: 'filemanager',
-  providers: [NodeService, FilesService, NotificationsService],
+  selector: 'ri-filemanager',
+  providers: [NodeService, NotificationsService],
   styleUrls: ['./main.less'],
   templateUrl: './filemanager.html'
 })
-export class FileManagerComponent implements OnInit, OnChanges {
-  @Input() multiSelection: boolean = false;
+export class FileManagerComponent implements OnInit {
   @Output() onSingleFileSelect = new EventEmitter();
 
   @ViewChild(TreeComponent)
   public treeComponent: TreeComponent;
 
-  @ViewChild(FilesList)
-  public filesList: FilesList;
+  @ViewChild(FilesListComponent)
+  public filesList: FilesListComponent;
 
   /**
-   * Current folder all files
+   * List of files for current selected directory
    * @typeObserv {Array}
    */
-  private currentFolderFilesList: IFileModel[] = [];
+  private files$: Observable<FileModel[]>;
 
-  private searchFieldValue: string = '';
-  private fileType: IFileTypeFilter;
+  public filteredFiles$: Observable<FileModel[]>;
+
+  public folders: Observable<ITreeData>;
+
+
+  public treeConfiguration: IConfiguration = {
+    showAddButton: false,
+    disableMoveNodes: false,
+    treeId: 'tree',
+    dragZone: 'tree',
+    dropZone: ['tree']
+  };
+
+  public treeModel: TreeModel;
+
+  /** UNSED **/
+  public contextMenu: IContextMenu[] = [];
 
-  /**
-   * Folders tree structure
-   * @typeObserv {Array}
-   */
-  public folders: IOuterNode[] = [];
 
   /**
-   * List of filtered files for current selected directory
+   * Current folder all files
    * @typeObserv {Array}
    */
-  public files: IFileModel[] = [];
+  private currentFolderFilesList: IFileModel[] = [];
 
-  /**
-   * Current selected folder id
-   */
-  public currentFolderId: string;
 
   public currentSelectedFile: IFileModel;
 
-  public isPreviewMode: boolean = false;
-  public isCropMode: boolean = false;
+  public isPreviewMode = false;
+  public isCropMode = false;
 
   public notificationOptions = {
-    position: ["bottom", "right"],
+    position: ['bottom', 'right'],
     timeOut: 3000,
     lastOnBottom: false,
     preventDuplicates: true,
-    rtl: true,
+    rtl: false,
     showProgressBar: true,
     pauseOnHover: true
   };
@@ -79,145 +102,115 @@ export class FileManagerComponent implements OnInit, OnChanges {
    */
   public menu: IContextMenu[];
 
-  get numberOfSelectedItems() {
-    if (this.files) {
-      return this.files
-        .filter((file) => file.selected)
-        .length;
-    } else {
-      return 0;
-    }
-  }
-
-  constructor(private treeService: TreeService,
-              private filesService: FilesService,
-              private notifications: NotificationsService,
-              private configuration: FileManagerConfiguration) {
+  public constructor(private store: Store<ITreeState>,
+                     private treeActions: TreeActionsService,
+                     private nodeDispatcherService: NodeDispatcherService,
+                     private treeService: FileManagerApiService,
+                     private notifications: NotificationsService,
+                     private configuration: FileManagerConfiguration,
+                     private fileManagerDispatcher: FileManagerDispatcherService,
+                     private fileTypeFilter: FileTypeFilterService,
+                     private searchFilterService: SearchFilterService,
+                     private fileManagerEffects: FileManagerEffectsService,
+                     private filemanagerNotifcations: FilemanagerNotifcations) {
 
     this.menu = configuration.contextMenuItems;
+
+    this.filemanagerNotifcations.getNotificationStream()
+      .subscribe((notification: INotification) => {
+        const {type, title, message} = notification;
+
+        this.notifications[type](title, message);
+      });
   }
 
   ngOnInit() {
-    this.treeService.load()
-      .subscribe((items: IOuterNode[]) => {
-        this.folders = items;
-      });
 
+    /*** START - init TREE ***/
+    const treeId = this.treeConfiguration.treeId;
+    this.nodeDispatcherService.register(treeId, this.treeService);
 
-    this.loadFiles('');
-  }
+    this.store.dispatch(this.treeActions.registerTree(treeId));
 
-  ngOnChanges() {
-    this.configuration.isMultiSelection = this.multiSelection;
-  }
+    this.folders = this.store.select('trees')
+      .map((data: ITreeState) => {
+        return data[treeId];
+      })
+      .filter((data: ITreeData) => !!data)
+    ;
 
-  /***********************************************************************
-   * FOLDER EVENTS
-   **********************************************************************/
+    this.treeModel = new TreeModel(this.folders, this.treeConfiguration);
+    /*** END - init TREE ***/
 
-  @log
-  public onAddFolder($event: IToolbarEvent) {
-    this.treeComponent.addNode($event.value);
-  }
 
-  @log
-  public onAdd(event: ITreeItemEvent) {
-    let node = event.node;
-    let parentNode = node.parentNode;
-    let parentNodeId = parentNode ? parentNode.id : null;
-
-    this.treeService.save(event.node.data, parentNodeId)
-      .subscribe((folder: IOuterNode) => {
-        node.refresh(folder);
+    /*** START - init files ***/
+    this.files$ = this.store.select('files')
+      .map((data: IFileManagerState): FileModel[] => {
+        return data.map((file: IOuterFile) => new FileModel(file));
       });
-  }
 
-  @log
-  public onRemove(event: ITreeItemEvent) {
-    let node = event.node;
-    this.treeService.remove(node.id)
-      .subscribe(() => {
-        if (node.id === this.currentFolderId) {
-          this.currentFolderId = null;
+    this.filteredFiles$ = Observable.combineLatest(
+      this.files$,
+      this.fileTypeFilter.filter$,
+      this.searchFilterService.filter$
+    )
+      .map((data: [FileModel[], IFileTypeFilter, string]): FileModel[] => {
+        let files = data[0];
+        const fileTypeFilter = data[1];
+        const search = data[2].toLocaleLowerCase();
+
+        if (search !== '') {
+          files = files.filter((file: FileModel) => {
+            return file.name.toLocaleLowerCase().indexOf(search) > -1;
+          });
+        }
+
+
+        if (fileTypeFilter && fileTypeFilter.mimes.length > 0) {
+          files = files.filter((file: FileModel) => {
+            return fileTypeFilter.mimes.indexOf(file.getMime()) > -1;
+          });
         }
 
-        node.remove();
-        this.loadFiles(this.currentFolderId);
+        return files;
       });
-  }
 
-  @log
-  public onChange(event: ITreeItemEvent) {
-    let node = event.node;
-
-    this.treeService.update(node.toJSON())
-      .subscribe((folder: IOuterNode) => {
-        node.refresh(folder);
-        node.collapse();
-        node.expand();
+
+    this.treeModel.currentSelectedNode$
+      .subscribe((node: IOuterNode | null) => {
+        this.loadFiles(node ? node.id : '');
+      });
+
+    /*** END - init files ***/
+
+    this.fileManagerEffects.cropFileSuccess$
+      .subscribe(() => {
+        this.closeModal();
       });
   }
 
-  @log
-  public onToggle(event: ITreeItemEvent) {
-    if (event.status) {
-      this.treeService.load(event.node.id)
-        .subscribe((folders: IOuterNode[]) => {
-          for (let folder of folders) {
-            event.node.addChild(folder);
-          }
-        });
-    } else {
-      event.node.resetChildren();
-    }
+  get currentSelectedFolderId(): string | null {
+    const value = this.treeModel.currentSelectedNode$.getValue();
+
+    return value ? value.id : null;
   }
 
   @log
-  public onSelect(event: ITreeItemEvent) {
-    if (event.status) {
-      this.loadFiles(event.node.id);
-      this.currentFolderId = event.node.id;
-    } else {
-      this.loadFiles('');
-      this.currentFolderId = null;
-    }
+  public onAddFolder() {
+    this.treeComponent.onAdd();
   }
 
-
   /***********************************************************************
    * FILE EVENTS
    **********************************************************************/
-
-
   /**
    * Run when all files are uploaded
    * @param folderId
    */
   public onUpload(folderId: string) {
-    this.loadFiles(folderId);
-
     this.notifications.success('File upload', 'Upload complete');
   }
 
-  /**
-   * Run when single file is uploaded
-   * @param eventData
-   */
-  public onUploadItem(eventData: IUploadItemEvent) {
-    if (eventData.status === 409) {
-      this.notifications.alert('File upload', `${eventData.name} exists on the server in this directory`);
-    }
-  }
-
-  @log
-  public onRenameFile(fileEventData: IFileEvent) {
-  }
-
-  @log
-  public onDeleteFile(fileEventData: IFileEvent) {
-    this.removeSingleFile(fileEventData.file);
-  }
-
   @log
   public onPreviewFile(fileEventData: IFileEvent) {
     this.isPreviewMode = true;
@@ -230,25 +223,6 @@ export class FileManagerComponent implements OnInit, OnChanges {
     this.currentSelectedFile = fileEventData.file;
   }
 
-  @log
-  public onCropFile(event: any) {
-    let file: IFileModel = event.file;
-    let bounds: ICropBounds = event.bounds;
-
-    this.filesService.crop(file, bounds)
-      .subscribe(
-        (data: any) => {
-          file.fromJSON(data);
-          this.closeModal();
-          this.reloadFiles();
-          this.notifications.success('Crop Image', 'Image has been cropped');
-        },
-        () => {
-          this.notifications.error('Crop Image', 'Image has not been cropped');
-        }
-      );
-  }
-
   @log
   public onSelectFile(event: FileModel) {
     this.onSingleFileSelect.next(event.getSelectData());
@@ -262,20 +236,20 @@ export class FileManagerComponent implements OnInit, OnChanges {
   public onMenuButtonClick(event: IToolbarEvent) {
     switch (event.name) {
       case Button.DELETE_SELECTION:
-        this.files.forEach((file: IFileModel) => {
-          if (file.selected) {
-            this.removeSingleFile(file);
-          }
-        });
+        // this.files.forEach((file: IFileModel) => {
+        //   if (file.selected) {
+        //     this.removeSingleFile(file);
+        //   }
+        // });
         break;
       case Button.SELECT_ALL:
-        this.filesList.allFilesSelection(true);
+        this.fileManagerDispatcher.selectAllFiles();
         break;
       case Button.UNSELECT_ALL:
-        this.filesList.allFilesSelection(false);
+        this.fileManagerDispatcher.unSelectAllFiles();
         break;
       case Button.INVERSE_SELECTION:
-        this.filesList.selectInversion();
+        this.fileManagerDispatcher.inverseSelection();
         break;
       case Button.REFRESH_FILES_LIST:
         this.reloadFiles();
@@ -283,18 +257,6 @@ export class FileManagerComponent implements OnInit, OnChanges {
     }
   }
 
-  @log
-  public onSearchChange(filterValue: string = '') {
-    this.searchFieldValue = filterValue;
-    this.filterFilesList(this.searchFieldValue, this.fileType);
-  }
-
-  @log
-  public onFilterTypeChange(type: IFileTypeFilter) {
-    this.fileType = type;
-    this.filterFilesList(this.searchFieldValue, this.fileType);
-  }
-
   /***********************************************************************
    * OTHER FUNCTIONS
    **********************************************************************/
@@ -314,61 +276,13 @@ export class FileManagerComponent implements OnInit, OnChanges {
 
 
   private loadFiles(folderId: string) {
-    this.filesService.load(folderId)
-      .subscribe((files: IOuterFile[]) => {
-        this.files = [];
-        this.currentFolderFilesList = [];
-
-        files.forEach((file: IOuterFile) => {
-          let fileModel = new FileModel(file);
-          this.currentFolderFilesList.push(fileModel);
-        });
-
-        this.filterFilesList(this.searchFieldValue, this.fileType);
-      });
+    this.fileManagerDispatcher.loadFiles(folderId || '');
   }
 
   private reloadFiles() {
-    this.loadFiles(this.currentFolderId || '');
-  }
-
-  private removeSingleFile(file: IFileModel) {
-    this.filesService.remove(file)
-      .subscribe(
-        () => {
-          this.reloadFiles();
-          this.notifications.success('File delete', `${file.name} has been deleted`);
-        },
-        (error: any) => {
-          this.notifications.error('File delete', `${file.name} has not been deleted`);
-        }
-      )
-  }
-
-  /**
-   * Filter current folder files list
-   * @param search
-   * @param type
-   */
-  private filterFilesList(search: string, type: IFileTypeFilter = null) {
-    let files: IFileModel[] = this.currentFolderFilesList.copyWithin(0, 0);
-
-    search = search.toLocaleLowerCase() || '';
-
-    if (search) {
-      search.toLocaleLowerCase();
-      files = files.filter((fileModel) => {
-        return fileModel.name.toLocaleLowerCase().indexOf(search) > -1;
-      });
-    }
-
-    if (type && type.mimes.length > 0) {
-
-      files = files.filter((fileModel) => {
-        return type.mimes.indexOf(fileModel.getMime()) > -1;
-      });
-    }
+    const node = this.treeModel.currentSelectedNode$.getValue();
+    const id = node ? node.id : '';
 
-    this.files = files;
+    this.loadFiles(id);
   }
 }
diff --git a/src/filemanager.html b/src/filemanager.html
index 767308a..cffc14d 100644
--- a/src/filemanager.html
+++ b/src/filemanager.html
@@ -2,40 +2,27 @@
   <div class="fm-header">
     <toolbar
       #toolbar
-      [currentFolderId]="currentFolderId"
-      [numberOfSelectedItems]="numberOfSelectedItems"
+      [currentFolderId]="currentSelectedFolderId"
       (onAddFolderClick)="onAddFolder($event)"
       (onUpload)="onUpload($event)"
-      (onUploadItem)="onUploadItem($event)"
       (onMenuButtonClick)="onMenuButtonClick($event)"
-      (onSearchChange)="onSearchChange($event)"
-      (onFilterTypeChange)="onFilterTypeChange($event)"
     ></toolbar>
   </div>
   <div class="fm-main-box">
-    <rign-tree class="folders-box" [nodes]="folders"
-               [menu]="menu"
-               (onAdd)="onAdd($event)"
-               (onChange)="onChange($event)"
-               (onRemove)="onRemove($event)"
-               (onToggle)="onToggle($event)"
-               (onSelect)="onSelect($event)"
-    ></rign-tree>
-    <files-list class="files-box" [files]="files"
-                (onDeleteFile)="onDeleteFile($event)"
-                (onRenameFile)="onRenameFile($event)"
+    <rign-tree class="folders-box" [treeModel]="treeModel"></rign-tree>
+    <ri-files-list class="files-box" [files]="filteredFiles$ | async"
                 (onPreviewFile)="onPreviewFile($event)"
                 (onCropFile)="onOpenCropFileEditor($event)"
                 (onSelectFile)="onSelectFile($event)"
-    ></files-list>
+    ></ri-files-list>
   </div>
   <div *ngIf="isPreviewMode || isCropMode" class="backdrop">
     <div class="modal-view">
       <div class="modal-close">
         <i class="fa fa-2x fa-times" (click)="closeModal()"></i>
       </div>
-      <file-preview *ngIf="isPreviewMode" [files]="files" [file]="currentSelectedFile"></file-preview>
-      <crop-image *ngIf="isCropMode" [file]="currentSelectedFile" (onCrop)="onCropFile($event)"></crop-image>
+      <ri-file-preview *ngIf="isPreviewMode" [files]="filteredFiles$ | async" [file]="currentSelectedFile"></ri-file-preview>
+      <crop-image *ngIf="isCropMode" [file]="currentSelectedFile"></crop-image>
     </div>
   </div>
   <simple-notifications [options]="notificationOptions"></simple-notifications>
diff --git a/src/filemanager.module.ts b/src/filemanager.module.ts
index f43812b..c29e835 100644
--- a/src/filemanager.module.ts
+++ b/src/filemanager.module.ts
@@ -1,51 +1,82 @@
-import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {HttpModule} from "@angular/http";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {TreeModule} from "@rign/angular2-tree/main";
-import {SimpleNotificationsModule} from "angular2-notifications";
-import {ConfirmModule} from "angular2-bootstrap-confirm";
-import {FileManagerComponent} from "./filemanager.component";
-import {Toolbar} from "./toolbar/toolbar.component";
-import {FilesList} from "./filesList/filesList.component";
-import {ImageCropperComponent} from "ng2-img-cropper";
-import {CropComponent} from "./crop/crop.component";
-import {PreviewComponent} from "./preview/preview.component";
-import {Dropdown} from "./dropdown/dropdown.component";
-import {FileUploadModule} from "ng2-file-upload";
-import {FileManagerConfiguration} from "./configuration/fileManagerConfiguration.service";
-import {FileManagerUploader} from "./filesList/fileManagerUploader.service";
-import {TreeService} from "./configuration/tree.service";
+import {NgModule, CUSTOM_ELEMENTS_SCHEMA, Inject} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {HttpModule} from '@angular/http';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TreeModule, treeReducer} from '@rign/angular2-tree';
+import {NotificationsService, SimpleNotificationsModule} from 'angular2-notifications';
+import {FileManagerComponent} from './filemanager.component';
+import {ToolbarComponent} from './toolbar/toolbar.component';
+import {FilesListComponent} from './filesList/filesList.component';
+import {ImageCropperComponent} from 'ng2-img-cropper';
+import {CropComponent} from './crop/crop.component';
+import {PreviewComponent} from './preview/preview.component';
+import {DropdownComponent} from './dropdown/dropdown.component';
+import {FileUploadModule} from 'ng2-file-upload';
+import {FileManagerConfiguration} from './configuration/fileManagerConfiguration.service';
+import {FileManagerUploader} from './filesList/fileManagerUploader.service';
+import {TreeService} from './configuration/tree.service';
+import {EffectsModule} from '@ngrx/effects';
+import {FileManagerEffectsService} from './store/fileManagerEffects.service';
+import {StoreModule} from '@ngrx/store';
+import {fileManagerReducer} from './store/fileManagerReducer';
+import {FileManagerActionsService} from './store/fileManagerActions.service';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {FileTypeFilterService} from './services/fileTypeFilter.service';
+import {SearchFilterService} from './services/searchFilter.service';
+import {FileManagerDispatcherService} from './store/fileManagerDispatcher.service';
+import {FileTypeFilterComponent} from './toolbar/fileTypeFilter/fileTypeFilter.component';
+import {SearchFileComponent} from './toolbar/searchFile/searchFile.component';
+import {FileManagerApiService} from './store/fileManagerApi.service';
+import {ImageDataConverter} from './services/imageDataConverter.service';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FilemanagerNotifcations} from './services/FilemanagerNotifcations';
+import {ConfirmationPopoverModule} from 'angular-confirmation-popover';
+import {FileManagerBackendApiService} from './store/fileManagerBackendApi.service';
 
 @NgModule({
   imports: [
     BrowserModule,
-    ConfirmModule,
+    BrowserAnimationsModule,
+    ConfirmationPopoverModule.forRoot(),
+    EffectsModule.run(FileManagerEffectsService),
     FormsModule,
     FileUploadModule,
     HttpModule,
     ReactiveFormsModule,
     SimpleNotificationsModule,
+    StoreModule.provideStore({files: fileManagerReducer, trees: treeReducer}),
+    StoreDevtoolsModule.instrumentOnlyWithExtension({}),
     TreeModule
   ],
   declarations: [
     FileManagerComponent,
-    Toolbar,
-    FilesList,
-    Dropdown,
+    FileTypeFilterComponent,
+    ToolbarComponent,
+    FilesListComponent,
+    DropdownComponent,
     PreviewComponent,
     CropComponent,
-    ImageCropperComponent
+    ImageCropperComponent,
+    SearchFileComponent
   ],
   entryComponents: [ImageCropperComponent],
   providers: [
+    FileManagerActionsService,
+    FileManagerApiService,
+    FileManagerBackendApiService,
     FileManagerConfiguration,
+    FileManagerDispatcherService,
+    FileManagerEffectsService,
+    FilemanagerNotifcations,
     FileManagerUploader,
+    FileTypeFilterService,
+    ImageDataConverter,
+    NotificationsService,
+    SearchFilterService,
     TreeService
   ],
   exports: [FileManagerComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FileManagerModule {
-
 }
diff --git a/src/filesList/file.model.ts b/src/filesList/file.model.ts
index b89ad05..32fcc86 100644
--- a/src/filesList/file.model.ts
+++ b/src/filesList/file.model.ts
@@ -1,17 +1,17 @@
-import {IOuterFile} from "./interface/IOuterFile";
-import {IFileModel} from "./interface/IFileModel";
-import {ISelectFile} from "./interface/ISelectFile";
+import {IOuterFile} from './interface/IOuterFile';
+import {IFileModel} from './interface/IFileModel';
+import {ISelectFile} from './interface/ISelectFile';
 
 export class FileModel implements IFileModel {
-  static smallIconsFolder: string = '/icons/128px/';
-  static bigIconsFolder: string = '/icons/512px/';
+  static smallIconsFolder = '/icons/128px/';
+  static bigIconsFolder = '/icons/512px/';
 
   private _orgData: IOuterFile;
   private _name: string;
 
   private _iconsFolder = FileModel.smallIconsFolder;
 
-  public selected: boolean = false;
+  public selected = false;
 
   set name(name: string) {
     this._name = name;
@@ -37,6 +37,11 @@ export class FileModel implements IFileModel {
     this._orgData = data;
 
     this.name = data.name;
+    this.selected = data.selected || false;
+  }
+
+  public toJSON() {
+    return this._orgData;
   }
 
   public getId() {
@@ -52,7 +57,7 @@ export class FileModel implements IFileModel {
   }
 
   public getMime() {
-    return this._orgData.mime;
+    return this._orgData.type;
   }
 
   public getWidth(): number {
@@ -71,6 +76,6 @@ export class FileModel implements IFileModel {
       width: this.getWidth(),
       height: this.getHeight(),
       mime: this.getMime()
-    }
+    };
   }
 }
diff --git a/src/filesList/fileManagerUploader.service.ts b/src/filesList/fileManagerUploader.service.ts
index 3e2af88..db48bac 100644
--- a/src/filesList/fileManagerUploader.service.ts
+++ b/src/filesList/fileManagerUploader.service.ts
@@ -1,14 +1,22 @@
-import {Injectable, Inject} from "@angular/core";
-import {FileUploader} from "ng2-file-upload";
-import {IUrlConfiguration} from "../configuration/IUrlConfiguration";
+import {Injectable, Inject} from '@angular/core';
+import {ExtendedFileUploader} from '../services/extendedFileUplaoder.service';
+import {IFileManagerConfiguration} from '../configuration/IFileManagerConfiguration';
+import {FilemanagerNotifcations} from '../services/FilemanagerNotifcations';
+import {FileUploaderOptions} from 'ng2-file-upload';
 
 @Injectable()
 export class FileManagerUploader {
-  public uploader: FileUploader;
+  public uploader: ExtendedFileUploader;
 
+  public constructor(@Inject('fileManagerConfiguration') configuration: IFileManagerConfiguration,
+                     filemanagerNotification: FilemanagerNotifcations) {
+    const options: FileUploaderOptions = {
+      allowedMimeType: configuration.mimeTypes,
+      url: configuration.urls.filesUrl,
+      maxFileSize: configuration.maxFileSize
+    };
 
-  public constructor(@Inject('fileManagerUrls') urls: IUrlConfiguration) {
-    this.uploader = new FileUploader({url: urls.filesUrl});
+    this.uploader = new ExtendedFileUploader(options, filemanagerNotification);
   }
 
   public clear() {
@@ -25,14 +33,14 @@ export class FileManagerUploader {
     return options;
   }
 
-  public setAuthorizationToken(token:string) {
+  public setAuthorizationToken(token: string) {
     this.uploader.authToken = token;
   }
 
-  public setDirectoryId(directoryId: string|number): FileManagerUploader {
+  public setDirectoryId(directoryId: string | number): FileManagerUploader {
     let options = this.getDefaultOptions();
 
-    options['headers'] =  [{name: 'folderId', value: directoryId.toString()}];
+    options['headers'] = [{name: 'folderId', value: directoryId.toString()}];
 
     this.uploader.setOptions(options);
 
diff --git a/src/filesList/files-list.less b/src/filesList/files-list.less
index 1c9375c..0111c0f 100644
--- a/src/filesList/files-list.less
+++ b/src/filesList/files-list.less
@@ -55,7 +55,7 @@
     .file-menu {
       display: none;
       position: absolute;
-      top: 20%;
+      top: 30%;
       left: 0;
       right: 0;
       text-align: center;
@@ -89,12 +89,14 @@
         background-color: @backgroundColorSelectedAlpha;
       }
 
-      .file-menu {
+      .file-menu, .file-selection-input {
         display: none;
       }
 
-      .file-selection-input {
-        display: block;
+      &:hover {
+        .file-selection-input {
+          display: block;
+        }
       }
     }
   }
diff --git a/src/filesList/files.html b/src/filesList/files.html
index ce97975..d419441 100644
--- a/src/filesList/files.html
+++ b/src/filesList/files.html
@@ -1,11 +1,13 @@
 <div class="files-list">
-  <div class="file" *ngFor="let file of files" [ngClass]="{'selected': file.selected}" (click)="clickImage(file)">
-    <input *ngIf="configuration.isMultiSelection" class="file-selection-input" type="checkbox" [(ngModel)]="file.selected">
+  <div class="file" *ngFor="let file of files" [ngClass]="{'selected': file.selected}" >
+    <div *ngIf="configuration.isMultiSelection" class="file-selection-input">
+      <i class="fa fa-2x" [ngClass]="{'fa-check-square-o': file.selected, 'fa-square-o': !file.selected}" (click)="toggleSelection(file)"></i>
+    </div>
     <div class="img-rounded file-img" [ngClass]="{'file-img-symbol': !file.isImage()}"
          [style.background-image]="'url(' + file.thumbnailUrl + ')'"></div>
     <span class="file-name">{{file.name}}</span>
     <div class="file-menu">
-      <button mwlConfirm [title]="removeTitle" [message]="getRemoveMessage(file)" [appendToBody]="true"
+      <button mwlConfirmationPopover [title]="removeTitle" [message]="getRemoveMessage(file)" [appendToBody]="true"
               [confirmText]="'Yes'" [cancelText]="'No'" placement="bottom" (confirm)="deleteFile(file)"
               class="btn btn-danger btn-icon">
         <i class="fa fa-trash"></i>
diff --git a/src/filesList/files.service.ts b/src/filesList/files.service.ts
deleted file mode 100644
index 036d21c..0000000
--- a/src/filesList/files.service.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {Http, Response, URLSearchParams} from "@angular/http";
-import {Injectable} from "@angular/core";
-import {Observable} from "rxjs/Rx";
-import {IOuterFile} from "./interface/IOuterFile";
-import {IFileModel} from "./interface/IFileModel";
-import {FileManagerConfiguration} from "../configuration/fileManagerConfiguration.service";
-import {ICropBounds} from "../crop/ICropBounds";
-
-@Injectable()
-export class FilesService {
-  private url: string;
-
-  public constructor(private http: Http, private configuration: FileManagerConfiguration) {
-    this.url = configuration.fileUrl;
-  }
-
-  public crop(file: IFileModel, bounds: ICropBounds): Observable<IOuterFile[]> {
-    return this.http.put(this.url, {id: file.getId(), bounds: bounds})
-      .map((res: Response) => {
-        let body = res.json();
-
-        return body || [];
-      });
-  }
-
-  public load(folderId: string): Observable<IOuterFile[]> {
-    let params = new URLSearchParams();
-    params.set('dirId', folderId);
-
-    return this.http.get(this.url, {search: params})
-      .map((res: Response) => {
-        let body = res.json();
-
-        return body || [];
-      });
-  }
-
-  public remove(file: IFileModel) {
-    let params = new URLSearchParams();
-    params.set('id', file.getId().toString());
-
-    return this.http.delete(this.url, {search: params})
-      .map((res: Response) => {
-        let body = res.json();
-
-        return true;
-      })
-  }
-}
diff --git a/src/filesList/filesList.component.ts b/src/filesList/filesList.component.ts
index 7f61fae..ae39bba 100644
--- a/src/filesList/filesList.component.ts
+++ b/src/filesList/filesList.component.ts
@@ -1,30 +1,37 @@
-import {Component, Input, Output, EventEmitter} from "@angular/core";
-import {FileModel} from "./file.model";
-import {IFileEvent} from "./interface/IFileEvent";
-import {IFileModel} from "./interface/IFileModel";
-import {ConfirmOptions, Position} from "angular2-bootstrap-confirm";
-import {Positioning} from "angular2-bootstrap-confirm/position";
-import {FileManagerConfiguration} from "../configuration/fileManagerConfiguration.service";
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {FileModel} from './file.model';
+import {IFileEvent} from './interface/IFileEvent';
+import {IFileModel} from './interface/IFileModel';
+import {FileManagerConfiguration} from '../configuration/fileManagerConfiguration.service';
+import {IFileManagerAction} from '../store/fileManagerActions.service';
+import {FileManagerDispatcherService} from '../store/fileManagerDispatcher.service';
+import {NotificationsService} from 'angular2-notifications';
+import {FileManagerEffectsService} from '../store/fileManagerEffects.service';
 
 @Component({
-  selector: 'files-list',
+  selector: 'ri-files-list',
   templateUrl: './files.html',
-  providers: [ConfirmOptions, {provide: Position, useClass: Positioning}],
   styleUrls: ['./files-list.less']
 })
 
-export class FilesList {
+export class FilesListComponent {
   @Input() files: FileModel[];
 
-  @Output() onRenameFile = new EventEmitter();
-  @Output() onDeleteFile = new EventEmitter();
   @Output() onPreviewFile = new EventEmitter();
   @Output() onCropFile = new EventEmitter();
   @Output() onSelectFile = new EventEmitter();
 
-  public removeTitle: string = 'Remove file';
+  public removeTitle = 'Remove file';
 
-  public constructor(public configuration: FileManagerConfiguration) {
+  public constructor(public configuration: FileManagerConfiguration,
+                     private fileManagerDispatcher: FileManagerDispatcherService,
+                     notifications: NotificationsService,
+                     fileManagerEffects: FileManagerEffectsService) {
+
+    fileManagerEffects.deleteFileSuccess$
+      .subscribe((action: IFileManagerAction) => {
+        notifications.success('File delete', `${action.payload.file.name} has been deleted`);
+      });
   }
 
   /**
@@ -33,36 +40,19 @@ export class FilesList {
    * @param file
    */
   public deleteFile(file: IFileModel) {
-    this.onDeleteFile.emit({
-      name: 'onDeleteFile',
-      file: file
-    });
+    this.fileManagerDispatcher.deleteFile(file);
   }
 
   public getRemoveMessage(file: IFileModel) {
     return 'You are try to delete <b>' + file.name + '</b>. Are you sure?';
   }
 
-  /**
-   * Fired when clicked on button "rename file name"
-   *
-   * @param file
-   */
-  public renameFile(file: IFileModel) {
-    let fileEvent: IFileEvent = {
-      eventName: 'onRenameFile',
-      file: file
-    };
-
-    this.onRenameFile.emit(fileEvent);
-  }
-
   /**
    * Select or unselect all files
    *
    * @param selected
    */
-  public allFilesSelection(selected: boolean = true) {
+  public allFilesSelection(selected = true) {
     this.files.map((file) => file.selected = selected);
   }
 
@@ -73,7 +63,7 @@ export class FilesList {
     this.files.map((file) => file.selected = !file.selected);
   }
 
-  public openPreview(file: FileModel) {
+  public openPreview(file: FileModel): void {
     let fileEvent: IFileEvent = {
       eventName: 'onPreviewFile',
       file: file
@@ -81,7 +71,7 @@ export class FilesList {
     this.onPreviewFile.emit(fileEvent);
   }
 
-  public openCrop(file: FileModel) {
+  public openCrop(file: FileModel): void {
     let fileEvent: IFileEvent = {
       eventName: 'onCropFile',
       file: file
@@ -89,7 +79,11 @@ export class FilesList {
     this.onCropFile.emit(fileEvent);
   }
 
-  public clickImage(file: FileModel) {
-    this.onSelectFile.next(file);
+  public toggleSelection(file: IFileModel): void {
+    if (file.selected) {
+      this.fileManagerDispatcher.unSelectFile(file);
+    } else {
+      this.fileManagerDispatcher.selectFile(file);
+    }
   }
 }
diff --git a/src/filesList/interface/IFileModel.ts b/src/filesList/interface/IFileModel.ts
index 9780e38..cb62f65 100644
--- a/src/filesList/interface/IFileModel.ts
+++ b/src/filesList/interface/IFileModel.ts
@@ -1,10 +1,11 @@
-import {IOuterFile} from "./IOuterFile";
+import {IOuterFile} from './IOuterFile';
 export interface IFileModel {
   name: string;
   thumbnailUrl: string;
   url: string;
   selected: boolean;
   fromJSON(data: IOuterFile): void;
+  toJSON(): IOuterFile;
   getId(): string|number;
   getMime(): string;
   getWidth(): number;
diff --git a/src/filesList/interface/IOuterFile.ts b/src/filesList/interface/IOuterFile.ts
index 0a8c0ca..609a4f1 100644
--- a/src/filesList/interface/IOuterFile.ts
+++ b/src/filesList/interface/IOuterFile.ts
@@ -1,9 +1,13 @@
 export interface IOuterFile {
-  id: string|number;
+  id: string | number;
+  folderId?: string;
   name: string;
   thumbnailUrl: string;
   url: string;
   width: number;
   height: number;
-  mime: string;
+  type: string;
+  data?: string;
+  size?: number;
+  selected?: boolean;
 }
diff --git a/src/main.less b/src/main.less
index f120823..d6610b5 100644
--- a/src/main.less
+++ b/src/main.less
@@ -2,6 +2,16 @@
 .filemanager-container {
   width: 990px;
   height: 700px;
+
+  .tree {
+    .dropdown {
+      position: relative;
+    }
+
+    .dropdown-menu {
+      position: fixed !important;
+    }
+  }
 }
 
 .fm-main-box {
diff --git a/src/preview/preview.component.ts b/src/preview/preview.component.ts
index 02c039b..91f23c7 100644
--- a/src/preview/preview.component.ts
+++ b/src/preview/preview.component.ts
@@ -1,39 +1,38 @@
-import {Component, Input, OnChanges, HostListener} from "@angular/core";
-import {IFileModel} from "../filesList/interface/IFileModel";
+import {Component, Input, OnChanges, HostListener} from '@angular/core';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {FileModel} from '../filesList/file.model';
 
 @Component({
-  selector: 'file-preview',
-  template: `
-        <div class="filemanager-preview">
-            <div class="carousel slide">
-                <div class="carousel-inner" role="listbox">
-                    <div class="item" *ngFor="let file of files; let i = index;" [ngClass]="{'active': i == currentIndex}">
-                        <img class="img-rounded" src="{{file.url}}" alt="{{file.name}}" style="margin: 0 auto;">
-                        <div class="carousel-caption">{{file.name}}</div>
-                    </div>
-                </div>
-                <a class="left carousel-control" role="button" (click)="prev()" *ngIf="currentIndex != 0">
-                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                </a>
-                <a class="right carousel-control"role="button" (click)="next()" *ngIf="currentIndex + 1 < length">
-                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                </a>
-            </div>  
-        </div>
-    `
+  selector: 'ri-file-preview',
+  templateUrl: './preview.html'
 })
 
 export class PreviewComponent implements OnChanges {
+  /**
+   * Collection of files
+   */
   @Input() files: IFileModel[];
+
+  /**
+   * Current viewed file
+   */
   @Input() file: IFileModel;
 
-  public currentIndex: number = 0;
+  /**
+   * Current index
+   * @type {number}
+   */
+  public currentIndex = 0;
 
-  private length: number = 0;
+  private length = 0;
 
   ngOnChanges() {
     this.length = this.files.length;
-    this.currentIndex = this.files.indexOf(this.file);
+
+    const selectedFiles = this.files
+      .filter((file: FileModel) => file.getId() === this.file.getId());
+
+    this.currentIndex = selectedFiles.length === 1 ? this.files.indexOf(selectedFiles[0]) : -1;
   }
 
   public next() {
diff --git a/src/preview/preview.html b/src/preview/preview.html
new file mode 100644
index 0000000..157b9d5
--- /dev/null
+++ b/src/preview/preview.html
@@ -0,0 +1,16 @@
+<div class="filemanager-preview">
+  <div class="carousel slide">
+    <div class="carousel-inner" role="listbox">
+      <div class="item" *ngFor="let file of files; let i = index;" [ngClass]="{'active': i == currentIndex}">
+        <img class="img-rounded" src="{{file.url}}" alt="{{file.name}}" style="margin: 0 auto;">
+        <div class="carousel-caption">{{file.name}}</div>
+      </div>
+    </div>
+    <a class="left carousel-control" role="button" (click)="prev()" *ngIf="currentIndex != 0">
+      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    </a>
+    <a class="right carousel-control"role="button" (click)="next()" *ngIf="currentIndex + 1 < length">
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    </a>
+  </div>
+</div>
diff --git a/src/services/FilemanagerNotifcations.ts b/src/services/FilemanagerNotifcations.ts
new file mode 100644
index 0000000..5ef4d64
--- /dev/null
+++ b/src/services/FilemanagerNotifcations.ts
@@ -0,0 +1,19 @@
+import {Subject} from 'rxjs/Subject';
+
+export interface INotification {
+  type: 'alert' | 'error' | 'success';
+  title: string;
+  message?: string;
+}
+
+export class FilemanagerNotifcations {
+  private notifciation$ = new Subject<INotification>();
+
+  public sendNotification(notification: INotification): void {
+    this.notifciation$.next(notification);
+  }
+
+  public getNotificationStream(): Subject<INotification> {
+    return this.notifciation$;
+  }
+}
diff --git a/src/services/FilemanagerNotifications.spec.ts b/src/services/FilemanagerNotifications.spec.ts
new file mode 100644
index 0000000..4485b0b
--- /dev/null
+++ b/src/services/FilemanagerNotifications.spec.ts
@@ -0,0 +1,38 @@
+import {FilemanagerNotifcations, INotification} from './FilemanagerNotifcations';
+import {Subject} from 'rxjs/Subject';
+
+describe('FilemanagerNotifications', () => {
+  let notification: INotification;
+  let service: FilemanagerNotifcations;
+
+  beforeEach(() => {
+    notification = {
+      type: 'alert',
+      title: 'Title',
+      message: 'Message'
+    };
+
+    service = new FilemanagerNotifcations();
+  });
+
+  describe('getNotificationStream', () => {
+    it('should allowed to get last value', () => {
+      const notifications$ = service.getNotificationStream();
+
+      expect(notifications$ instanceof Subject).toBe(true);
+    });
+  });
+
+  describe('sendNotification', () => {
+    it('should set new value', () => {
+      const handler = jasmine.createSpy('handler');
+
+      service.getNotificationStream()
+        .subscribe(handler);
+
+      service.sendNotification(notification);
+
+      expect(handler).toHaveBeenCalledWith(notification);
+    });
+  });
+});
diff --git a/src/services/extendedFileUplaoder.service.ts b/src/services/extendedFileUplaoder.service.ts
new file mode 100644
index 0000000..5a826cc
--- /dev/null
+++ b/src/services/extendedFileUplaoder.service.ts
@@ -0,0 +1,52 @@
+import {FileItem, FileUploader, FileUploaderOptions} from 'ng2-file-upload';
+import {IFileDataProperties, ImageDataConverter} from './imageDataConverter.service';
+import {FilemanagerNotifcations, INotification} from './FilemanagerNotifcations';
+import {FileLikeObject} from 'ng2-file-upload/file-upload/file-like-object.class';
+
+export class ExtendedFileUploader extends FileUploader {
+
+  public constructor(options: FileUploaderOptions, private filemanagerNotification: FilemanagerNotifcations) {
+    super(options);
+  }
+
+  public onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: FileUploaderOptions) {
+    const notification: INotification = {
+      type: 'alert',
+      title: 'Add file to queue',
+      message: `File not add to queue`
+    };
+
+    if (filter.name === 'fileSize') {
+      notification.message = `File size is too large - max size  is ${options.maxFileSize / 1024} KB`;
+    } else {
+      notification.message = `File mime type "${item.type}" is not allowed`;
+    }
+    this.filemanagerNotification.sendNotification(notification)
+  }
+
+  public uploadItem(value: FileItem): void {
+    if (this.options.url) {
+      super.uploadItem(value);
+    } else {
+      let imageDataConverter = new ImageDataConverter();
+      this._onProgressItem(value, 0);
+
+      if (this.isUploading) {
+        return;
+      }
+
+      this.isUploading = true;
+
+      const header = this.options.headers.find((object: any) => object.name === 'folderId');
+
+      this._onProgressItem(value, 50);
+      imageDataConverter.getProperties(value._file, header.value)
+        .subscribe((file: IFileDataProperties) => {
+          this.isUploading = false;
+
+          this._onProgressItem(value, 100);
+          this._onCompleteItem(value, JSON.stringify(file), 200, {});
+        })
+    }
+  }
+}
diff --git a/src/services/fileTypeFilter.service.spec.ts b/src/services/fileTypeFilter.service.spec.ts
new file mode 100644
index 0000000..4960097
--- /dev/null
+++ b/src/services/fileTypeFilter.service.spec.ts
@@ -0,0 +1,39 @@
+import {FileTypeFilterService} from './fileTypeFilter.service';
+import {IFileTypeFilter} from '../toolbar/interface/IFileTypeFilter';
+
+describe('fileTypeFilter', () => {
+  let data: IFileTypeFilter;
+  let service: FileTypeFilterService;
+
+  beforeEach(() => {
+    data = {
+      name: 'Some file name',
+      mimes: ['image/png', 'image/jpeg'],
+      iconCls: 'image',
+      text: 'some text',
+      defaultSelected: true
+    };
+
+    service = new FileTypeFilterService();
+  });
+
+  describe('getValue', () => {
+    it('should allowed to get last value', () => {
+      service.filter$.next(data);
+
+      expect(service.getValue()).toEqual(data);
+    });
+  });
+
+  describe('setValue', () => {
+    it('should set new value', () => {
+      expect(service.getValue()).toBeNull();
+
+      expect(service.setValue(data));
+
+      expect(service.getValue()).toEqual(data);
+    });
+  });
+
+
+});
diff --git a/src/services/fileTypeFilter.service.ts b/src/services/fileTypeFilter.service.ts
new file mode 100644
index 0000000..8fe5f58
--- /dev/null
+++ b/src/services/fileTypeFilter.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {IFileTypeFilter} from '../toolbar/interface/IFileTypeFilter';
+
+@Injectable()
+export class FileTypeFilterService {
+
+  /**
+   * File type filter
+   * @type {BehaviorSubject}
+   */
+  public filter$: BehaviorSubject<IFileTypeFilter | null> = new BehaviorSubject(null);
+
+  public getValue(): IFileTypeFilter | null {
+    return this.filter$.getValue();
+  }
+
+  public setValue(value: IFileTypeFilter | null) {
+    this.filter$.next(value);
+  }
+}
diff --git a/src/services/imageDataConverter.service.ts b/src/services/imageDataConverter.service.ts
new file mode 100644
index 0000000..727997b
--- /dev/null
+++ b/src/services/imageDataConverter.service.ts
@@ -0,0 +1,99 @@
+import {Observable} from 'rxjs/Observable';
+import {UUID} from 'angular2-uuid';
+import {Injectable} from '@angular/core';
+
+export interface IFileDataProperties {
+  id: string | number;
+  folderId: string;
+  name: string;
+  size: number;
+  data: string;
+  type: string;
+  width?: number;
+  height?: number;
+  selected?: boolean;
+}
+
+export interface IImageDimensions {
+  width: number;
+  height: number;
+}
+
+@Injectable()
+export class ImageDataConverter {
+  /**
+   * @param {File} file
+   * @param {string} folderId
+   * @returns {Observable<IFileDataProperties>}
+   */
+  public getProperties(file: File, folderId: string): Observable<IFileDataProperties> {
+    let properties: IFileDataProperties = {
+      id: UUID.UUID(),
+      folderId: folderId,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      data: ''
+    };
+
+    let reader = this.getBase64FromFile(file);
+
+    return reader
+      .concatMap((data: string) => {
+        properties.data = data;
+
+        if (properties.type.indexOf('image') === 0) {
+          return this.getImageDimensions(data);
+        } else {
+          return Observable.of({width: 0, height: 0});
+        }
+      })
+      .map((dimensions: IImageDimensions) => {
+        properties.width = dimensions.width;
+        properties.height = dimensions.height;
+
+        return properties;
+      })
+  }
+
+  /**
+   * Create observable which return image as base64 data
+   *
+   * @param file
+   * @return Observable<string>
+   */
+  private getBase64FromFile(file: File): Observable<string> {
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+
+
+    return Observable.fromEvent(reader, 'load')
+      .map(() => {
+        return reader.result;
+      });
+  };
+
+  /**
+   * Create observable which return dimensions of the image
+   *
+   * @param data
+   * @returns {Observable<IImageDimensions>}
+   */
+  private getImageDimensions(data: string): Observable<IImageDimensions> {
+    let image = new Image();
+    image.src = data;
+    image.style.display = 'none';
+
+    const loadImage = Observable.fromEvent(image, 'load')
+      .map(() => {
+        return {
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        }
+      });
+
+    document.body.appendChild(image);
+
+    return loadImage;
+  }
+}
diff --git a/src/services/searchFilter.service.spec.ts b/src/services/searchFilter.service.spec.ts
new file mode 100644
index 0000000..2d1c665
--- /dev/null
+++ b/src/services/searchFilter.service.spec.ts
@@ -0,0 +1,30 @@
+import {SearchFilterService} from './searchFilter.service';
+
+describe('searchFilter', () => {
+  let data: string;
+  let service: SearchFilterService;
+
+  beforeEach(() => {
+    data = 'Some string';
+
+    service = new SearchFilterService();
+  });
+
+  describe('getValue', () => {
+    it('should allowed to get last value', () => {
+      service.filter$.next(data);
+
+      expect(service.getValue()).toBe(data);
+    });
+  });
+
+  describe('setValue', () => {
+    it('should set new value', () => {
+      expect(service.getValue()).toBe('');
+
+      expect(service.setValue(data));
+
+      expect(service.getValue()).toBe(data);
+    });
+  });
+});
diff --git a/src/services/searchFilter.service.ts b/src/services/searchFilter.service.ts
new file mode 100644
index 0000000..c984d53
--- /dev/null
+++ b/src/services/searchFilter.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class SearchFilterService {
+  /**
+   * File type filter
+   * @type {BehaviorSubject}
+   */
+  public filter$: BehaviorSubject<string> = new BehaviorSubject('');
+
+  public getValue(): string {
+    return this.filter$.getValue();
+  }
+
+  public setValue(value: string) {
+    this.filter$.next(value);
+  }
+}
diff --git a/src/store/IFileManagerApi.ts b/src/store/IFileManagerApi.ts
new file mode 100644
index 0000000..0ad19e3
--- /dev/null
+++ b/src/store/IFileManagerApi.ts
@@ -0,0 +1,18 @@
+import {Observable} from 'rxjs/Observable';
+import {IOuterNode} from '@rign/angular2-tree';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {ICropBounds} from '../crop/ICropBounds';
+
+
+export interface IFileManagerApi {
+  add(node: IOuterNode, parentNodeId: string): Observable<IOuterNode>;
+  load(nodeId: string): Observable<IOuterNode[]>;
+  move(srcNode: IOuterNode, targetNode: IOuterNode | null): Observable<IOuterNode>;
+  update(node: IOuterNode): Observable<IOuterNode>;
+  remove(nodeId: string): Observable<IOuterNode>;
+
+  cropFile(file: IOuterFile, bounds: ICropBounds): Observable<IOuterFile>;
+  loadFiles(nodeId: string): Observable<IOuterFile[]>;
+  removeFile(file: IOuterFile): Observable<boolean>;
+  uploadFile(file: IOuterFile): Observable<IOuterFile>;
+}
diff --git a/src/store/fileManagerActions.service.spec.ts b/src/store/fileManagerActions.service.spec.ts
new file mode 100644
index 0000000..27aef11
--- /dev/null
+++ b/src/store/fileManagerActions.service.spec.ts
@@ -0,0 +1,258 @@
+import {FileManagerActionsService, IFileManagerAction} from './fileManagerActions.service';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {FileModel} from '../filesList/file.model';
+import {ICropBounds} from '../crop/ICropBounds';
+
+describe('fileManagerActions.service', () => {
+  let service: FileManagerActionsService;
+  let file: IFileModel;
+  let files: IOuterFile[];
+  let fileData: IOuterFile;
+
+  beforeEach(() => {
+    fileData = {
+      id: '39097132-ed56-3c72-bfd7-898e1cc00299',
+      folderId: 'dd9b20d8-260b-54c1-7eca-c22eae257edc',
+      name: 'avatar.jpg',
+      type: 'image/jpeg',
+      url: 'some base 64png',
+      thumbnailUrl: 'some base 64png',
+      size: 6076,
+      width: 125,
+      height: 125
+    };
+
+    file = new FileModel(fileData);
+
+    files = [fileData];
+
+    service = new FileManagerActionsService();
+  });
+
+  describe('should contains static values', () => {
+    it('FILEMANAGER_CROP_FILE', () => {
+      expect(FileManagerActionsService.FILEMANAGER_CROP_FILE).toBe('FILEMANAGER_CROP_FILE');
+    });
+
+    it('FILEMANAGER_CROP_FILE_SUCCESS', () => {
+      expect(FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS).toBe('FILEMANAGER_CROP_FILE_SUCCESS');
+    });
+
+    it('FILEMANAGER_CROP_FILE_ERROR', () => {
+      expect(FileManagerActionsService.FILEMANAGER_CROP_FILE_ERROR).toBe('FILEMANAGER_CROP_FILE_ERROR');
+    });
+
+    it('FILEMANAGER_DELETE_FILE', () => {
+      expect(FileManagerActionsService.FILEMANAGER_DELETE_FILE).toBe('FILEMANAGER_DELETE_FILE');
+    });
+
+    it('FILEMANAGER_DELETE_FILE_SUCCESS', () => {
+      expect(FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS).toBe('FILEMANAGER_DELETE_FILE_SUCCESS');
+    });
+
+    it('FILEMANAGER_DELETE_FILE_SELECTION', () => {
+      expect(FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION).toBe('FILEMANAGER_DELETE_FILE_SELECTION');
+    });
+
+    it('FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS', () => {
+      expect(FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS).toBe('FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS');
+    });
+
+    it('FILEMANAGER_INVERSE_FILE_SELECTION', () => {
+      expect(FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION).toBe('FILEMANAGER_INVERSE_FILE_SELECTION');
+    });
+
+    it('FILEMANAGER_LOAD_FILES', () => {
+      expect(FileManagerActionsService.FILEMANAGER_LOAD_FILES).toBe('FILEMANAGER_LOAD_FILES');
+    });
+
+    it('FILEMANAGER_LOAD_FILES_SUCCESS', () => {
+      expect(FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS).toBe('FILEMANAGER_LOAD_FILES_SUCCESS');
+    });
+
+    it('FILEMANAGER_SELECT_ALL', () => {
+      expect(FileManagerActionsService.FILEMANAGER_SELECT_ALL).toBe('FILEMANAGER_SELECT_ALL');
+    });
+
+    it('FILEMANAGER_SELECT_FILE', () => {
+      expect(FileManagerActionsService.FILEMANAGER_SELECT_FILE).toBe('FILEMANAGER_SELECT_FILE');
+    });
+
+    it('FILEMANAGER_UNSELECT_FILE', () => {
+      expect(FileManagerActionsService.FILEMANAGER_UNSELECT_FILE).toBe('FILEMANAGER_UNSELECT_FILE');
+    });
+
+    it('FILEMANAGER_UNSELECT_ALL', () => {
+      expect(FileManagerActionsService.FILEMANAGER_UNSELECT_ALL).toBe('FILEMANAGER_UNSELECT_ALL');
+    });
+
+    it('FILEMANAGER_UPLOAD_FILE', () => {
+      expect(FileManagerActionsService.FILEMANAGER_UPLOAD_FILE).toBe('FILEMANAGER_UPLOAD_FILE');
+    });
+
+    it('FILEMANAGER_UPLOAD_FILE_ERROR', () => {
+      expect(FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR).toBe('FILEMANAGER_UPLOAD_FILE_ERROR');
+    });
+
+    it('FILEMANAGER_UPLOAD_FILE_SUCCESS', () => {
+      expect(FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS).toBe('FILEMANAGER_UPLOAD_FILE_SUCCESS');
+    });
+  });
+
+  describe('cropFile', () => {
+    it('should return proper object', () => {
+      const bounds: ICropBounds = {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 200
+      };
+
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_CROP_FILE,
+        payload: {file, bounds}
+      };
+
+      expect(service.cropFile(file, bounds)).toEqual(expected);
+    });
+  });
+
+  describe('cropFileSuccess', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS,
+        payload: {file}
+      };
+
+      expect(service.cropFileSuccess(file)).toEqual(expected);
+    });
+  });
+
+  describe('deleteFile', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_DELETE_FILE,
+        payload: {file}
+      };
+
+      expect(service.deleteFile(file)).toEqual(expected);
+    });
+  });
+
+  describe('deleteFileSuccess', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS,
+        payload: {file}
+      };
+
+      expect(service.deleteFileSuccess(file)).toEqual(expected);
+    });
+  });
+
+  describe('loadFiles', () => {
+    it('should return proper object', () => {
+      const folderId = '124';
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_LOAD_FILES,
+        payload: {folderId}
+      };
+
+      expect(service.loadFiles(folderId)).toEqual(expected);
+    });
+  });
+
+  describe('inverseFileSelection', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION,
+        payload: {}
+      };
+
+      expect(service.inverseFileSelection()).toEqual(expected);
+    });
+  });
+
+  describe('loadFilesSuccess', () => {
+    it('should return proper object', () => {
+      const folderId = '124';
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS,
+        payload: {folderId, files}
+      };
+
+      expect(service.loadFilesSuccess(folderId, files)).toEqual(expected);
+    });
+  });
+
+  describe('selectAllFiles', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_SELECT_ALL,
+        payload: {}
+      };
+
+      expect(service.selectAllFiles()).toEqual(expected);
+    });
+  });
+
+  describe('selectFile', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_SELECT_FILE,
+        payload: {file}
+      };
+
+      expect(service.selectFile(file)).toEqual(expected);
+    });
+  });
+
+  describe('unSelectAll', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_UNSELECT_ALL,
+        payload: {}
+      };
+
+      expect(service.unSelectAll()).toEqual(expected);
+    });
+  });
+
+  describe('unSelectFile', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_UNSELECT_FILE,
+        payload: {file}
+      };
+
+      expect(service.unSelectFile(file)).toEqual(expected);
+    });
+  });
+
+  describe('uploadSuccess', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS,
+        payload: {
+          files: [fileData]
+        }
+      };
+
+      expect(service.uploadSuccess(fileData)).toEqual(expected);
+    });
+  });
+
+  describe('uploadError', () => {
+    it('should return proper object', () => {
+      const expected: IFileManagerAction = {
+        type: FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR,
+        payload: {
+          files: [fileData]
+        }
+      };
+
+      expect(service.uploadError(fileData)).toEqual(expected);
+    });
+  });
+});
diff --git a/src/store/fileManagerActions.service.ts b/src/store/fileManagerActions.service.ts
new file mode 100644
index 0000000..b5ad7f0
--- /dev/null
+++ b/src/store/fileManagerActions.service.ts
@@ -0,0 +1,182 @@
+import {Injectable} from '@angular/core';
+import {Action} from '@ngrx/store';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {ICropBounds} from '../crop/ICropBounds';
+
+export interface IFileManagerPayloadData {
+  folderId?: string;
+  files?: IOuterFile[];
+  file?: IFileModel;
+  bounds?: ICropBounds;
+}
+
+export interface IFileManagerAction extends Action {
+  payload: IFileManagerPayloadData;
+}
+
+@Injectable()
+export class FileManagerActionsService {
+  static FILEMANAGER_CROP_FILE = 'FILEMANAGER_CROP_FILE';
+  static FILEMANAGER_CROP_FILE_SUCCESS = 'FILEMANAGER_CROP_FILE_SUCCESS';
+  static FILEMANAGER_CROP_FILE_ERROR = 'FILEMANAGER_CROP_FILE_ERROR';
+  static FILEMANAGER_DELETE_FILE = 'FILEMANAGER_DELETE_FILE';
+  static FILEMANAGER_DELETE_FILE_SUCCESS = 'FILEMANAGER_DELETE_FILE_SUCCESS';
+  static FILEMANAGER_DELETE_FILE_SELECTION = 'FILEMANAGER_DELETE_FILE_SELECTION';
+  static FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS = 'FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS';
+  static FILEMANAGER_INVERSE_FILE_SELECTION = 'FILEMANAGER_INVERSE_FILE_SELECTION';
+  static FILEMANAGER_LOAD_FILES = 'FILEMANAGER_LOAD_FILES';
+  static FILEMANAGER_LOAD_FILES_SUCCESS = 'FILEMANAGER_LOAD_FILES_SUCCESS';
+  static FILEMANAGER_SELECT_ALL = 'FILEMANAGER_SELECT_ALL';
+  static FILEMANAGER_SELECT_FILE = 'FILEMANAGER_SELECT_FILE';
+  static FILEMANAGER_UNSELECT_FILE = 'FILEMANAGER_UNSELECT_FILE';
+  static FILEMANAGER_UNSELECT_ALL = 'FILEMANAGER_UNSELECT_ALL';
+  static FILEMANAGER_UPLOAD_FILE = 'FILEMANAGER_UPLOAD_FILE';
+  static FILEMANAGER_UPLOAD_FILE_ERROR = 'FILEMANAGER_UPLOAD_FILE_ERROR';
+  static FILEMANAGER_UPLOAD_FILE_SUCCESS = 'FILEMANAGER_UPLOAD_FILE_SUCCESS';
+
+  public cropFile(file: IFileModel, bounds: ICropBounds): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_CROP_FILE,
+      payload: {
+        file: file,
+        bounds: bounds
+      }
+    }
+  }
+
+  public cropFileSuccess(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public cropFileError(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_CROP_FILE_ERROR,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public deleteFile(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_DELETE_FILE,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public deleteFileSuccess(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public deleteSelectedFiles(): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION,
+      payload: {}
+    }
+  }
+
+  public deleteSelectedFilesSuccess(files: IOuterFile[]): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION,
+      payload: {files}
+    }
+  }
+
+  public loadFiles(folderId: string): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_LOAD_FILES,
+      payload: {
+        folderId: folderId
+      }
+    }
+  }
+
+  public inverseFileSelection(): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION,
+      payload: {}
+    }
+  }
+
+  public loadFilesSuccess(folderId: string, files: IOuterFile[]): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS,
+      payload: {
+        folderId: folderId,
+        files: files
+      }
+    }
+  }
+
+  public selectAllFiles(): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_SELECT_ALL,
+      payload: {}
+    }
+  }
+
+  public selectFile(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_SELECT_FILE,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public unSelectAll(): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_UNSELECT_ALL,
+      payload: {}
+    }
+  }
+
+  public unSelectFile(file: IFileModel): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_UNSELECT_FILE,
+      payload: {
+        file: file
+      }
+    }
+  }
+
+  public upload(file: IOuterFile): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_UPLOAD_FILE,
+      payload: {
+        files: [file]
+      }
+    }
+  }
+
+  public uploadSuccess(file: IOuterFile): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS,
+      payload: {
+        files: [file]
+      }
+    }
+  }
+
+  public uploadError(file: IOuterFile): IFileManagerAction {
+    return {
+      type: FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR,
+      payload: {
+        files: [file]
+      }
+    }
+  }
+}
diff --git a/src/store/fileManagerApi.service.spec.ts b/src/store/fileManagerApi.service.spec.ts
new file mode 100644
index 0000000..9c8a7ae
--- /dev/null
+++ b/src/store/fileManagerApi.service.spec.ts
@@ -0,0 +1,49 @@
+import {FilemanagerNotifcations} from '../services/FilemanagerNotifcations';
+import {FileManagerApiService} from './fileManagerApi.service';
+import {IOuterNode} from '@rign/angular2-tree';
+
+describe('fileManagerApi.service', () => {
+  let service: FileManagerApiService;
+  let filemanagerNotifications: FilemanagerNotifcations;
+  let rootNode: IOuterNode = {
+    'id': 'dd9b20d8-260b-54c1-7eca-c22eae257edc',
+    'treeId': 'tree',
+    'name': 'Nowy folder',
+    'parentId': '',
+    'children': [],
+    'parents': []
+  };
+  let nodesData: IOuterNode[] = [rootNode];
+  let handler: any;
+
+  beforeEach(() => {
+    localStorage.setItem('fileManagerTree', JSON.stringify(nodesData));
+
+    handler = jasmine.createSpy('handler');
+    filemanagerNotifications = <FilemanagerNotifcations>jasmine.createSpyObj('FilemanagerNotifcations', ['sendNotification']);
+
+    service = new FileManagerApiService(filemanagerNotifications);
+  });
+
+  afterEach(() => {
+    localStorage.removeItem('fileManagerTree');
+  });
+
+  describe('load', () => {
+    it('should load all nodes from local storage', function () {
+      service.load('')
+        .subscribe(handler);
+
+      expect(handler).toHaveBeenCalledWith([rootNode]);
+    });
+
+    it('should use previously load data', function () {
+      service.load('');
+
+      service.load('')
+        .subscribe(handler);
+
+      expect(handler).toHaveBeenCalledWith([rootNode]);
+    });
+  });
+});
diff --git a/src/store/fileManagerApi.service.ts b/src/store/fileManagerApi.service.ts
new file mode 100644
index 0000000..8e82ff1
--- /dev/null
+++ b/src/store/fileManagerApi.service.ts
@@ -0,0 +1,277 @@
+import {Injectable} from '@angular/core';
+import {IOuterNode} from '@rign/angular2-tree';
+import {Observable} from 'rxjs/Observable';
+import {UUID} from 'angular2-uuid';
+import {IFileManagerApi} from './IFileManagerApi';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {IFileDataProperties} from '../services/imageDataConverter.service';
+import {ICropBounds} from '../crop/ICropBounds';
+import {FilemanagerNotifcations} from '../services/FilemanagerNotifcations';
+
+@Injectable()
+export class FileManagerApiService implements IFileManagerApi {
+
+  protected treeName = 'fileManagerTree';
+  protected fileManagerName = 'fileManagerFiles';
+
+
+  protected nodes: IOuterNode[];
+  protected files: IFileDataProperties[];
+
+  public constructor(private filemanagerNotfication: FilemanagerNotifcations) {
+  }
+
+
+  public load(nodeId = ''): Observable<IOuterNode[]> {
+    if (!this.nodes) {
+      this.nodes = this.getAllDataFromLocalStorage();
+    }
+
+    const nodes = this.getChildren(nodeId);
+
+    return Observable.of(nodes);
+  }
+
+  public add(node: IOuterNode, parentNodeId: string = null): Observable<IOuterNode> {
+    node.parentId = parentNodeId;
+    node.id = UUID.UUID();
+
+    this.nodes.push(node);
+
+    if (this.saveNodes()) {
+      return Observable.of(node);
+    } else {
+      return Observable.empty();
+    }
+
+  }
+
+  public move(srcNode: IOuterNode, targetNode: IOuterNode | null): Observable<IOuterNode> {
+    const srcId = srcNode.id;
+    const targetId = targetNode ? targetNode.id : null;
+
+    const index = this.findIndexByNodeId(srcId);
+
+    this.nodes[index].parentId = targetId;
+
+    if (this.saveNodes()) {
+      return Observable.of(this.nodes[index]);
+    } else {
+      return Observable.empty();
+    }
+
+  }
+
+  public update(node: IOuterNode): Observable<IOuterNode> {
+    const index = this.findIndexByNodeId(node.id);
+
+    this.nodes[index] = node;
+
+    if (this.saveNodes()) {
+      return Observable.of(node);
+    } else {
+      return Observable.empty();
+    }
+  }
+
+  public remove(nodeId: string): Observable<IOuterNode> {
+    const index = this.findIndexByNodeId(nodeId);
+    const node = this.nodes[index];
+
+    const hasChildren = this.getChildren(nodeId).length > 0;
+
+    if (!hasChildren) {
+      this.nodes.splice(index, 1);
+
+      this.saveNodes();
+
+      return Observable.of(node);
+    } else {
+      return Observable.throw('Node is not empty');
+    }
+  }
+
+  /**
+   * Crop file
+   *
+   * @param {IOuterFile} file
+   * @param {ICropBounds} bounds
+   * @returns {Observable<IOuterFile>}
+   */
+  public cropFile(file: IOuterFile, bounds: ICropBounds): Observable<IOuterFile> {
+    return Observable.throw('This functionality is not available with LocalStorage');
+  }
+
+  /**
+   * Load files from directory
+   *
+   * @param {string} nodeId
+   * @returns {Observable<IOuterFile[]>}
+   */
+  public loadFiles(nodeId = ''): Observable<IOuterFile[]> {
+    if (!this.files) {
+      this.files = this.getAllFileDataFromLocalStorage();
+    }
+
+    const files = this.getFilesFromFolder(nodeId);
+
+    const newFiles: IOuterFile[] = files.map((file: IFileDataProperties) => {
+      return this.convertLocalData2IOuterFile(file);
+    });
+
+    return Observable.of(newFiles);
+  }
+
+  public removeFile(file: IOuterFile): Observable<boolean> {
+    const index = this.findIndexByFileId(file.id.toString());
+
+    if (index === -1) {
+      return Observable.of(false);
+    }
+
+    this.files.splice(index, 1);
+    this.saveFiles();
+
+    return Observable.of(true);
+  }
+
+  public uploadFile(file: IOuterFile): Observable<IOuterFile> {
+    const fileData = this.convertIOuterFile2LocalData(file);
+    this.files.push(fileData);
+
+    if (this.saveFiles()) {
+      return Observable.of(this.convertLocalData2IOuterFile(fileData));
+    } else {
+      return Observable.throw('Upload error');
+    }
+  }
+
+
+  private findIndexByNodeId(nodeId: string): number {
+    return this.nodes.findIndex((node) => {
+      return node.id === nodeId;
+    });
+  }
+
+  private findIndexByFileId(fileId: string): number {
+    return this.files.findIndex((file) => file.id === fileId);
+  }
+
+  private getChildren(nodeId: string): IOuterNode[] {
+    return this.nodes.filter((node: IOuterNode) => node.parentId === nodeId);
+  }
+
+  private getFilesFromFolder(nodeId: string): IFileDataProperties[] {
+    return this.files.filter((file: IFileDataProperties) => file.folderId === nodeId);
+  }
+
+  protected getAllDataFromLocalStorage(): IOuterNode[] {
+    try {
+      const data = localStorage.getItem(this.treeName);
+
+      if (data) {
+        return JSON.parse(data);
+      }
+
+      return [];
+
+    } catch (e) {
+      return [];
+    }
+  }
+
+  protected getAllFileDataFromLocalStorage(): IFileDataProperties[] {
+    try {
+      const data = localStorage.getItem(this.fileManagerName);
+
+      if (data) {
+        return JSON.parse(data);
+      }
+
+      return [];
+
+    } catch (e) {
+      return [];
+    }
+  }
+
+  private saveNodes() {
+    try {
+      localStorage.setItem(this.treeName, JSON.stringify(this.nodes));
+
+      return true;
+    } catch (e) {
+      this.filemanagerNotfication.sendNotification({
+        type: 'error',
+        title: 'State is not saved.',
+        message: 'Reload previous state.'
+      });
+
+      this.files = null;
+      this.nodes = null;
+
+      this.load();
+
+      return false;
+    }
+  }
+
+  private saveFiles(): boolean {
+    try {
+      localStorage.setItem(this.fileManagerName, JSON.stringify(this.files));
+
+      return true;
+    } catch (e) {
+      this.filemanagerNotfication.sendNotification({
+        type: 'error',
+        title: 'State is not saved.',
+        message: 'Reload previous state.'
+      });
+
+      const nodeId = this.files[(this.files.length - 1)].folderId || null;
+
+      this.files = null;
+
+      this.load(nodeId);
+
+      return false;
+    }
+  }
+
+  /**
+   *
+   * @param file
+   * @returns {{id: string, folderId: string, name: string, thumbnailUrl: string, url: string, width: number, height: number, mime: string}}
+   */
+  private convertLocalData2IOuterFile(file: IFileDataProperties): IOuterFile {
+    return {
+      id: file.id,
+      folderId: file.folderId,
+      name: file.name,
+      thumbnailUrl: file.data,
+      url: file.data,
+      width: file.width,
+      height: file.height,
+      type: file.type,
+      size: file.size
+    }
+  }
+
+  /**
+   *
+   * @param file
+   * @returns {{id: (any|string), folderId: string, name: string, type: string, data: string, size: number}}
+   */
+  private convertIOuterFile2LocalData(file: IOuterFile): IFileDataProperties {
+    return {
+      id: file.id.toString(),
+      folderId: file.folderId,
+      name: file.name,
+      type: file.type,
+      data: file.data,
+      size: file.size,
+      width: file.width,
+      height: file.height
+    }
+  }
+}
diff --git a/src/store/fileManagerBackendApi.service.spec.ts b/src/store/fileManagerBackendApi.service.spec.ts
new file mode 100644
index 0000000..cf86a90
--- /dev/null
+++ b/src/store/fileManagerBackendApi.service.spec.ts
@@ -0,0 +1,44 @@
+import {IOuterNode} from '@rign/angular2-tree';
+import {Http, Response, ResponseOptions} from '@angular/http';
+import {FileManagerConfiguration} from '../configuration/fileManagerConfiguration.service';
+import {FileManagerBackendApiService} from './fileManagerBackendApi.service';
+import {rootNode} from '../_unitTestMocks/folderDataMock';
+import {Observable} from 'rxjs/Observable';
+
+describe('fileManagerApi.service', () => {
+  let service: FileManagerBackendApiService;
+  let configuration: FileManagerConfiguration;
+  let nodesData: IOuterNode[] = [rootNode];
+  let handler: any;
+  let http: Http | any;
+
+  beforeEach(() => {
+    localStorage.setItem('fileManagerTree', JSON.stringify(nodesData));
+
+    handler = jasmine.createSpy('handler');
+
+    configuration = <FileManagerConfiguration>{
+      folderUrls: {
+        foldersUrl: '/files'
+      }
+    };
+    http = <Http>jasmine.createSpyObj('Http', ['get']);
+
+    service = new FileManagerBackendApiService(http, configuration);
+  });
+
+  afterEach(() => {
+    localStorage.removeItem('fileManagerTree');
+  });
+
+  describe('load', () => {
+    it('should load all nodes from given node', function () {
+      http.get.and.returnValue(Observable.of(new Response(new ResponseOptions({body: JSON.stringify([rootNode])}))));
+
+      service.load('')
+        .subscribe(handler);
+
+      expect(handler).toHaveBeenCalledWith([rootNode]);
+    });
+  });
+});
diff --git a/src/store/fileManagerBackendApi.service.ts b/src/store/fileManagerBackendApi.service.ts
new file mode 100644
index 0000000..04e3c5b
--- /dev/null
+++ b/src/store/fileManagerBackendApi.service.ts
@@ -0,0 +1,272 @@
+import {Injectable} from '@angular/core';
+import {IOuterNode} from '@rign/angular2-tree';
+import {Observable} from 'rxjs/Observable';
+import {ICropBounds, IFileManagerApi, IOuterFile, IFileDataProperties} from '../../main';
+import {Http, Response, URLSearchParams} from '@angular/http';
+import {FileManagerConfiguration} from '../configuration/fileManagerConfiguration.service';
+
+@Injectable()
+export class FileManagerBackendApiService implements IFileManagerApi {
+
+  protected nodes: IOuterNode[] = [];
+  protected files: IFileDataProperties[] = [];
+
+  public constructor(private $http: Http,
+                     private configuration: FileManagerConfiguration) {
+  }
+
+  /**
+   * Load folder chidls for given folder id
+   *
+   * @param {string} nodeId
+   * @returns {Observable<IOuterNode[]>}
+   */
+  public load(nodeId = ''): Observable<IOuterNode[]> {
+    const nodeIds = this.nodes.map((node: IOuterNode) => node.id);
+
+    const params = new URLSearchParams();
+    params.append('nodeId', nodeId);
+
+    return this.$http.get(this.configuration.folderUrls.foldersUrl, {search: params})
+      .map((response: Response): IOuterNode[] => {
+        return response.json();
+      })
+      .map((nodes: IOuterNode[]) => {
+        nodes.forEach((node: IOuterNode) => {
+          if (nodeIds.indexOf(node.id) === -1) {
+            this.nodes.push(node);
+          } else {
+            const index = this.nodes.findIndex((item: IOuterNode) => node.id === item.id);
+            this.nodes[index] = node;
+          }
+        });
+
+        return nodes;
+      });
+  }
+
+  /**
+   * Create new folder
+   *
+   * @param {IOuterNode} node
+   * @param {string} parentNodeId
+   * @returns {Observable<IOuterNode>}
+   */
+  public add(node: IOuterNode, parentNodeId: string = null): Observable<IOuterNode> {
+    const data = {
+      node: node,
+      parentNodeId: parentNodeId
+    };
+
+    return this.$http.post(this.configuration.folderUrls.foldersUrl, data)
+      .map((res: Response): IOuterNode => {
+        return res.json();
+      })
+      .map((newNode: IOuterNode) => {
+        this.nodes.push(newNode);
+
+        return newNode;
+      })
+
+  }
+
+  /**
+   * Move folder from source parent to target parent
+   *
+   * @param {IOuterNode} srcNode
+   * @param {IOuterNode} targetNode
+   * @returns {Observable<IOuterNode>}
+   */
+  public move(srcNode: IOuterNode, targetNode: IOuterNode | null): Observable<IOuterNode> {
+    const srcId = srcNode.id;
+    const targetId = targetNode ? targetNode.id : null;
+
+
+    return this.$http.put(this.configuration.folderUrls.folderMoveUrl, {source: srcId, target: targetId})
+      .map((res: Response) => {
+        return res.json();
+      })
+      .map((movedNode: IOuterNode) => {
+        const index = this.findIndexByNodeId(srcId);
+        this.nodes[index].parentId = targetId;
+
+        return movedNode;
+      });
+  }
+
+  /**
+   * Update folder name
+   *
+   * @param {IOuterNode} node
+   * @returns {Observable<IOuterNode>}
+   */
+  public update(node: IOuterNode): Observable<IOuterNode> {
+    return this.$http.put(this.configuration.folderUrls.foldersUrl, node)
+      .map((res: Response) => {
+        const newNode = res.json();
+        const index = this.findIndexByNodeId(node.id);
+
+        this.nodes[index] = newNode.name;
+
+        return newNode;
+      });
+  }
+
+  /**
+   * Remove node by given id
+   *
+   * @param {string} nodeId
+   * @returns {Observable<IOuterNode>}
+   */
+  public remove(nodeId: string): Observable<IOuterNode> {
+    const index = this.findIndexByNodeId(nodeId);
+
+    const hasChildren = this.getChildren(nodeId).length > 0;
+
+    if (!hasChildren) {
+      return this.$http.delete(this.configuration.folderUrls.foldersUrl, {body: {nodeId: nodeId}})
+        .map((res: Response) => {
+          const removedNode = res.json();
+          this.nodes.splice(index, 1);
+
+          return removedNode;
+        });
+    } else {
+      return Observable.throw('Node is not empty');
+    }
+  }
+
+  /**
+   * Crop file
+   *
+   * @param {IOuterFile} file
+   * @param {ICropBounds} bounds
+   * @returns {Observable<IOuterFile>}
+   */
+  public cropFile(file: IOuterFile, bounds: ICropBounds): Observable<IOuterFile> {
+    return this.$http.put(this.configuration.fileUrl, {id: file.id, bounds: bounds})
+      .map((res: Response) => {
+        return res.json();
+      });
+  }
+
+  /**
+   * Load files from directory
+   *
+   * @param {string} nodeId
+   * @returns {Observable<IOuterFile[]>}
+   */
+  public loadFiles(nodeId = ''): Observable<IOuterFile[]> {
+    const params = new URLSearchParams();
+    params.append('dirId', nodeId);
+
+    // return Observable.of([]);
+
+    return this.$http.get(this.configuration.fileUrl, {search: params})
+      .map((response: Response): IOuterFile[] => {
+        return response.json();
+      })
+      .map((files: IOuterFile[]) => {
+        this.files = files.map((file: IOuterFile) => <IFileDataProperties>file);
+
+        return files;
+      })
+  }
+
+  /**
+   * Remove file from folder
+   *
+   * @param {IOuterFile} file
+   * @returns {Observable<boolean>}
+   */
+  public removeFile(file: IOuterFile): Observable<boolean> {
+    const index = this.findIndexByFileId(file.id.toString());
+
+    if (index === -1) {
+      return Observable.of(false);
+    }
+
+    const params = new URLSearchParams();
+    params.set('id', file.id.toString());
+
+    return this.$http.delete(this.configuration.fileUrl, {search: params})
+      .map((res: Response) => {
+        this.files.splice(index, 1);
+
+        return true;
+      });
+  }
+
+  /**
+   * This method is success method, real upload is done in ExtendedFileUploader
+   * @param {IOuterFile} file
+   * @returns {Observable<IOuterFile>}
+   */
+  public uploadFile(file: IOuterFile): Observable<IOuterFile> {
+    const fileData = this.convertIOuterFile2LocalData(file);
+    this.files.push(fileData);
+
+    return Observable.of(this.convertLocalData2IOuterFile(fileData));
+  }
+
+  /**
+   * @param {string} nodeId
+   * @returns {number}
+   */
+  private findIndexByNodeId(nodeId: string): number {
+    return this.nodes.findIndex((node) => {
+      return node.id === nodeId;
+    });
+  }
+
+  /**
+   * @param {string} fileId
+   * @returns {number}
+   */
+  private findIndexByFileId(fileId: string): number {
+    return this.files.findIndex((file) => file.id === fileId);
+  }
+
+  /**
+   * @param {string} nodeId
+   * @returns {IOuterNode[]}
+   */
+  private getChildren(nodeId: string): IOuterNode[] {
+    return this.nodes.filter((node: IOuterNode) => node.parentId === nodeId);
+  }
+
+  /**
+   * @param file
+   * @returns {{id: string, folderId: string, name: string, thumbnailUrl: string, url: string, width: number, height: number, mime: string}}
+   */
+  private convertLocalData2IOuterFile(file: IFileDataProperties): IOuterFile {
+    return {
+      id: file.id,
+      folderId: file.folderId,
+      name: file.name,
+      thumbnailUrl: file.data,
+      url: file.data,
+      width: file.width,
+      height: file.height,
+      type: file.type,
+      size: file.size
+    }
+  }
+
+  /**
+   * @param file
+   * @returns {{id: (any|string), folderId: string, name: string, type: string, data: string, size: number}}
+   */
+  private convertIOuterFile2LocalData(file: IOuterFile): IFileDataProperties {
+    return {
+      id: file.id.toString(),
+      folderId: file.folderId,
+      name: file.name,
+      type: file.type,
+      data: file.data,
+      size: file.size,
+      width: file.width,
+      height: file.height
+    }
+  }
+}
diff --git a/src/store/fileManagerDispatcher.service.ts b/src/store/fileManagerDispatcher.service.ts
new file mode 100644
index 0000000..76d4026
--- /dev/null
+++ b/src/store/fileManagerDispatcher.service.ts
@@ -0,0 +1,62 @@
+import {Injectable} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {IFileManagerState} from './fileManagerReducer';
+import {FileManagerActionsService} from './fileManagerActions.service';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {ICropBounds} from '../crop/ICropBounds';
+
+@Injectable()
+export class FileManagerDispatcherService {
+
+  constructor(private store: Store<IFileManagerState>, private fileManagerActions: FileManagerActionsService) {
+  }
+
+  public cropFile(file: IFileModel, bounds: ICropBounds): void {
+    this.store.dispatch(this.fileManagerActions.cropFile(file, bounds));
+  }
+
+  public deleteFile(file: IFileModel): void {
+    this.store.dispatch(this.fileManagerActions.deleteFile(file));
+  }
+
+  public deleteSelectedFiles(): void {
+    this.store.dispatch(this.fileManagerActions.deleteSelectedFiles());
+  }
+
+  public inverseSelection(): void {
+    this.store.dispatch(this.fileManagerActions.inverseFileSelection());
+  }
+
+  public loadFiles(folderId: string | null): void {
+    this.store.dispatch(this.fileManagerActions.loadFiles(folderId));
+  }
+
+  public selectAllFiles(): void {
+    this.store.dispatch(this.fileManagerActions.selectAllFiles());
+  }
+
+  public selectFile(file: IFileModel): void {
+    this.store.dispatch(this.fileManagerActions.selectFile(file));
+  }
+
+  public unSelectAllFiles(): void {
+    this.store.dispatch(this.fileManagerActions.unSelectAll());
+  }
+
+  public unSelectFile(file: IFileModel): void {
+    this.store.dispatch(this.fileManagerActions.unSelectFile(file));
+  }
+
+  public uploadError(file: IOuterFile) {
+    this.store.dispatch(this.fileManagerActions.uploadError(file));
+  }
+
+  public upload(file: IOuterFile) {
+    this.store.dispatch(this.fileManagerActions.upload(file));
+  }
+
+  public uploadSuccess(file: IOuterFile) {
+    this.store.dispatch(this.fileManagerActions.uploadSuccess(file));
+  }
+}
diff --git a/src/store/fileManagerEffects.service.ts b/src/store/fileManagerEffects.service.ts
new file mode 100644
index 0000000..1bdd68b
--- /dev/null
+++ b/src/store/fileManagerEffects.service.ts
@@ -0,0 +1,131 @@
+import {Injectable} from '@angular/core';
+import {Actions, Effect} from '@ngrx/effects';
+import {FileManagerActionsService, IFileManagerAction} from './fileManagerActions.service';
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {Observable} from 'rxjs/Observable';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {ICropBounds} from '../crop/ICropBounds';
+import {FileManagerApiService} from './fileManagerApi.service';
+import {FilemanagerNotifcations} from '../services/FilemanagerNotifcations';
+
+@Injectable()
+export class FileManagerEffectsService {
+
+  constructor(private actions$: Actions,
+              private fileManagerActions: FileManagerActionsService,
+              private filemanagerNotfication: FilemanagerNotifcations,
+              private fileManagerApiService: FileManagerApiService) {
+  }
+
+  @Effect()
+  public loadFiles$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_LOAD_FILES)
+    .switchMap((action: IFileManagerAction) => this.loadFiles(action.payload.folderId)
+      .map((files: IOuterFile[]): IFileManagerAction => {
+        return this.fileManagerActions.loadFilesSuccess(action.payload.folderId, files);
+      })
+      .catch(() => Observable.of(this.onLoadFilesError(action.payload.folderId)))
+    );
+
+  @Effect()
+  public cropFile$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_CROP_FILE)
+    .switchMap((action: IFileManagerAction) => this.cropFile(action.payload.file, action.payload.bounds)
+      .map((result: IOuterFile): IFileManagerAction => {
+        this.filemanagerNotfication.sendNotification({
+          type: 'success',
+          title: 'Crop Image.',
+          message: 'Image has been cropped.'
+        });
+        return this.fileManagerActions.cropFileSuccess(action.payload.file);
+      })
+      .catch(() => Observable.of(this.fileManagerActions.cropFileError(action.payload.file)))
+    );
+
+  @Effect()
+  public deleteFile$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_DELETE_FILE)
+    .switchMap((action: IFileManagerAction) => this.deleteFile(action.payload.file)
+      .map((result: boolean): IFileManagerAction => {
+        return this.fileManagerActions.deleteFileSuccess(action.payload.file);
+      })
+      .catch(() => Observable.of(this.onDeleteFileError(action.payload.file)))
+    );
+
+
+  @Effect()
+  public uploadFile$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_UPLOAD_FILE)
+    .switchMap((action: IFileManagerAction) => this.uploadFile(action.payload.files[0])
+      .map((result: IOuterFile): IFileManagerAction => {
+        return this.fileManagerActions.uploadSuccess(result);
+      })
+      .catch(() => {
+        return Observable.empty()
+      })
+    );
+
+  public uploadError$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_ERROR)
+    .map((action: IFileManagerAction) => {
+      this.filemanagerNotfication.sendNotification({
+        type: 'alert',
+        title: 'File upload',
+        message: `${action.payload.file.name} exists on the server in this directory`
+      });
+    });
+
+  public cropFileSuccess$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS);
+
+
+  public cropFileError$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_CROP_FILE_ERROR)
+    .subscribe((action: IFileManagerAction) => {
+      this.onCropFileError(action.payload.file);
+    });
+
+  public deleteFileSuccess$ = this.actions$
+    .ofType(FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS);
+
+
+  protected cropFile(file: IFileModel, bounds: ICropBounds): Observable<IOuterFile> {
+    return this.fileManagerApiService.cropFile(file.toJSON(), bounds);
+  }
+
+  protected deleteFile(file: IFileModel): Observable<boolean> {
+    return this.fileManagerApiService.removeFile(file.toJSON());
+  }
+
+  protected loadFiles(folderId: string | null): Observable<IOuterFile[]> {
+    return this.fileManagerApiService.loadFiles(folderId);
+  }
+
+  protected uploadFile(file: IOuterFile): Observable<IOuterFile> {
+    return this.fileManagerApiService.uploadFile(file);
+  }
+
+  protected onCropFileError(file: IFileModel): void {
+    this.filemanagerNotfication.sendNotification({
+      type: 'alert',
+      title: 'Crop Image',
+      message: '[FILEMANAGER] Can not crop file'
+    });
+  }
+
+  protected onDeleteFileError(file: IFileModel): void {
+    this.filemanagerNotfication.sendNotification({
+      type: 'error',
+      title: 'Delete file',
+      message: '[FILEMANAGER] Can not delete file' + file.name
+    });
+  }
+
+  protected onLoadFilesError(folderId: string): void {
+    this.filemanagerNotfication.sendNotification({
+      type: 'error',
+      title: 'Load files',
+      message: '[FILEMANAGER] Can not load files for folder ' + folderId
+    });
+  }
+}
diff --git a/src/store/fileManagerReducer.ts b/src/store/fileManagerReducer.ts
new file mode 100644
index 0000000..db5c471
--- /dev/null
+++ b/src/store/fileManagerReducer.ts
@@ -0,0 +1,131 @@
+import {IOuterFile} from '../filesList/interface/IOuterFile';
+import {FileManagerActionsService, IFileManagerAction} from './fileManagerActions.service';
+import {State} from '@ngrx/store';
+import {IFileModel} from '../filesList/interface/IFileModel';
+import {FileModel} from '../filesList/file.model';
+
+export interface IFileManagerState extends Array<IOuterFile> {
+}
+
+
+function cropFile(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  let newState = [...state];
+
+  for (let i in state) {
+    if (newState[i].id === action.payload.file.getId()) {
+      newState[i] = action.payload.file.toJSON();
+    }
+  }
+  return newState;
+}
+
+function inverseFilesSelection(state: IFileManagerState): IFileManagerState {
+  return state.map((file: IOuterFile) => {
+    file.selected = !file.selected;
+
+    return file;
+  });
+}
+
+function loadFiles(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  return [...action.payload.files];
+}
+
+function removeFile(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  let id = action.payload.file.getId();
+
+  return [...state.filter((file: IOuterFile) => file.id !== id)]
+}
+
+function removeSelectedFiles(state: IFileManagerState): IFileManagerState {
+  return [...state.filter((file: IOuterFile) => !file.selected)]
+}
+
+function selectFile(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  return state.map((file: IOuterFile) => {
+    if (file.id === action.payload.file.getId()) {
+      file.selected = true;
+
+      return copyOuterFile(file);
+    }
+
+    return file;
+  });
+}
+
+function selectAllFiles(state: IFileManagerState): IFileManagerState {
+  let newState = [...state];
+  return newState.map((file: IOuterFile) => {
+    file.selected = true;
+
+    return file;
+  });
+}
+
+function uploadFiles(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  return [...state, ...action.payload.files];
+}
+
+function unSelectAllFiles(state: IFileManagerState): IFileManagerState {
+  return state.map((file: IOuterFile) => {
+    file.selected = false;
+
+    return file;
+  });
+}
+
+function unSelectFile(state: IFileManagerState, action: IFileManagerAction): IFileManagerState {
+  const file = getFileById(state, action.payload.file.getId());
+
+  file.selected = false;
+
+  return [...state];
+}
+
+
+function getFileById(state: IFileManagerState, id: string | number): IOuterFile {
+  const files = state.filter((file: IOuterFile) => file.id === id);
+
+  return files.length > 0 ? files[0] : null;
+}
+
+
+function copyOuterFile(inputFile: IOuterFile): IOuterFile {
+  let {id, folderId, name,  thumbnailUrl,  url,  width,  height,  type,  data, size,  selected} = inputFile;
+
+  return <IOuterFile>{id, folderId, name,  thumbnailUrl,  url,  width,  height,  type,  data, size,  selected};
+}
+
+
+export function fileManagerReducer(state: IFileManagerState = [], action: IFileManagerAction): IFileManagerState {
+  switch (action.type) {
+    case FileManagerActionsService.FILEMANAGER_CROP_FILE_SUCCESS:
+      return cropFile(state, action);
+    case FileManagerActionsService.FILEMANAGER_INVERSE_FILE_SELECTION:
+      return inverseFilesSelection(state);
+    case FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION:
+      return removeSelectedFiles(state);
+    case FileManagerActionsService.FILEMANAGER_DELETE_FILE_SUCCESS:
+      return removeFile(state, action);
+    case FileManagerActionsService.FILEMANAGER_LOAD_FILES_SUCCESS:
+      return loadFiles(state, action);
+    case FileManagerActionsService.FILEMANAGER_SELECT_ALL:
+      return selectAllFiles(state);
+    case FileManagerActionsService.FILEMANAGER_SELECT_FILE:
+      return selectFile(state, action);
+    case FileManagerActionsService.FILEMANAGER_UNSELECT_ALL:
+      return unSelectAllFiles(state);
+    case FileManagerActionsService.FILEMANAGER_UNSELECT_FILE:
+      return unSelectFile(state, action);
+    case FileManagerActionsService.FILEMANAGER_UPLOAD_FILE_SUCCESS:
+      return uploadFiles(state, action);
+    case FileManagerActionsService.FILEMANAGER_DELETE_FILE_SELECTION_SUCCESS:
+    case FileManagerActionsService.FILEMANAGER_CROP_FILE:
+    case FileManagerActionsService.FILEMANAGER_DELETE_FILE:
+    case FileManagerActionsService.FILEMANAGER_LOAD_FILES:
+      return state;
+    default:
+      return state;
+  }
+}
+
diff --git a/src/test.ts b/src/test.ts
new file mode 100644
index 0000000..1d2bb74
--- /dev/null
+++ b/src/test.ts
@@ -0,0 +1,34 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+import 'rxjs/Rx';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/src/toolbar/fileTypeFilter/fileTypeFilter.component.html b/src/toolbar/fileTypeFilter/fileTypeFilter.component.html
new file mode 100644
index 0000000..30c6689
--- /dev/null
+++ b/src/toolbar/fileTypeFilter/fileTypeFilter.component.html
@@ -0,0 +1,6 @@
+<div class="btn-group">
+  <button *ngFor="let type of typeFilterList" class="btn btn-default" [ngClass]="{'active': type === selectedType}"
+          (click)="setFilterType(type)">
+    <i class="{{type.iconCls}}"></i>
+  </button>
+</div>
diff --git a/src/toolbar/fileTypeFilter/fileTypeFilter.component.ts b/src/toolbar/fileTypeFilter/fileTypeFilter.component.ts
new file mode 100644
index 0000000..f9524fe
--- /dev/null
+++ b/src/toolbar/fileTypeFilter/fileTypeFilter.component.ts
@@ -0,0 +1,40 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {IFileTypeFilter} from '../interface/IFileTypeFilter';
+import {FileTypeFilterService} from '../../services/fileTypeFilter.service';
+
+@Component({
+  selector: 'ri-file-type-filter',
+  templateUrl: './fileTypeFilter.component.html'
+})
+
+export class FileTypeFilterComponent implements OnInit {
+  @Input() typeFilterList: IFileTypeFilter[] = [];
+
+  public selectedType: IFileTypeFilter = null;
+
+  constructor(private fileTypeFilter: FileTypeFilterService) {
+    this.fileTypeFilter.filter$
+      .subscribe((type: IFileTypeFilter | null) => {
+        this.selectedType = type;
+      })
+  }
+
+  ngOnInit() {
+    /** init file type filter **/
+    this.typeFilterList
+      .filter((type: IFileTypeFilter) => {
+        return type.defaultSelected;
+      })
+      .forEach((type: IFileTypeFilter) => {
+        this.fileTypeFilter.setValue(type);
+      });
+  }
+
+  /**
+   * Set current filter and fire event
+   * @param type
+   */
+  public setFilterType(type: IFileTypeFilter) {
+    this.fileTypeFilter.setValue(type);
+  }
+}
diff --git a/src/toolbar/searchFile/searchFile.component.html b/src/toolbar/searchFile/searchFile.component.html
new file mode 100644
index 0000000..aae6797
--- /dev/null
+++ b/src/toolbar/searchFile/searchFile.component.html
@@ -0,0 +1,8 @@
+<div class="input-group">
+  <input [formControl]="searchField" type="text" class="form-control" placeholder="Search for...">
+  <span class="input-group-btn">
+      <button (click)="searchField.reset('')" class="btn btn-default" type="button">
+          <i class="fa fa-times"></i>
+      </button>
+  </span>
+</div>
diff --git a/src/toolbar/searchFile/searchFile.component.ts b/src/toolbar/searchFile/searchFile.component.ts
new file mode 100644
index 0000000..999361c
--- /dev/null
+++ b/src/toolbar/searchFile/searchFile.component.ts
@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {SearchFilterService} from '../../services/searchFilter.service';
+
+@Component({
+  selector: 'ri-search-file',
+  templateUrl: './searchFile.component.html'
+})
+
+export class SearchFileComponent implements OnInit {
+
+  public searchField = new FormControl();
+
+  constructor(private searchFilterService: SearchFilterService) {
+  }
+
+  ngOnInit() {
+    this.searchField.valueChanges
+      .debounceTime(250)
+      .subscribe((value: string) => this.searchFilterService.setValue(value));
+  }
+}
diff --git a/src/toolbar/toolbar.component.ts b/src/toolbar/toolbar.component.ts
index e7a7995..9597e84 100644
--- a/src/toolbar/toolbar.component.ts
+++ b/src/toolbar/toolbar.component.ts
@@ -1,36 +1,24 @@
-import {Component, EventEmitter, Output, Input, OnChanges} from "@angular/core";
-import {IButton} from "../dropdown/IButton";
-import {Button} from "./models/button.model";
-import {ToolbarEventModel} from "./models/toolbarEvent.model";
-import {IToolbarEvent} from "./interface/IToolbarEvent";
-import {ConfirmOptions, Position} from "angular2-bootstrap-confirm";
-import {Positioning} from "angular2-bootstrap-confirm/position";
-import {FormControl} from "@angular/forms";
-import {IFileTypeFilter} from "./interface/IFileTypeFilter";
-import {FileManagerConfiguration} from "../configuration/fileManagerConfiguration.service";
-import {FileManagerUploader} from "../filesList/fileManagerUploader.service";
+import {Component, EventEmitter, Output, Input, OnChanges} from '@angular/core';
+import {IButton} from '../dropdown/IButton';
+import {Button} from './models/button.model';
+import {ToolbarEventModel} from './models/toolbarEvent.model';
+import {IToolbarEvent} from './interface/IToolbarEvent';
+import {FileManagerConfiguration} from '../configuration/fileManagerConfiguration.service';
+import {FileManagerUploader} from '../filesList/fileManagerUploader.service';
+import {FileManagerDispatcherService} from '../store/fileManagerDispatcher.service';
 
 @Component({
   selector: 'toolbar',
   styleUrls: ['./toolbar.less'],
-  providers: [ConfirmOptions, {provide: Position, useClass: Positioning}],
   templateUrl: './toolbar.html'
 })
 
-export class Toolbar implements OnChanges {
+export class ToolbarComponent implements OnChanges {
   @Input() currentFolderId: string;
-  @Input() numberOfSelectedItems: number;
 
   @Output() onAddFolderClick = new EventEmitter();
   @Output() onUpload = new EventEmitter();
-  @Output() onUploadItem = new EventEmitter();
   @Output() onMenuButtonClick = new EventEmitter();
-  @Output() onSearchChange = new EventEmitter();
-  @Output() onFilterTypeChange = new EventEmitter();
-
-  public searchField = new FormControl();
-
-  public selectedType: IFileTypeFilter = null;
 
   public selectAllButton: IButton = {
     symbol: Button.SELECT_ALL,
@@ -52,36 +40,24 @@ export class Toolbar implements OnChanges {
     }
   ];
 
-  /**
-   * List of filter types
-   * @typeObserv {IFileTypeFilter[]}
-   */
-  public typeFilterList: IFileTypeFilter[];
-
   public constructor(public configuration: FileManagerConfiguration,
-                     public fileManagerUploader: FileManagerUploader) {
+                     public fileManagerUploader: FileManagerUploader,
+                     private fileManagerDispatcher: FileManagerDispatcherService) {
 
     this.fileManagerUploader.clear();
 
-    this.typeFilterList = configuration.fileTypesFilter;
-
     this.fileManagerUploader.uploader.onCompleteAll = () => {
       this.onUpload.emit(this.currentFolderId || '');
     };
 
-    this.fileManagerUploader.uploader.onCompleteItem = (item: any, response: any, status: number, headers: any) => {
-      this.onUploadItem.emit({response: response, status: status, name: item.file.name});
-    };
 
-    this.searchField.valueChanges
-      .debounceTime(250)
-      .subscribe((value) => this.onSearchChange.emit(value));
-
-    this.typeFilterList.forEach((type) => {
-      if (type.defaultSelected) {
-        this.selectedType = type;
+    this.fileManagerUploader.uploader.onCompleteItem = (item: any, response: any, status: number, headers: any) => {
+      if (status === 200) {
+        this.fileManagerDispatcher.upload(JSON.parse(response));
+      } else {
+        this.fileManagerDispatcher.uploadError(JSON.parse(response));
       }
-    });
+    };
   }
 
   public ngOnChanges() {
@@ -102,22 +78,4 @@ export class Toolbar implements OnChanges {
     let event: IToolbarEvent = new ToolbarEventModel(Button.REFRESH_FILES_LIST);
     this.onMenuButtonClick.emit(event);
   }
-
-  public onDeleteSelection() {
-    let event: IToolbarEvent = new ToolbarEventModel(Button.DELETE_SELECTION);
-    this.onMenuButtonClick.emit(event);
-  }
-
-  public getRemoveMessage() {
-    return 'You are try to delete <b>' + this.numberOfSelectedItems.toString() + ' file(s)</b>. Are you sure?';
-  }
-
-  /**
-   * Set current filter and fire event
-   * @param type
-   */
-  public setFilterType(type: IFileTypeFilter) {
-    this.selectedType = type;
-    this.onFilterTypeChange.emit(type);
-  }
 }
diff --git a/src/toolbar/toolbar.html b/src/toolbar/toolbar.html
index 7f95351..0ba9729 100644
--- a/src/toolbar/toolbar.html
+++ b/src/toolbar/toolbar.html
@@ -13,8 +13,8 @@
         <input #fileInput type="file" ng2FileSelect [uploader]="fileManagerUploader.uploader" (onCompleteAll)="onUpload()" (onCompleteItem)="onUploadItem()" multiple/>
       </span>
     </div>
-    <dropdown *ngIf="configuration.isMultiSelection" [mainButton]="selectAllButton" [buttons]="selectButtonsList"
-              (onClick)="onSelectDropdownClick($event)"></dropdown>
+    <ri-dropdown *ngIf="configuration.isMultiSelection" [mainButton]="selectAllButton" [buttons]="selectButtonsList"
+              (onClick)="onSelectDropdownClick($event)"></ri-dropdown>
     <div class="btn-group">
       <button class="btn btn-default" (click)="onRefreshFilesList()">
         <i class="fa fa-refresh"></i>
@@ -22,21 +22,9 @@
     </div>
   </div>
   <div class="col-md-3">
-    <div class="btn-group">
-      <button *ngFor="let type of typeFilterList" class="btn btn-default" [ngClass]="{'active': type === selectedType}"
-              (click)="setFilterType(type)">
-        <i class="{{type.iconCls}}"></i>
-      </button>
-    </div>
+    <ri-file-type-filter [typeFilterList]="configuration.fileTypesFilter"></ri-file-type-filter>
   </div>
   <div class="col-md-3">
-    <div class="input-group">
-      <input [formControl]="searchField" type="text" class="form-control" placeholder="Search for...">
-      <span class="input-group-btn">
-                <button (click)="searchField.reset('')" class="btn btn-default" type="button">
-                    <i class="fa fa-times"></i>
-                </button>
-            </span>
-    </div>
+    <ri-search-file></ri-search-file>
   </div>
 </div>
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
new file mode 100644
index 0000000..3b8201b
--- /dev/null
+++ b/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../demo/src/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 1731556..11fd0b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,9 +10,6 @@
     "moduleResolution": "node",
     "outDir": "../dist/out-tsc",
     "sourceMap": true,
-    "target": "es5",
-    "typeRoots": [
-      "./example"
-    ]
+    "target": "es5"
   }
 }
diff --git a/tslint.json b/tslint.json
index 640d02c..fe37146 100644
--- a/tslint.json
+++ b/tslint.json
@@ -89,8 +89,8 @@
       "check-type"
     ],
 
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "directive-selector": [true, "attribute", ["app", "ri"], "camelCase"],
+    "component-selector": [true, "element", ["app", "ri"], "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,