How to get started easily with Syncfusion Angular 11 File Manager

3 mins read

The Essential JS 2 Angular FileManager 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 of files or folders. This component also provides easy navigation for browsing folders to select a file or folder from the file system.

This KB article explains how to easily integrate Syncfusion Angular File Manager in Angular 11 application with its commonly used features.

Prerequisites

Before starting, you need the following items to create Angular File Manager in Angular 11 application:

Node.js (latest version)
Angular 11
Angular CLI
Typescript 4+
Visual Studio Code for Editor

Installation and application creation

Install Angular cli 11 using the following command.

npm install -g @angular/cli@11.2.3

Note:

If you want to follow and run the application in Angular 6, Angular 7, Angular 8 or Angular 9 you need to replace the CLI command version number with corresponding angular version number.

npm install -g @angular/cli@<CLI VERSION>

Create an Angular 11 application using Angular cli.

ng new angular11-app

cd angular11-app

Serve the Angular 11 application using the following command.

ng serve

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 11 version.

Angular-app

Integration of Angular File Manager

After running the Angular 11 application successfully, configure the Angular File Manager in this application. Install Angular File Manager and EJ2 package using the following command.
```
npm install @syncfusion/ej2-angular-filemanager --save

npm install @syncfusion/ej2 --save
```

The --save command instructs NPM to include the File Manager control inside the dependencies section of the package.json.

Import FileManagerAllModule from installed package in app/app.module.ts.

     import { BrowserModule } from '@angular/platform-browser';

     import { NgModule } from '@angular/core';

     import { FileManagerAllModule } from '@syncfusion/ej2-angular-filemanager';

     import { AppComponent } from './app.component';

 

     @NgModule({

       declarations: [

         AppComponent

       ],

       imports: [

         BrowserModule,

         FileManagerAllModule

       ],

       bootstrap: [AppComponent]

     })

     export class AppModule { }

Refer the CSS file for Angular File Manager Layout 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 in app.component.html.

     <ejs-filemanager></ejs-filemanager>

Now, define the web service for the File Manager in app.component.ts.

     export class AppComponent implements OnInit {

              public hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/';

              public ajaxSettings: object = {

                   url: this.hostUrl + 'api/FileManager/FileOperations',

                   getImageUrl: this.hostUrl + 'api/FileManager/GetImage',

                   uploadUrl: this.hostUrl + 'api/FileManager/Upload',

                   downloadUrl: this.hostUrl + 'api/FileManager/Download'

              }; 

     }

Then refer this in the ajaxSettings property of the File Manager in app.component.html.

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

     </ejs-filemanager>

Here, we have rendered the File Manager using online service. It can also be rendered using local service. After that, open the solution, launch it, and replace the hostUrl with the url of the launched service.

You can also utilize other functionalities in File Manager such as allowMultiSelection, enableRtl, view, etc.

Now, serve the application using the following command.

ng serve

After all the files have been compiled successfully, it will serve the site at localhost:4200

The following screenshot illustrates this.

File-manager

Drag and drop support

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

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

</ejs-filemanager>

Drag-and-Drop

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.

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

Did you find this information helpful?

Yes

Comments (0)