How to get started easily with Syncfusion Angular 11 File Manager

This article explains how to easily integrate Syncfusion Angular File Manager into an Angular 11 application with its commonly used features. 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 files or folders. This component also provides easy navigation for browsing folders to select a file or folder from the file system.

Prerequisites

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

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

Installation and application creation

1. Install Angular cli 11 using the following command. 

npm install -g @angular/cli@11.2.3 

2. Create an Angular 11 application using Angular cli. 

ng new angular11-app
cd angular11-app

3. 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 the Angular 11 version.

Integration of Angular File Manager

1. 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.

2. 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 { }

3. Refer the CSS file for the 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';

4. Add the Angular File Manager component in app.component.html.

     <ejs-filemanager></ejs-filemanager>

5. 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'

              }; 

     }

6. 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 an 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.

7. 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:

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>

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

Refer to the working sample for additional details and implementation: location. 

Conclusion

we hope you enjoyed learning how to get started easily with Syncfusion Angular 11 File Manager.

You can refer to our Angular feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Filemanager example to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Scheduler and other Angular components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!