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 Note:If you want to follow and run the application in Angular 7, Angular 5, or Angular 4, you need to replace the CLI command version number with corresponding angular version number with the following command.npm install -g @angular/cli@<CLI VERSION> 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!
How to get started easily with Syncfusion Angular 9 File Manager 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 9 application with its commonly used features. Prerequisites Before starting, you need the following items to create Angular File Manager in Angular 9 application: Node.js (latest version) Angular Angular CLI Visual studio code for editor Installation and application creation Install Angular cli 9 using the following command.npm install -g @angular/cli@9.0.2 Note:If you want to follow and run the application in Angular 6, Angular 7, or Angular 8, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application using Angular cli.ng new angular9-app cd angular9-app Serve the Angular 9 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 9 version. Integration of Angular File Manager After running the Angular 9 application successfully, configure the Angular File Manager in this application. Install Angular File Manager and EJ2 package using the following command. The —save command instructs NPM to include the File Manager control inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-filemanager --save npm install @syncfusion/ej2 --save 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. 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 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!
How to get started easily with Syncfusion Angular 8 File Manager 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 8 application with its commonly used features. Prerequisites Before starting, you need the following items to create Angular File Manager in Angular 8 application: Node.js (latest version) Angular Angular CLI Visual studio code for editor Installation and application creation Install Angular cli 8 using the following command.npm install -g @angular/cli@8.1.1 Note:If you want to follow and run the application in Angular 6, Angular 5, or Angular 7, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create an Angular 8 application using Angular cli.ng new angular8-app cd angular8-app Serve the Angular 8 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 8 version. Integration of Angular File Manager After running the Angular 8 application successfully, configure the Angular File Manager in this application. Install Angular File Manager and EJ2 package using the following command. The —save command instructs NPM to include the File Manager control inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-filemanager --save npm install @syncfusion/ej2 --save 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. 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 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
