How to get started with an example of Angular 6 File Manager component?

The Essential JS 2 Angular File Manager is a graphical user interface component for managing the file system that allows users to perform the most common file operations such as copying, moving, accessing, editing, sorting and drag and drop the files or folders. This component also provides easy navigation for the browsing folders to select a file or folder from the file system.

This KB article explains you about, how to easily integrate Syncfusion Angular File Manager in the Angular 6 application with its commonly used features.

Prerequisites

Before we start, we need the following items to create the Angular File Manager in Angular 6 application.

• Node.js
• Angular 6
• Angular CLI
• Visual studio code for editor.

Installation and application creation

• Install the Angular CLI 6 using the following command.

  npm install -g @angular/cli@6.0.3
  

• Create an Angular 6 application using the following command.

  ng new filemanager-app
  cd filemanager-app 
  

Integration of Angular File Manager

• After creating the application, install the packages for the File Manager component and its dependencies into your application using the following command.

  npm install @syncfusion/ej2-angular-filemanager --save
  

• Now, the environment-related configurations have been completed. Next, integrate your Angular File Manager component into the application. To import the File Manager component in the app.module.ts, include it in the declarations.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
   
  import { AppComponent } from './app.component';
  import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager';
   
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FileManagerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
   
  

• Essential JS 2 components support a set of built-in-themes. Here, the material theme is used for the File Manager. To add the material theme in your application, import the File Manager and its dependent component’s styles in style.css.

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
   
  

• Add the Angular File Manager component with the ajaxSettings property in app.component.html. The ajaxSettings must be defined while initializing the file manager. File manager utilizes the URL’s mentioned in the ajaxSettings to send file operation request to the server.

  <ejs-filemanager id='default-filemanager' [ajaxSettings]='ajaxSettings'>
  </ejs-filemanager> 
  

• Now, define the file provider service link for the File Manager in app.component.ts.

  import { Component } from '@angular/core';
   
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'filemanager-app';
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ajaxSettings: object = {
      url: this.hostUrl + 'api/FileManager/FileOperations'
    };
  }
   
  Here, we have rendered the File Manager using the online service. It can also be rendered using local service. For this, first clone or download this repository. After that, open the solution, launch it, and replace the hostUrl with the url of the launched service.
  

• After initializing the File Manger component, you can use the following command to see the output in a browser.

  ng serve
  

• After all the files have been compiled successfully, it will serve the site at localhost:4200, The following screenshot explains this.

• To perform download, upload and image preview support, define the downloadUrl, uploadUrl and getImageUrl link in the ajaxSettings property of the File Manager component.

  import { Component } from '@angular/core';
   
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'filemanager-app';
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ajaxSettings: object = {
      url: this.hostUrl + 'api/FileManager/FileOperations',
      downloadUrl: this.hostUrl + 'api/FileManager/Download',
      uploadUrl: this.hostUrl + 'api/FileManager/Upload',
      getImageUrl: this.hostUrl + 'api/FileManager/GetImage'
    };
  }
   
  

Injecting Feature Modules

Basically, the File Manager component contains a context menu for performing file operations, large icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system. The above modules can be injected into the File Manager by importing them as providers in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FileManagerModule, ToolbarService, NavigationPaneService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FileManagerModule
  ],
  providers: [ToolbarService, NavigationPaneService, DetailsViewService],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Drag and Drop Support

File Manager allows managing the files or folders within the file system using Drag and Drop operation. This feature can be enabled or disabled by using the allowDragAndDrop property of the File Manager.

<ejs-filemanager id='default-filemanager' [ajaxSettings]='ajaxSettings' [allowDragAndDrop]='true'>
</ejs-filemanager>

Managing storage services

File manager supports managing data from different storage services like,

Physical Storage

Physical File Provider – ASP.NET Core, ASP.NET MVC

Node.js framework

Cloud Storage

Microsoft azure cloud storage

Google drive cloud storage

Database Storage

SQL server database

Summary

The runnable sample application prepared from the above steps has been committed in this location. You can check the features of Angular File Manager here.

Also, refer to the documentation and online samples for more details about the File Manager control.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!