syncfusion
/
ej2-angular-docs
зеркало из https://github.com/syncfusion/ej2-angular-docs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

documentation(EJ2-000): source update from ej2-filemanager-angular-docs

This commit is contained in:
essentialjs2 2021-07-07 14:58:04 +00:00
Родитель 4012f9e90b
Коммит dd424fde4f
30 изменённых файлов: 3719 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

130
src/filemanager/file-manager/access-control.md Normal file
Просмотреть файл

@ -0,0 +1,130 @@
---
title: "FileManager Access Control"
component: "FileManager"
description: "Access control allow the filemanager to provide permission for folder or file."
---
# Access Control
The FileManager allows you to define access permissions for folders and files using a set of access rules to user(s).
* [Access Rules](#access-rules)
* [Permissions](#permissions)
## Access Rules
The FileAccessController allows you to define security permissions for folders and files using a set of folder or file access rules.
To set up access rules for folders (including their files and sub-folders) and individual files, use the SetRules() method. The following table represents the AccessRule properties available for file and folder:
| **Properties** | **Applicable for file** | **Applicable for folder** | **Description** |
| --- | --- | --- | --- |
| Copy | Yes | Yes | Allows access to copy a file or folder. |
| Read | Yes | Yes | Allows access to read a file or folder. |
| Write | Yes | Yes | Allows permission to write a file or folder. |
| WriteContents | No | Yes | Allows permission to write the content of folder. |
| Download | Yes | Yes | Allows permission to download a file or folder. |
| Upload | No | Yes | Allows permission to upload to the folder. |
| Path | Yes | Yes | Specifies the path to apply the rules, which are defined. |
| Role | Yes | Yes | Specifies the role to which the rule is applied. |
| IsFile | Yes | Yes | Specifies whether the rule is specified for folder or file. |
The following syntax represents the access Rules for Administrator using file or folder.
```typescript
//Adminstrator
//Access Rules for File
new AccessRule { Path = "/*.*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow, IsFile = true },
// Access Rules for folder
new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Allow, Copy = Permission.Allow, WriteContents = Permission.Allow, Upload = Permission.Allow, Download = Permission.Deny, IsFile = false },
```
The following syntax represent the access Rules for Default user using file or folder.
```typescript
//Default User
//Access Rules for File
new AccessRule { Path = "/*.*", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny, IsFile = true },
// Access Rules for folder
new AccessRule { Path = "*", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Deny, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },
```
## Permissions
It helps to explain how to apply security permission to file manager file or folder using access rules. The following table represent the value that determines the permission.
| **Value** | **Description** |
| --- | ---|
| Allow | Allows you to do read, write, copy, and download operations. |
| Deny | Denies you to do read, write, copy, and download operations. |
Use the `Role` property to apply created roles to the file manager. After that, the file manager displays folder or file and allow permisssion based on assigned roles.
The following syntax represent how to apply permission based on assigned roles
Permission denied for administrator to write a file or folder.
```typescript
// For file
new AccessRule { Path = "/*.*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny, IsFile = true},
// For folder
new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny, IsFile = false},
```
The following syntax represent how to allow or deny permission based on file or folder access rule.
"Examples"
Permission denied for writing except for particular file or folder.
```typescript
// Deny writing for particular folder
new AccessRule { Path = "/Documents", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Allow, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },
// Deny writing for particular file
new AccessRule { Path = "/Documents/2.png", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny, IsFile = true },
```
Permission denied for writing and uploading in root folder.
``` typescript
// Folder Rule
new AccessRule { Path = "/", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Deny, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },
```
The following example demonstrate the file manager rendered with access control support.
{% tab template="file-manager/access-control", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileAccess/FileOperations',
getImageUrl: this.hostUrl + 'api/FileAccess/GetImage',
uploadUrl: this.hostUrl + 'api/FileAccess/Upload',
downloadUrl: this.hostUrl + 'api/FileAccess/Download'
};
}
}
```
{% endtab %}

72
src/filemanager/file-manager/accessibility.md Normal file
Просмотреть файл

@ -0,0 +1,72 @@
---
title: "FileManager Accessibility"
component: "FileManager"
description: "This section explains the WAI-ARIA accessibility support of the Syncfusion Angular filemanager control."
---
# Accessibility
The File Manager component has been designed with keeping the `WAI-ARIA` specifications in mind, and applying the `WAI-ARIA` roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT) or for users who completely rely on keyboard navigation.
## ARIA attributes
The following `ARIA` Attributes denote the state of File Manager.
| **Property** | **Functionalities** |
| --- | --- |
| aria-disabled | Indicates whether the File Manager component is in disabled state.|
| aria-haspopup | Indicates whether the Toolbar element has a suggestion list. |
| aria-orientation | Indicates whether the File Manager element is oriented horizontally or vertically. |
| aria-expanded | Indicates whether the Treeview node has been expanded. |
| aria-owns | Contains the ID of the suggestion list to indicate popup as a child element. |
| aria-activedescendent | Holds the ID of the active list item to focus its descendant child element. |
| aria-level | Specifies the level of the element in Treeview Structure. |
| aria-selected | Indicates whether a particular node is in selected state. |
| aria-placeholder | Represents a hint (word or phrase) to the user about what to enter in the text field |
| aria-label | Defines a string that labels the current element. |
| aria-checked | Indicates whether the checkbox is in checked state. |
| aria-labelledby | Labels the dialog. Often, the value of the aria-labelledby attribute will be the id of the element, which is used to title the dialog |
| aria-describedby | Describes the contents of the dialog. |
| aria-modal | Indicates whether an element is a modal when display. |
| aria-colcount | Specifies the number of columns in full table. |
| aria-colindexnt | Defines the number of columns within a grid. |
| aria-rowspan | Defines the number of rows a cell spanned within a grid. |
| aria-colspan | Defines the number of columns a cell spanned within a grid. |
| aria-sort | Indicates whether items in the grid or table are sorted in ascending or descending order. |
| aria-grabbed | This attribute is set to true, and it has been selected for dragging. If this element is set to false, the element can be grabbed for a drag-and-drop operation, but will not currently be selected. |
| aria-busy | This attribute is set to false when grid content is loaded. |
| aria-multiselectable | Defines more than one item has been selected. |
## Keyboard interaction
You can use the following key shortcuts to access the File Manager without interruptions.
| **Keyboard shortcuts** | **Actions** |
| --- | --- |
| <kbd>Page Down</kbd> | Scrolls down to the next folder or file and selects the first item when files are loaded. |
| <kbd>Page Up</kbd> | Scrolls up to previous folder and select the first item when files are loaded. |
| <kbd>Enter</kbd> | Selects the focused item and navigate through the child elements. |
| <kbd>Tab</kbd> | Focuses on the first element of toolbar and navigates through the next tab indexed element. |
| <kbd>Esc(Escape)</kbd> | Closes the image when it is in open state. |
| <kbd>Alt+N</kbd> | Creates a new folder dialog.|
| <kbd>F5</kbd> | Refresh the file manager element. |
| <kbd>Home</kbd> | Navigate through the first element of Details view or Largeicons view. |
| <kbd>End</kbd> | Navigate through the last element of Details view or Largeicons view. |
| <kbd>Move Left</kbd> | Scrolls left to previous folder and select the first item when files are loaded |
| <kbd>Move Right</kbd> | Scrolls right to previous folder and select the first item when files are loaded |
| <kbd>Alt+Enter</kbd> | Shows the Get Details info for selected folder. |
| <kbd>Shift+Right</kbd> | Allows multiselection. Selects the file or folder at the right of the previously selected folder. |
| <kbd>Shift+Left</kbd> | Allows multiselection. Selects the file or folder at the left of the previously selected folder. |
| <kbd>Shift+Down</kbd> | Allows multiselection. Select the file or folder till the focused index. |
| <kbd>Shift+Delete</kbd> | Permanently deletes the selected file or folder in file manager element. |
| <kbd>Delete</kbd> | Deletes the selected file or folder in file manager element. |
| <kbd>Shift+Up</kbd> | Allows multiselection. Select the file or folder till the focused index. |
| <kbd>Ctrl+C</kbd> | Copies the Selected file or folder in file manager element. |
| <kbd>Ctrl+V</kbd> | Pastes the Copied/Cut file or folder in file manager element. |
| <kbd>Ctrl+X</kbd> | Cuts the Selected file or folder in file manager element. |
| <kbd>Ctrl+A</kbd> | Select all the files or folder in Grid view or Largeicons view. |
| <kbd>F2</kbd> | Creates a rename dialog for selected file or folder in file manager element. |
| <kbd>Shift+F10</kbd> | Opens the context menu for selected file or folder in file manager element. |
| <kbd>Ctrl+D</kbd> | Downloads the list of selected file or folder in file manager element. |
| <kbd>Ctrl+Shift+1</kbd> | Changes the file manager layout to Grid view. |
| <kbd>Ctrl+Shift+2</kbd> | Changes the file manager layout to Details view. |

370
src/filemanager/file-manager/customization.md Normal file
Просмотреть файл

@ -0,0 +1,370 @@
---
title: "Customization"
component: "File Manager"
description: "Customizing File Manager functionalities"
---
# Customizing File Manager functionalities
The file manager component allows customizing its functionalities like, context menu, searching, uploading, toolbar using APIs. Given below are some of the functionalities that can be customized in the File Manager,
* [Context menu customization](#context-menu-customization)
* [Details view customization](#details-view-customization)
* [Navigation pane customization](#navigation-pane-customization)
* [Show/Hide file extension](#showhide-file-extension)
* [Show/Hide hidden items](#showhide-hidden-items)
* [Show/Hide thumbnail images in large icons view](#showhide-thumbnail-images-in-large-icons-view)
* [Toolbar customization](#toolbar-customization)
* [Upload customization](#upload-customization)
* [Tooltip customization](#tooltip-customization)
## Context menu customization
The context menu settings like, items to be displayed on files, folders and layout click and visibility can be customized using [contextMenuSettings](../api/file-manager/#contextmenusettings) property.
{% tab template="file-manager/context-menu", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public contextMenuSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Context Menu settings customization
this.contextMenuSettings = { file: ['Open', '|', 'Details'], folder: ['Open', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|'], visible: true};
};
}
```
{% endtab %}
## Details view customization
The details view settings like, column width, header text, template for each field can be customized using [detailsViewSettings](../api/file-manager/#detailsviewsettings) property.
{% tab template="file-manager/detailsview", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public view: string;
public detailsViewSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Initial view of File Manager is set to details view
this.view = "Details";
// Details View settings customization
this.detailsViewSettings = {
columns: [
{field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}'},
{field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'},
{ field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'}
]
};
};
}
```
{% endtab %}
## Navigation pane customization
The navigation pane settings like, minimum and maximum width and visibility can be customized using [navigationPaneSettings](../api/file-manager/#navigationpanesettings) property.
{% tab template="file-manager/navigationpane", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public navigationPaneSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Navigation Pane settings customization
this.navigationPaneSettings = { maxWidth: '850px', minWidth: '140px', visible: true};
};
}
```
{% endtab %}
## Show/Hide file extension
The file extensions are displayed in the File Manager by default. This can be hidden by disabling the [showFileExtension](../api/file-manager/#showfileextension) property.
In File Manager [fileLoad](../api/file-manager/#fileload) and [fileOpen](../api/file-manager/#fileopen) events are triggered before the file/folder is rendered and before the file/folder is opened respectively. These events can be utilized to perform operations before a file/folder is rendered or opened.
{% tab template="file-manager/fileextension", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public showFileExtension: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Hides the file extension in File Manager
this.showFileExtension = false;
};
// File Manager's file beforeFileLoad function
onBeforeFileLoad(args: any) {
console.log(args.fileDetails.name + " is loading");
}
// File Manager's file beforeFileOpen function
onBeforeFileOpen(args: any) {
console.log(args.fileDetails.name + " is opened");
}
}
```
{% endtab %}
## Show/Hide hidden items
The File Manager provides support to show/hide the hidden items by enabling/disabling the [showHiddenItems](../api/file-manager/#showhiddenitems) property.
{% tab template="file-manager/hiddenitems", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public showHiddenItems: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// The default value set for showHiddenItems is false
this.showHiddenItems = true;
};
}
```
{% endtab %}
## Show/Hide thumbnail images in large icons view
The thumbnail images are displayed in the File Manager's large icons view by default. This can be hidden by disabling the [showThumbnail](../api/file-manager/#showthumbnail) property.
{% tab template="file-manager/disablethumbnail", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public showThumbnail: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Hides the thumbnail images in File Manager's large icons view
this.showThumbnail = false;
};
}
```
{% endtab %}
## Toolbar customization
The toolbar settings like, items to be displayed in toolbar and visibility can be customized using [toolbarSettings](../api/file-manager/#toolbarsettings) property.
{% tab template="file-manager/toolbar-customize", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public toolbarSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Toolbar settings customization
this.toolbarSettings = { items: ['NewFolder', 'Refresh', 'View', 'Details'], visible: true};
};
}
```
{% endtab %}
## Upload customization
The upload settings like, minimum and maximum file size and enabling auto upload can be customized using [uploadSettings](../api/file-manager/#uploadsettings) property.
{% tab template="file-manager/upload", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public uploadSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Upload settings customization
this.uploadSettings = { maxFileSize: 233332, minFileSize: 120, autoUpload: true};
};
}
```
{% endtab %}
## Tooltip customization
The tooltip value can be customized by adding extra content to the title of the toolbar, navigation pane, details view and large icons of the file manager element.
{% tab template="file-manager/tooltip", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component, ViewChild } from '@angular/core';
import { FileManagerComponent, FileLoadEventArgs} from '@syncfusion/ej2-angular-filemanager';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
import { getValue, select } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('fileObj',{ static: true })
public fileObj: FileManagerComponent;
public ajaxSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
};
fileLoad (args: FileLoadEventArgs) {
//Native tooltip customization to display additonal information in new line
let target: Element = args.element;
if (args.module==='DetailsView') {
let element: Element = select('[title]', args.element);
let title: string = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
element.setAttribute('title', title);
} else if (args.module==='LargeIconsView') {
let title: string = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
target.setAttribute('title', title);
}
}
}
```
{% endtab %}

62
src/filemanager/file-manager/drag-and-drop.md Normal file
Просмотреть файл

@ -0,0 +1,62 @@
---
title: "Drag and Drop"
component: "File Manager"
description: "Drag and Drop Support in file manager"
---
# Drag And Drop
The file manager allows files or folders to be moved from one folder to another by using the [allowDragAndDrop](../api/file-manager/#allowdraganddrop) property. It also supports uploading a file by dragging it from Windows Explorer to FileManager control. You can enable or disable this support by using the [allowDragAndDrop](../api/file-manager/#allowdraganddrop) property of file manager.
The event triggered in drag and drop support are
* [fileDragStart](../api/file-manager/#filedragstart) - Triggers when the file/folder dragging is started.
* [fileDragging](../api/file-manager/#filedragging) - Triggers while dragging the file/folder.
* [fileDragStop](../api/file-manager/#filedragstop) - Triggers when the file/folder is about to be dropped at the target.
* [fileDropped](../api/file-manager/#filedropped) - Triggers when the file/folder is dropped.
{% tab template="file-manager/drag-and-drop", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public allowDragAndDrop: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowDragAndDrop = true;
};
// File Manager's file drag start event function
onFileDragStart(args: any) {
console.log("File drag start");
}
// File Manager's file drag stop event function
onFileDragStop(args: any) {
console.log("File drag stop");
}
// File Manager's file dragging event function
onFileDragging(args: any) {
console.log("File dragging");
}
// File Manager's file dropped event function
onFileDropped(args: any) {
console.log("File dropped");
}
}
```
{% endtab %}

869
src/filemanager/file-manager/file-operations.md Normal file
Просмотреть файл

@ -0,0 +1,869 @@
---
title: "File Operations"
component: "File Manager"
description: "File Operations supported in file manager Component"
---
# File Operations
The file manager component is used to browse, manage, and organize the files and folders in a file system through a web application. All basic file operations like creating a new folder, uploading and downloading of files in the file system, and deleting and renaming of existing files and folders are available in the file manager component. Additionally, previewing of image files is also provided in the file manager component.
The following table represents the basic operations available in the file manager and their corresponding functions.
|Operation Name|Function|
|----|----|
|read|Read the details of files or folders available in the given path from the file system, to display the files for the user to browse the content.|
|create|Creates a new folder in the current path of the file system.|
|delete|Removes the file or folder from the file server.|
|rename|Rename the selected file or folder in the file system.|
|search|Searches for items matching the search string in the current and child directories.|
|details|Gets the detail of the selected item(s) from the file server.|
|copy|Copy the selected file or folder in the file system.|
|move|Cut the selected file or folder in the file server.|
|upload|Upload files to the current path or directory in the file system.|
|download|Downloads the file from the server and the multiple files can be downloaded as ZIP files.|
>The *CreateFolder*, *Remove*, and *Rename* actions will be reflected in the file manager only after the successful response from the server.
## File operation request and response Parameters
The default parameters available in file operation request from the file manager and the corresponding response parameters required by the file manager are listed as follows.
### Read
The following table represents the request parameters of *read* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|read|Name of the file operation.|
|path|String|-|Relative path from which the data has to be read.|
|showHiddenItems|Boolean|-|Defines show or hide the hidden items.|
|data|FileManagerDirectoryContent|-|Details about the current path (directory).|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of data*.
*Example:*
```typescript
{
action: "read",
path: "/",
showHiddenItems: false,
data: []
}
```
The following table represents the response parameters of *read* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|cwd|FileManagerDirectoryContent|-|Path (Current Working Directory) details.|
|files|FileManagerDirectoryContent[]|-|Details of files and folders present in given path or directory.|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of cwd, files, and error*.
*Example:*
```typescript
{
cwd:
{
name:"Download",
size:0,
dateModified:"2019-02-28T03:48:19.8319708+00:00",
dateCreated:"2019-02-27T17:36:15.812193+00:00",
hasChild:false,
isFile:false,
type:"",
filterPath:"\\Download\\"
},
files:[
{
name:"Sample Work Sheet.xlsx",
size:6172,
dateModified:"2019-02-27T17:23:50.9651206+00:00",
dateCreated:"2019-02-27T17:36:15.8151955+00:00",
hasChild:false,
isFile:true,
type:".xlsx",
filterPath:"\\Download\\"
}
],
error:null,
details:null
}
```
### Create
The following table represents the request parameters of *create* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|create|Name of the file operation.|
|path|String|-|Relative path in which the folder has to be created.|
|name|String|-|Name of the folder to be created.|
|data|FileManagerDirectoryContent|-|Details about the current path (directory).|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of data*
*Example:*
```typescript
{
action: "create",
data: [
{
dateCreated: "2019-02-27T17:36:15.6571949+00:00",
dateModified: "2019-03-12T10:17:31.8505975+00:00",
filterPath: "\",
hasChild: true,
isFile: false,
name: files,
nodeId: "fe_tree",
size: 0,
type: ""
}
],
name: "Hello",
path: "/"
}
```
The following table represents the response parameters of *create* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the created folder|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of files and error*.
*Example:*
```typescript
{
cwd: null,
files: [
{
dateCreated: "2019-03-15T10:25:05.3596171+00:00",
dateModified: "2019-03-15T10:25:05.3596171+00:00",
filterPath: null,
hasChild: false,
isFile: false,
name: "New",
size: 0,
type: ""
}
],
details: null,
error: null
}
```
### Rename
The following table represents the request parameters of *rename* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|rename|Name of the file operation.|
|path|String|-|Relative path in which the item is located.|
|name|String|-|Current name of the item to be renamed.|
|newname|String|-|New name for the item.|
|data|FileManagerDirectoryContent|-|Details of the item to be renamed.|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of data*.
*Example:*
```typescript
{
action: "rename",
data: [
{
dateCreated: "2019-03-20T05:22:34.621Z",
dateModified: "2019-03-20T08:45:56.000Z",
filterPath: "\Pictures\Nature\",
hasChild: false,
iconClass: "e-fe-image",
isFile: true,
name: "seaviews.jpg",
size: 95866,
type: ".jpg"
}
],
newname: "seaview.jpg",
name: "seaviews.jpg",
path: "/Pictures/Nature/"
}
```
The following table represents the response parameters of *rename* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details of the renamed item.|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of files and error*.
*Example:*
```typescript
{
cwd:null,
files:[
{
name:"seaview.jpg",
size:95866,
dateModified:"2019-03-20T08:45:56+00:00",
dateCreated:"2019-03-20T05:22:34.6214847+00:00",
hasChild:false,
isFile:true,
type:".jpg",
filterPath:"\\Pictures\\Nature\\seaview.jpg"
}
],
error:null,
details:null
}
```
### Delete
The following table represents the request parameters of *delete* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|delete|Name of the file operation.|
|path|String|-|Relative path where the items to be deleted are located.|
|names|String[]|-|List of the items to be deleted.|
|data|FileManagerDirectoryContent|-|Details of the item to be deleted.|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of data*.
*Example:*
```typescript
{
action: "delete",
path: "/Hello/",
names: ["New"],
data: []
}
```
The following table represents the response parameters of *delete* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|files|FileManagerDirectoryContent[]|-|Details about the deleted item(s).|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of files and error*.
*Example:*
```typescript
{
cwd: null,
details: null,
error: null,
files: [
{
dateCreated: "2019-03-15T10:13:30.346309+00:00",
dateModified: "2019-03-15T10:13:30.346309+00:00",
filterPath: "\Hello\folder",
hasChild: true,
isFile: false,
name: "folder",
size: 0,
type: ""
}
]
}
```
### Details
The following table represents the request parameters of *details* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|details|Name of the file operation.|
|path|String|-|Relative path where the items are located.|
|names|String[]|-|List of the items to get details.|
|data|FileManagerDirectoryContent|-|Details of the selected item.|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of data*.
*Example:*
```typescript
{
action: "details",
path: "/FileContents/",
names: ["All Files"],
data: []
}
```
The following table represents the response parameters of *details* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|details|FileManagerDirectoryContent|-|Details of the requested item(s).|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of details and error*.
*Example:*
```typescript
{
cwd:null,
files:null,
error:null,
details:
{
name:"All Files",
location:"\\Files\\FileContents\\All Files",
isFile:false,
size:"679.8 KB",
created:"3/8/2019 10:18:37 AM",
modified:"3/8/2019 10:18:39 AM",
multipleFiles:false
}
}
```
### Search
The following table represents the request parameters of *search* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|search|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be searched.|
|showHiddenItems|Boolean|-|Defines show or hide the hidden items.|
|caseSensitive|Boolean|-|Defines search is case sensitive or not.|
|searchString|String|-|String to be searched in the directory.|
|data|FileManagerDirectoryContent|-|Details of the searched item.|
*Example:*
```typescript
{
action: "search",
path: "/",
searchString: "*nature*",
showHiddenItems: false,
caseSensitive: false,
data: []
}
```
The following table represents the response parameters of *search* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|cwd|FileManagerDirectoryContent|-|Path (Current Working Directory) details.|
|files|FileManagerDirectoryContent[]|-|Files and folders in the searched directory that matches the search input.|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of cwd, files and error.*
*Example:*
```typescript
{
cwd:
{
name:files,
size:0,
dateModified:"2019-03-15T10:07:00.8658158+00:00",
dateCreated:"2019-02-27T17:36:15.6571949+00:00",
hasChild:true,
isFile:false,
type:"",
filterPath:"\\"
},
files:[
{
name:"Nature",
size:0,
dateModified:"2019-03-08T10:18:42.9937708+00:00",
dateCreated:"2019-03-08T10:18:42.5907729+00:00",
hasChild:true,
isFile:false,
type:"",
filterPath:"\\FileContents\\Nature"
}
],
error:null,
details:null
}
```
### Copy
The following table represents the request parameters of *copy* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|copy|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be copied.|
|names|String[] |-|List of files to be copied.|
|targetPath|String|-|Relative path where the items to be pasted are located.|
|data|FileManagerDirectoryContent|-|Details of the copied item.|
|renameFiles|String[]|-|Details of the renamed item.|
*Example:*
```typescript
{
action: "copy",
path: "/",
names: ["6.png"],
renameFiles: ["6.png"],
targetPath: "/Videos/"
}
```
The following table represents the response parameters of *copy* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|cwd|FileManagerDirectoryContent|-|Path (Current Working Directory) details.|
|files|FileManagerDirectoryContent[]|-|Details of copied files or folders|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of cwd, files and error.*
*Example:*
```typescript
{
cwd:null,
files:[
{
path:null,
action:null,
newName:null,
names:null,
name:"justin.mp4",
size:0,
previousName:"album.mp4",
dateModified:"2019-06-21T06:58:32+00:00",
dateCreated:"2019-06-24T04:22:14.6245618+00:00",
hasChild:false,
isFile:true,
type:".mp4",
id:null,
filterPath:"\\"
}
],
error:null,
details:null
}
```
### Move
The following table represents the request parameters of *move* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|move|Name of the file operation.|
|path|String|-|Relative path to the directory where the files should be copied.|
|names|String[] |-|List of files to be moved.|
|targetPath|String|-|Relative path where the items to be pasted are located.|
|data|FileManagerDirectoryContent|-|Details of the moved item.|
|renameFiles|String[]|-|Details of the renamed item.|
*Example:*
```typescript
{
action: "move",
path: "/",
names: ["6.png"],
renameFiles: ["6.png"],
targetPath: "/Videos/"
}
```
The following table represents the response parameters of *copy* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|cwd|FileManagerDirectoryContent|-|Path (Current Working Directory) details.|
|files|FileManagerDirectoryContent[]|-|Details of cut files or folders|
|error|ErrorDetails|-|Error Details|
*Refer [File request and response contents](#file-request-and-response-contents) for the contents of cwd, files and error.*
*Example:*
```typescript
{
cwd:null,
files:[
{
path:null,
action:null,
newName:null,
names:null,
name:"justin biber.mp4",
size:0,
previousName:"justin biber.mp4",
dateModified:"2019-06-21T06:58:32+00:00",
dateCreated:"2019-06-24T04:26:49.2690476+00:00",
hasChild:false,
isFile:true,
type:".mp4",
id:null,
filterPath:"\\Videos\\"
}
],
error:null,
details:null
}
```
### Upload
The following table represents the request parameters of *Upload* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|Save|Name of the file operation.|
|path|String|-|Relative path to the location where the file has to be uploaded.|
|uploadFiles|`IList<IFormFile>`|-|File that are uploaded.|
*Example:*
```typescript
uploadFiles: (binary),
path: /,
action: Save,
data: {
path:null,
action:null,
newName:null,
names:null,
name:"Downloads",
size:0,
previousName:null,
dateModified:"2019-07-22T11:23:46.7153977 00:00",
dateCreated:"2019-07-22T11:26:13.9047229 00:00",
hasChild:false,
isFile:false,
type:"",
id:null,
filterPath:"\\",
targetPath:null,
renameFiles:null,
uploadFiles:null,
caseSensitive:false,
searchString:null,
showHiddenItems:false,
_fm_iconClass:null,
_fm_id:"fe_tree_1",
_fm_pId:null,
_fm_selected:false,
_fm_icon:null,
data:null,
targetData:null,
permission:null
}
```
The upload response is an empty string.
### Download
The following table represents the request parameters of *download* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|action|String|download|Name of the file operation|
|path|String|-|Relative path to location where the files to download are present.|
|names|String[]|-|Name list of the items to be downloaded.|
|data|FileManagerDirectoryContent|-|Details of the download item.|
*Example:*
```typescript
{
action:"download",
path:"/",
names:["1.png"],
data:[
{
path:null,
action:null,
newName:null,
names:null,
name:"1.png",
size:49792,
previousName:null,
dateModified:"2019-07-22T12:15:45.0972405+00:00",
dateCreated:"2019-07-22T12:15:45.0816042+00:00",
hasChild:false,
isFile:true,
type:".png",
id:null,
filterPath:"\\",
targetPath:null,
renameFiles:null,
uploadFiles:null,
caseSensitive:false,
searchString:null,
showHiddenItems:false,
_fm_iconClass:"e-fe-image",
_fm_id:null,
_fm_pId:null,
_fm_selected:false,
_fm_icon:null,
data:null,
targetData:null,
permission:null,
_fm_created:"2019-07-22T12:15:45.081Z",
_fm_modified:"2019-07-22T12:15:45.097Z",
_fm_imageUrl:"https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage?path=/1.png",
_fm_imageAttr:
{
alt:"1.png"
},
_fm_htmlAttr:
{
class:"e-large-icon",
title:"1.png"
}
}
]
}
```
Downloads the requested items from the file server in response.
### GetImage
The following table represents the request parameters of *GetImage* operations.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|path|String|-|Relative path to the image file|
Return the image as a file stream in response.
The request from the file manager can be customized using the [beforeSend](../api/file-manager/#beforesend) event. Additional information can be passed to the file manager in file operation response and can be used in customization.
## File request and response contents
The following table represents the contents of *data, cwd, and files* in the file manager request and response.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|name|String|-|File name|
|dateCreated|String|-|Date in which file was created (UTC Date string).|
|dateModified|String|-|Date in which file was last modified (UTC Date string).|
|filterPath|String|-|Relative path to the file or folder.|
|hasChild|Boolean|-|Defines this folder has any child folder or not.|
|isFile|Boolean|-|Say whether the item is file or folder.|
|size|Number|-|File size|
|type|String|-|File extension|
The following table represents the contents of *error* in the file manager request and response.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|code|String|-|Error code|
|message|String|-|Error message|
|fileExists|String[]|-|List of duplicate file names|
The following table represents the contents of *details* in the file manager request and response.
|Parameter|Type|Default|Explanation|
|----|----|----|----|
|name|String|-|File name|
|dateCreated|String|-|Date in which file was created (UTC Date string).|
|dateModified|String|-|Date in which file was last modified (UTC Date string).|
|filterPath|String|-|Relative path to the file or folder.|
|hasChild|Boolean|-|Defines this folder has any child folder or not.|
|isFile|Boolean|-|Say whether the item is file or folder.|
|size|Number|-|File size|
|type|String|-|File extension|
|multipleFiles|Boolean|-|Say whether the details are about single file or multiple files.|
## Action Buttons
The file manager has several menu buttons to access the file operations. The list of menu buttons available in the file manager is given in the following table.
|Menu Button|Behaviour|
|----|----|
|SortBy| Opens the sub menu to choose the sorting order and sorting parameter.|
|View| Opens the sub menu to choose the View.|
|Open| Navigates to the selected folder. Opens the preview for image files.|
|Refresh| Initiates the read operation for the current directory and displays the updated directory content.|
|NewFolder| Opens the new folder dialog box to receive the name for the new folder.|
|Rename| Opens the rename dialog box to receive the new name for the selected item.|
|Delete| Opens the delete dialog box to confirm the removal of the selected items from the file system.|
|Upload| Opens the upload box to select the items to upload to the file system.|
|Download| Downloads the selected item(s).|
|Details| Get details about the selected items and display them in details dialog box.|
|SelectAll| Selects all the files and folders displayed in the view section.|
The action menu buttons are present in the toolbar and context menu. The toolbar contains the buttons based on the selected items count, while the context menu will appear with a list based on the target.
### Toolbar
The toolbar can be divided into two sections as right and left. Whenever the toolbar buttons exceed the size, the buttons present in the left section of the toolbar will be moved to the toolbar popup.
The following table provides the toolbar buttons that appear based on the selection.
<!-- markdownlint-disable MD033 -->
<table>
<tr>
<td> <b>Selected Items Count</b> </td>
<td> <b>Left section </b></td>
<td> <b>Right section </b></td>
</tr>
<tr>
<td>
`0` (none of the item )
</td>
<td>
* SortBy
* Refresh
* NewFolder
* Upload
</td>
<td>
* View
* Details
</td>
</tr>
<tr>
<td>
`1` (single item selected)
</td>
<td>
* Delete
* Download
* Rename
</td>
<td>
* Selected items count
* View
* Details
</td>
</tr>
<tr>
<td>
`>1` (multiple selection)
</td>
<td>
* Delete
* Download
</td>
<td>
* Selected items count
* View
* Details
</td>
</tr>
</table>
### Context menu
The following table provides the default context menu item and the corresponding target areas.
<!-- markdownlint-disable MD033 -->
<table>
<tr>
<td> <b>Menu Name</b> </td>
<td> <b>Menu Items </b></td>
<td> <b>Target </b></td>
</tr>
<tr>
<td>Layout</td>
<td>
* SortBy
* View
* Refresh
* NewFolder
* Upload
* Details
* Select all
</td>
<td>
* Empty space in the view section (details view and large icon view area).
* Empty folder content.
</td>
</tr>
<tr>
<td>Folders</td>
<td>
* Open
* Delete
* Rename
* Downloads
* Details
</td>
<td>
* Folders in treeview, details view, and large icon view.
</td>
</tr>
<tr>
<td>Files</td>
<td>
* Open
* Delete
* Rename
* Downloads
* Details
</td>
<td>
* Files in details view and large icon view.
</td>
</tr>
</table>

719
src/filemanager/file-manager/file-system-provider.md Normal file
Просмотреть файл

@ -0,0 +1,719 @@
---
title: "FileManager File System Provider"
component: "FileManager"
description: "File System Provider allow the File Manager to provide service for different platform."
---
# File System Provider
The file system provider allows the File Manager component to manage the files and folders in a physical or cloud-based file system. It provides the methods for performing various file actions like creating a new folder, copying and moving of files or folders, deleting, uploading, and downloading the files or folders in the file system.
The following file providers are added in Syncfusion EJ2 File Manager component.
* [ASP.NET Core file system provider](#aspnet-core-file-system-provider)
* [ASP.NET MVC 5 file system provider](#aspnet-mvc-5-file-system-provider)
* [ASP.NET Core Azure cloud file system Provider](#aspnet-core-azure-cloud-file-system-provider)
* [ASP.NET MVC 5 Azure cloud file system Provider](#aspnet-mvc-5-azure-cloud-file-system-provider)
* [ASP.NET Core Amazon S3 cloud file provider](#aspnet-core-amazon-s3-cloud-file-provider)
* [ASP.NET MVC Amazon S3 cloud file provider](#aspnet-mvc-amazon-s3-cloud-file-provider)
* [File Transfer Protocol file system provider](#file-transfer-protocol-file-system-provider)
* [SQL database file system provider](#sql-database-file-system-provider)
* [NodeJS file system provider](#nodejs-file-system-provider)
* [Google Drive file system provider](#google-drive-file-system-provider)
* [Firebase Realtime Database file system provider](#firebase-realtime-database-file-system-provider)
## ASP.NET Core file system provider
The ASP.NET Core file system provider allows the users to access and manage the physical file system. To get started, clone the [ej2-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider) using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-aspcore-file-provider ej2-aspcore-file-provider
cd ej2-aspcore-file-provider
```
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, set the root directory of the physical file system in the FileManager controller.
After setting the root directory of the file system, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods allows to manage the files in the physical file system.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// Initializing File Manager with ASP.NET Core service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/FileManager/FileOperations",
downloadUrl = this.hostUrl + "api/FileManager/Download",
uploadUrl = this.hostUrl + "api/FileManager/Upload",
getImageUrl = this.hostUrl + "api/FileManager/GetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with ASP.NET Core file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider#key-features)
## ASP.NET MVC 5 file system provider
The ASP.NET MVC5 file system provider allows the users to access and manage the physical file system. To get started, clone the [ej2-aspmvc-file-provider](https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider) using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider ej2-aspmvc-file-provider
cd ej2-aspmvc-file-provider
```
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, set the root directory of the physical file system in the FileManager controller using the Root Folder method.
After setting the root directory of the file system, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods allows to manage the files in the physical file system.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// Initializing File Manager with ASP.NET MVC service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "FileManager/FileOperations",
downloadUrl = this.hostUrl + "FileManager/Download",
uploadUrl = this.hostUrl + "FileManager/Upload",
getImageUrl = this.hostUrl + "FileManager/GetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with ASP.NET MVC 5 file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-aspmvc-file-provider#key-features)
## ASP.NET Core Azure cloud file system Provider
In ASP.NET Core, Azure file system provider allows the users to access and manage the blobs in the Azure blob storage. To get started, clone the [ej2-azure-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider) using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider ej2-azure-aspcore-file-provider
```
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, register the Azure storage by passing details like name, password, and blob name to the Register Azure method in the FileManager controller.
```typescript
void RegisterAzure(string accountName, string accountKey, string blobName)
```
Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters in the setBlobContainer method as follows.
```typescript
void setBlobContainer(string blobPath, string filePath)
```
> **Note:** Also, assign the same *blobPath URL* and *filePath URL* in [**AzureFileOperations** and **AzureUpload**](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs) methods in the FileManager controller to determine the original path of the Azure blob.
After setting the blob container references, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods allows to manage the Azure blob storage.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// File Manager sample with azure service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/AzureProvider/AzureFileOperations",
downloadUrl = this.hostUrl + "api/AzureProvider/AzureDownload",
uploadUrl = this.hostUrl + "api/AzureProvider/AzureUpload",
getImageUrl = this.hostUrl + "api/AzureProvider/AzureGetImage"
};
}
}
```
> **NuGet:** Additionally, we have created a [**NuGet**](https://www.nuget.org/packages/Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core) package of **ASP.NET Core Azure file system provider**.
Please, use the following command to install the NuGet package in an application.
```typescript
dotnet add package Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core
```
> **Note:** To learn more about the file actions that can be performed with ASP.NET Core Azure Cloud File System Provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider#key-features)
## ASP.NET MVC 5 Azure cloud file system Provider
In ASP.NET MVC, Azure file system provider allows the users to access and manage the blobs in the Azure blob storage. To get started, clone the [ej2-azure-aspmvc-file-provider](https://github.com/SyncfusionExamples/ej2-azure-aspmvc-file-provider) using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-azure-aspmvc-file-provider ej2-azure-aspmvc-file-provider
```
After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, register the Azure storage by passing details like name, password, and blob name to the Register Azure method in the FileManager controller.
```typescript
void RegisterAzure(string accountName, string accountKey, string blobName)
```
Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters in the setBlobContainer method as follows.
```typescript
void setBlobContainer(string blobPath, string filePath)
```
> **Note:** Also, assign the same *blobPath URL* and *filePath URL* in [**AzureFileOperations** and **AzureUpload**](https://github.com/SyncfusionExamples/ej2-azure-aspmvc-file-provider/blob/master/Controllers/AzureProviderController.cs) methods in the FileManager controller to determine the original path of the Azure blob.
After setting the blob container references, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods allows to manage the Azure blob storage.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// File Manager sample with azure service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "AzureProvider/AzureFileOperations",
downloadUrl = this.hostUrl + "AzureProvider/AzureDownload",
uploadUrl = this.hostUrl + "AzureProvider/AzureUpload",
getImageUrl = this.hostUrl + "AzureProvider/AzureGetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with ASP.NET MVC 5 Azure Cloud File System Provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-azure-aspmvc-file-provider#key-features)
## ASP.NET Core Amazon S3 cloud file provider
In ASP.NET Core, Amazon ***S3*** (*Simple Storage Service*) cloud file provider allows the users to access and manage a server hosted file system as collection of objects stored in the Amazon S3 Bucket. To get started, clone the [ej2-amazon-s3-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider) using the following command
```typescript
git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider.git ej2-amazon-s3-aspcore-file-provider.git
```
> **Note:** To learn more about creating and configuring an Amazon S3 bucket, refer to this [link](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/create-configure-bucket.html).
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details like *awsAccessKeyId*, *awsSecretKeyId* and *awsRegion* details in **RegisterAmazonS3** method in the FileManager controller to perform the file operations.
```typescript
void RegisterAmazonS3(string bucketName, string awsAccessKeyId, string awsSecretAccessKey, string bucketRegion)
```
After registering the Amazon client account details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the FileManager component to the appropriate controller methods allows to manage the Amazon ***S3*** (*Simple Storage Service*) bucket's objects storage.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// File Manager sample with amazon service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/AmazonS3Provider/AmazonS3FileOperations",
downloadUrl = this.hostUrl + "api/AmazonS3Provider/AmazonS3Download",
uploadUrl = this.hostUrl + "api/AmazonS3Provider/AmazonS3Upload",
getImageUrl = this.hostUrl + "api/AmazonS3Provider/AmazonS3GetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with Amazon S3 Cloud File provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider#key-features)
## ASP.NET MVC Amazon S3 cloud file provider
In ASP.NET MVC, Amazon ***S3*** (*Simple Storage Service*) cloud file provider allows the users to access and manage a server hosted files as collection of objects stored in the Amazon S3 Bucket. To get started, clone the [ej2-amazon-s3-aspmvc-file-provider](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspmvc-file-provider) using the following command
```typescript
git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspmvc-file-provider.git ej2-amazon-s3-aspmvc-file-provider.git
```
> **Note:** To learn more about creating and configuring an Amazon S3 bucket, refer to this [link](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/create-configure-bucket.html).
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details like *awsAccessKeyId*, *awsSecretKeyId* and *awsRegion* details in **RegisterAmazonS3** method in the FileManager controller to perform the file operations.
```typescript
void RegisterAmazonS3(string bucketName, string awsAccessKeyId, string awsSecretAccessKey, string bucketRegion)
```
After registering the Amazon client account details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the FileManager component to the appropriate controller methods allows to manage the Amazon ***S3*** (*Simple Storage Service*) bucket's objects storage.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// File Manager sample with amazon service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url: hostUrl + "FileManager/FileOperations",
downloadUrl: hostUrl + "FileManager/Download",
uploadUrl: hostUrl + "FileManager/Upload",
getImageUrl: hostUrl + "FileManager/GetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with ASP.NET MVC Amazon S3 Cloud File Provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspmvc-file-provider#key-features)
## File Transfer Protocol file system provider
In ASP.NET Core, File Transfer Protocol file system provider allows the users to access to the hosted file system as collection of objects stored in the file storage using File Transfer Protocol. To get started, clone the [ej2-ftp-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider) using the following command
```typescript
git clone https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.git ej2-ftp-aspcore-file-provider.git
```
After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register File Transfer Protocol details like *hostName*, *userName* and *password* in **SetFTPConnection** method in the FileManager controller to perform the file operations.
```typescript
void SetFTPConnection(string hostName, string userName, string password)
```
After registering the File Transfer Protocol details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the FileManager component to the appropriate controller methods allows you to manage the FTP’s objects storage.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// File Manager sample with file transfer protocol service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/FTPProvider/FTPFileOperations",
downloadUrl = this.hostUrl + "api/FTPProvider/FTPDownload",
uploadUrl = this.hostUrl + "api/FTPProvider/FTPUpload",
getImageUrl = this.hostUrl + "api/FTPProvider/FTPGetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with File Transfer Protocol file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider#key-features)
## SQL database file system provider
In ASP.NET Core, SQL database file system provider allows the users to manage the file system being maintained in a SQL database table. Unlike the other file system providers, the SQL database file system provider works on ID basis. Here, each file and folder have a unique ID based on which all the file operations will be performed. To get started, clone the [ej2-sql-server-database-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider) using the following command.
```typescript
<add name="FileExplorerConnection" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated Security=True;Trusted_Connection=true" />
```
After cloning, just open the project in Visual Studio and restore the NuGet packages. To establish the SQL server connection with the database file (for eg: FileManager.mdf), specify the connection string in the web config file as follows.
```typescript
<add name="FileExplorerConnection" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated Security=True;Trusted_Connection=true" />
```
Then, make an entry for the connection string in `appsettings.json` file as follows.
```typescript
"ConnectionStrings": {
"FileManagerConnection": "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\App_Data\\FileManager.mdf;Integrated Security=True;Connect Timeout=30"
}
```
Now, to configure the database connection, set the connection name, table name and root folder ID value by passing these values to the SetSQLConnection method.
```typescript
void SetSQLConnection(string name, string tableName, string tableID)
```
> Refer to this [FileManager.mdf](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider/blob/master/App_Data/FileManager.mdf), to learn about the pre-defined file system SQL database for the EJ2 File Manager.
After configuring the connection, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods allows to manage the files in the SQL database table.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// Initializing the File Manager with SQL database service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/SQLProvider/SQLFileOperations",
downloadUrl = this.hostUrl + "api/SQLProvider/SQLDownload",
uploadUrl = this.hostUrl + "api/SQLProvider/SQLUpload",
getImageUrl = this.hostUrl + "api/SQLProvider/SQLGetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with SQL database file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider#key-features)
## NodeJS file system provider
The NodeJS file system provider allows the users to manage the files and folders in a physical file system. It provides methods for performing all basic file operations like creating a folder, copy, move, delete, and download files and folders in the file system. We can use of the NodeJS file system provider either by installing the [ej2-filemanager-node-filesystem](https://www.npmjs.com/package/@syncfusion/ej2-filemanager-node-filesystem) package or by cloning the [file system provider](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem) from the GitHub.
### Using ej2-filemanager-node-filesystem package
* Install the ej2-filemanager-node-filesystem package by running the below command.
```typescript
npm install @syncfusion/ej2-filemanager-node-filesystem
```
* After installing the package, navigate to the ej2-filemanager-node-filesystem package folder within the node-modules.
* Run the command **npm install** command.
### Cloning the ej2-filemanager-node-filesystem from GitHub
* Clone the ej2-filemanager-node-filesystem using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem.git node-filesystem-provider
```
* After cloning, open the root folder and run the command **npm install** command.
After installing the packages, set the root folder directory of the physical file system in the package JSON under scripts sections as follows.
```typescript
"start": "node filesystem-server.js -d D:/Projects"
```
> **Note:** By default, the root directory will be configured to set `C:/Users` as the root directory.
To set the port in which the project to be hosted and the root directory of the file system. Run the following command.
```typescript
set PORT=3000 && node filesystem-server.js -d D:/Projects
```
> **Note:** By default, the service will run `8090` port.
Now, just mapping the **ajaxSettings** property of the FileManager component to the appropriate file operation methods in the filesystem-server.js file will allow to manage the physical file system with NodeJS file system provider.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:8090/';
public ngOnInit(): void {
// Initializing the File Manager with NodeJS service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl,
downloadUrl = this.hostUrl+ "Download",
uploadUrl = this.hostUrl+ "Upload",
getImageUrl = this.hostUrl+ "GetImage"
};
}
}
```
> **Note:** To learn more about the file actions that can be performed with NodeJS file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem#key-features)
## Google Drive file system provider
In ASP.NET Core, Google Drive file system provider allows the users to manage the files and folders in a Google Drive account. The Google Drive file system provider works on ID basis where each file and folder have a unique ID. To get started, clone the [ej2-google-drive-aspcore-file-provider](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider) using the following command.
```typescript
git clone https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider ej2-google-drive-aspcore-file-provider
cd ej2-google-drive-aspcore-file-provider
```
Google Drive file system provider use the [Google Drive APIs](https://developers.google.com/drive/api/v3/reference/) to read the file in the file system and uses the [OAuth 2.0](https://developers.google.com/identity/protocols/oauth2) protocol for authentication and authorization. To authenticate from the client end, obtain the OAuth 2.0 client credentials from the `Google API Console`. To learn more about generating the client credentials from the from Google API Console, refer to this [link](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow).
After generating the client secret data, copy the JSON data to the following specified JSON files in the cloned location.
* EJ2FileManagerService > credentials > client_secret.json
* GoogleOAuth2.0Base > credentials > client_secret.json
After updating the credentials, just build and run the project. Now, the project will be hosted in `http://localhost:{port}`, and it will ask to log on to the Gmail account created the client secret credentials. Then, provide permission to access the Google Drive files by clicking the allow access button in the page. Now, just mapping the ajaxSettings property of the FileManager component to the appropriate controller methods will allows to manage the files from the Google Drive.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// Initializing the File Manager with Google Drive service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/GoogleDriveProvider/GoogleDriveFileOperations",
downloadUrl = this.hostUrl + "api/GoogleDriveProvider/GoogleDriveDownload",
uploadUrl = this.hostUrl + "api/GoogleDriveProvider/GoogleDriveUpload",
getImageUrl = this.hostUrl + "api/GoogleDriveProvider/GoogleDriveGetImage"
};
}
}
```
>> **Note:** To learn more about the file actions that can be performed with Google Drive file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider#key-features)
## Firebase Realtime Database file system provider
The [Firebase Realtime Database](https://firebase.google.com/) file system provider in **ASP.NET Core** provides the efficient way to store the File Manager file system in a cloud database as JSON representation.
### Generate Secret access key from service account
Follow the given steps to generate the secret access key:
* Click this [link](https://console.firebase.google.com/) to Firebase console and navigate to the project settings.
* And then, navigate to the **Service Accounts** tab in the window.
* In the new dialog window, click the **Other service account** option to navigate to the Google service accounts console to generate the secret key.
![authentication](images/firebase.png)
* Now, open the Firebase service project from the Google services console, and generate a Secret key.
![generate_key](images/generate_key.png)
* After generating the secret key, replace secret key JSON in the access_key.json file in the Firebase Realtime Database provider project to enable authentication for performing read and write operations.
To interpolate with the Firebase Realtime Database, create a project under Firebase Realtime Database, and then enable the **read** and **write** permissions to access the Firebase Database by specifying the rules within the authentication tab of the Firebase project as demonstrated in the following code snippet.
> **Note:** By default, rules of a Firebase project will be **false**. To read and write the data, configure the **Rules** as given in the following code snippet in the *Rules* tab of the Firebase Realtime Database project.
```typescript
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": "auth!=null",
".write": "auth!=null"
}
}
```
Then, create a root node and add children to the root node. Refer to the following code snippet for the structure of JSON.
```typescript
{
"Files" : [ {
"caseSensitive" : false,
"dateCreated" : "8/22/2019 5:17:55 PM",
"dateModified" : "8/22/2019 5:17:55 PM",
"filterId" : "0/",
"filterPath" : "/",
"hasChild" : false,
"id" : "5",
"isFile" : false,
"isRoot" : true,
"name" : "Music",
"parentId" : "0",
"selected" : false,
"showHiddenItems" : false,
"size" : 0,
"type" : "folder"
},
{
"caseSensitive" : false,
"dateCreated" : "8/22/2019 5:18:03 PM",
"dateModified" : "8/22/2019 5:18:03 PM",
"filterId" : "0/",
"filterPath" : "/",
"hasChild" : false,
"id" : "6",
"isFile" : false,
"isRoot" : true,
"name" : "videos",
"parentId" : "0",
"selected" : false,
"showHiddenItems" : false,
"size" : 0,
"type" : ""
}]
}
```
Here, the `Files` denotes the `rootNode` and the subsequent object refers to the children of the root node. `rootNode` will be taken as the root folder of the file system loaded which will be loaded in File Manager component.
After that, clone the [`ej2-firebase-realtime-database-apscore-file-provider`](https://github.com/SyncfusionExamples/ej2-firebase-realtime-database-aspcore-file-provider) and just open the project in Visual Studio and restore the NuGet package.
Register the Firebase Realtime Database by assigning *Firebase Realtime Database REST API link*, *rootNode*, and *serviceAccountKeyPath* parameters in the `RegisterFirebaseRealtimeDB` method of class `FirebaseRealtimeDBFileProvider` in controller part of the ASP.NET Core application.
```typescript
void RegisterFirebaseRealtimeDB(string apiUrl, string rootNode, string serviceAccountKeyPath)
```
**Example:**
```typescript
void RegisterFirebaseRealtimeDB("https://filemanager-c0f6d.firebaseio.com/", "Files", "{give the service account key path}");
```
In the above code,
* `https://filemanager-c0f6d.firebaseio.com/` denotes Firebase Realtime Database REST API link
* `Files` denotes newly created root node in Firebase Realtime Database
* `{give the service account key path}` denotes service account key path which has authentication key for the Firebase Realtime Database data.
After configuring the Firebase Realtime Database service link, build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the File Manager component to the appropriate controller methods allows to manage the files in the Firebase Realtime Database.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'http://localhost:{port}/';
public ngOnInit(): void {
// Initializing File Manager with Firebase Realtime Database service.
this.ajaxSettings = {
// Replace the hosted port number in the place of "{port}"
url = this.hostUrl + "api/FirebaseProvider/FirebaseRealtimeFileOperations",
downloadUrl = this.hostUrl + "api/FirebaseProvider/FirebaseRealtimeDownload",
uploadUrl = this.hostUrl + "api/FirebaseProvider/FirebaseRealtimeUpload",
getImageUrl = this.hostUrl + "api/FirebaseProvider/FirebaseRealtimeGetImage"
};
}
}
```
>> **Note:** To learn more about the file actions that can be performed with Firebase Realtime Database file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-firebase-realtime-database-aspcore-file-provider#key-features)

449
src/filemanager/file-manager/getting-started.md Normal file
Просмотреть файл

@ -0,0 +1,449 @@
---
title: "Getting Started"
component: "File Manager"
description: "This section explains how to create a filemanager component in the Angular application with its basic features."
---
# Getting Started
This section explains how to create a simple **File Manager** component and its basic usage.
## Prerequisites
To get started with **File Manager** component, ensure the compatible versions of Angular and Typescript.
* Angular : `4+`
* Typescript : `2.6+`
## Setting up angular project
Angular provides the easiest way to set angular CLI projects using Angular CLI tool.
Install the CLI application globally to your machine by using following command.
```sh
npm install -g @angular/cli
```
To Create a new application, refer the below command
```sh
ng new syncfusion-angular-app
```
Navigate to the created project folder by using following command.
```sh
cd syncfusion-angular-app
```
>Refer [Syncfusion Angular Getting Started](../../getting-started/angular-cli/#getting-started-with-angular-cli) section to know more about setting up `angular-cli` project.
## Adding Dependencies
The following list of dependencies are required to use the file manager component in your application.
```javascript
|-- @syncfusion/ej2-angular-filemanager
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-grids
|-- @syncfusion/ej2-filemanager
```
* Install Syncfusion file manager package using below command.
```cmd
npm install @syncfusion/ej2-angular-filemanager --save
```
The above package installs [File Manager component dependencies](#adding-dependencies) which are required to render the component in an Angular environment.
## Adding style sheet to the application
To render the file manager component, import the file manager and its dependent component's styles as given below in `[src/styles.css]`.
```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';
```
>Note: To refer the combined component styles, use Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application.
## Adding File Manager module
After installing the package, the file manager component module is available to configure into your application from installed syncfusion package.
Refer to the following snippet to import the file manager module in `app.module.ts` from the `@syncfusion/ej2-angular-filemanager`.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Imported syncfusion filemanager module from filemanager package
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
// Registering EJ2 filemanager Module
FileManagerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Adding Syncfusion component
Add the FileManager component snippet in `app.component.html` as follows.
```html
<ejs-filemanager id='default-filemanager' [ajaxSettings]='ajaxSettings'>
</ejs-filemanager>
```
Refer the FileManager component snippet in `app.component.ts` as follows.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ajaxSettings: object = {
url: this.hostUrl + 'api/FileManager/FileOperations'
};
}
```
>**Note:** The [ajaxSettings](../api/file-manager/#ajaxsettings) must be defined while initializing the file manager. File manager utilizes the URL's mentioned in ajaxSettings to send [file operation](./file-operations) request to the server.
>The File Manager service link is given in `hostUrl`.
## Run the application
Use the npm run start command to run the application in the browser.
```sh
npm start
```
The following samples shows the basic file manager component in browser.
{% tab template="file-manager/getting-started", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/**/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ajaxSettings: object = {
url: this.hostUrl + 'api/FileManager/FileOperations'
};
}
```
{% endtab %}
## File Download support
To perform the download operation, initialize the `downloadUrl` property in a [ajaxSettings](../api/file-manager/#ajaxsettings) of File Manager component.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ajaxSettings: object = {
url: this.hostUrl + 'api/FileManager/FileOperations',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
}
```
## File Upload support
To perform the upload operation, initialize the `uploadUrl` property in a [ajaxSettings](../api/file-manager/#ajaxsettings) of File Manager Component.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ajaxSettings: object = {
url: this.hostUrl + 'api/FileManager/FileOperations',
uploadUrl: this.hostUrl + 'api/FileManager/Upload'
};
}
```
## Image Preview support
To perform the image preview support in the File Manager component, need to initialize the `getImageUrl` property in a [ajaxSettings](../api/file-manager/#ajaxsettings) of File Manager component.
{% tab template="file-manager/getting-started", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/**/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ajaxSettings: object = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage'
};
}
```
{% endtab %}
## 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 file manager by importing them as providers in `app.module.ts`.
Refer the code snippet in for `app.module.ts`.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FileManagerModule
],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
bootstrap: [AppComponent]
})
export class AppModule { }
```
{% tab template="file-manager/overview", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/**/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
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'
};
}
```
{% endtab %}
>**Note:** The appearance of the File Manager can be customized by using [cssClass](../api/file-manager/#cssclass) property. This adds a css class to the root of the File Manager which can be used to add new styles or override existing styles to the File Manager.
## Switching initial view of the File Manager
The initial view of the File Manager can be changed to details or largeicons view with the help of [view](../api/file-manager/#view) property. By default, the File Manager will be rendered in large icons view.
When the File Manager is initially rendered, [created](../api/file-manager/#created) will be triggered. This event can be utilized for performing operations once the File Manager has been successfully created.
{% tab template="file-manager/view", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public view: string;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Initial view of File Manager is set to details view
this.view = "Details";
};
// File Manager's created event function
onCreate(args: any) {
console.log("File Manager has been created successfully");
}
}
```
{% endtab %}
## Maintaining component state on page reload
The File Manager supports maintaining the component state on page reload. This can be achieved by enabling [enablePersistence](../api/file-manager/#enablepersistence) property which maintains the following,
* Previous view of the File Manager - [View](../api/file-manager/#view)
* Previous path of the File Manager - [Path](../api/file-manager/#path)
* Previous selected items of the File Manager - [SelectedItems](../api/file-manager/#selecteditems)
For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success, [success](../api/file-manager/#success) event will be triggered and [failure](../api/file-manager/#failure) event will be triggered if the request gets failed.
{% tab template="file-manager/persistence", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public enablePersistence: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.enablePersistence = true;
};
// File Manager's file onSuccess function
onAjaxSuccess(args: any) {
console.log("Ajax request successful");
}
// File Manager's file onError function
onAjaxFailure(args: any) {
console.log("Ajax request has failed");
}
}
```
{% endtab %}
>**Note:** The files of the current folder opened in the File manager can be refreshed programatically by calling [refreshFiles](../api/file-manager/#refreshfiles) method.
## Rendering component in right-to-left direction
It is possible to render the File Manager in right-to-left direction by setting the [enableRtl](../api/file-manager/#enablertl) API to true.
{% tab template="file-manager/rtl", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public enableRtl: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.enableRtl = true;
};
}
```
{% endtab %}
## Specifying the current path of the File Manager
The current path of the File Manager can be specified initially or dynamically using the [path](../api/file-manager/#path) property.
The following code snippet demonstrates specifying the current path in File Manager on rendering.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public path: string;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Specify the required current path
this.path = '/Food';
};
}
```

57
src/filemanager/file-manager/how-to/adding-custom-item-to-context-menu.md Normal file
Просмотреть файл

@ -0,0 +1,57 @@
# How to add custom menu item in context menu
The context menu can be customized using the [contextMenuSettings](../../api/file-manager/#contextmenusettings), [menuOpen](../../api/file-manager/#menuopen), and [menuClick](../../api/file-manager/#menuclick) events.
The following example shows adding a custom item in the context menu.
The [contextMenuSettings](../../api/file-manager/#contextmenusettings) is used to add new menu item. The [menuOpen](../../api/file-manager/#menuopen) event is used to add the icon to the new menu item. The [menuClick](../../api/file-manager/#menuclick) event is used to add an event handler to the new menu item.
{% tab template="file-manager/contextmenu", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
import { MenuOpenEventArgs, MenuClickEventArgs } from '@syncfusion/ej2-filemanager';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public contextMenuSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.contextMenuSettings = {
file: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details'],
folder: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details','Custom'],
layout: ['Custom', 'SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'],
visible: true
};
}
menuOpen(args: MenuOpenEventArgs) {
for(var i=0;i<args.items.length;i++) {
if (args.items[i].text === 'Custom') {
args.items[i].iconCss= 'e-icons e-fe-tick';
}
}
}
// event for custom menu item
menuClick(args: MenuClickEventArgs) {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item')
}
}
}
```
{% endtab %}

53
src/filemanager/file-manager/how-to/adding-custom-item-to-toolbar.md Normal file
Просмотреть файл

@ -0,0 +1,53 @@
# How to add custom button in toolbar
The toolbar items can be customized using the [toolbarSettings](../../api/file-manager/#toolbarsettings) API and [toolbarClick](../../api/file-manager/#toolbarclick) events.
The following example shows adding a custom item in the toolbar.
The new toolbar button is added using [toolbarSettings](../../api/file-manager/#toolbarsettings). The [toolbarClick](../../api/file-manager/#toolbarclick) event is used to add an event handler to the new toolbar button.
{% tab template="file-manager/toolbar", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html,app/app.component.css" %}
```typescript
import { Component, ViewChild } from '@angular/core';
import { ToolbarClickEventArgs , ToolbarCreateEventArgs} from '@syncfusion/ej2-filemanager';
import {FileManagerComponent} from '@syncfusion/ej2-angular-filemanager';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('fileManager')
public fileManagerInstance: FileManagerComponent;
public ajaxSettings: object;
public toolbarSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.toolbarSettings = {items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']}
};
toolbarClick(args: ToolbarClickEventArgs) {
if (args.item.text === 'Custom') {
alert('You have clicked custom toolbar item')
}
}
toolbarCreate(args: ToolbarCreateEventArgs) {
for(var i=0;i<args.items.length;i++) {
if(args.items[i].id === this.fileManagerInstance.element.id +'_tb_custom') {
args.items[i].prefixIcon= 'e-icons e-fe-tick';
}
}
}
}
```
{% endtab %}

35
src/filemanager/file-manager/how-to/customize-custom-thumbnail.md Normal file
Просмотреть файл

@ -0,0 +1,35 @@
# How to add custom thumbnail in file manager
The default appearance of the file manager can customize with your own icon by using [showThumbnail](../../api/file-manager/#showthumbnail) property.
The following example demonstrate how to add a custom icon in largeicons view.
{% tab template="file-manager/custom-thumbnail", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html,app/app.component.css" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public showThumbnail: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.showThumbnail = false;
}
}
```
{% endtab %}

50
src/filemanager/file-manager/how-to/enable-disable-toolbar-item.md Normal file
Просмотреть файл

@ -0,0 +1,50 @@
# How to enable/disable toolbar item/items
The toolbar items can be enabled/disabled by specifying the items in [enableToolbarItems](../../api/file-manager/#enabletoolbaritems) or [disableToolbarItems](../../api/file-manager/#disabletoolbaritems) methods respectively.
The following example shows enabling and disabling toolbar items on button click.
{% tab template="file-manager/toolbar-items", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html,app/app.component.css" %}
```typescript
import { Component, ViewChild } from '@angular/core';
import { FileManager } from '@syncfusion/ej2-filemanager';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('fileManager')
public fileManagerInstance: FileManager;
public ajaxSettings: object;
public height: number;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.height = "330px";
};
onCreated(args: any) {
// Click event for enable button
document.getElementById("enable").addEventListener('click', (event) => {
// Enable new folder toolbar item
this.fileManagerInstance.enableToolbarItems(["newfolder"]);
});
// Click event for disable button
document.getElementById("disable").addEventListener('click', (event) => {
// Disable new folder toolbar item
this.fileManagerInstance.disableToolbarItems(["newfolder"]);
});
}
}
```
{% endtab %}

195
src/filemanager/file-manager/how-to/initialize-filemanager-using-systemjs.md Normal file
Просмотреть файл

@ -0,0 +1,195 @@
---
title: "How To"
component: "File Manager"
description: "Initializing File Manager using SystemJS"
---
# Initializing File Manager using SystemJS
File manager can also be initialized using `SystemJS` as follows
## Installation and configuration
* To setup basic `Angular` sample use the following commands.
```sh
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
```
For more information, refer to [Angular sample setup](https://angular.io/guide/setup-local).
* Install Syncfusion file manager packages using the below command.
```sh
npm install @syncfusion/ej2-angular-filemanager --save
```
The above package installs File Manager dependencies which are required to render the component in an Angular environment.
* Syncfusion `ej2-angular-filemanager` packages need to be mapped in `systemjs.config.js` configuration file.
```javascript
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/',
"syncfusion:": "node_modules/@syncfusion/", // syncfusion alias
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// syncfusion bundles
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
"@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
"@syncfusion/ej2-angular-base": "syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js",
"@syncfusion/ej2-angular-filemanager": "syncfusion:ej2-angular-filemanager/dist/ej2-angular-filemanager.umd.min.js",
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
```
To render the file manager component, need to import file manager and its dependent component's styles as given below in `style.css`.
```css
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-navigations/styles/material.css';
@import '@syncfusion/ej2-layouts/styles/material.css';
@import '@syncfusion/ej2-dropdowns/styles/material.css';
@import '@syncfusion/ej2-inputs/styles/material.css';
@import '@syncfusion/ej2-lists/styles/material.css';
@import '@syncfusion/ej2-splitbuttons/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-angular-filemanager/styles/material.css';
```
>Note: If you want to refer the combined component styles,
please make use of our [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application.
## Create a simple File Manager
Refer the following code to include the file manager in application .
* Create an `Angular` component with file manager. Add the following file manager template in component template of
`app.component.html`
```HTML
<ejs-filemanager id='overview' [ajaxSettings]='ajaxSettings'>
</ejs-filemanager>
```
* Create an `Angular` module and include the above file manager component.
* In the module, declare the Component and Directives required to render the file manager.
* Bootstrap the application with the above module.
Refer to the following snippet to import the `FileManagerAllModule` in `app.module.ts` from the `@syncfusion/ej2-angular-filemanager`.
```Typescript
import { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { FileManagerAllModule } from '@syncfusion/ej2-angular-filemanager';
@NgModule({
imports: [FileManagerAllModule, HttpModule, JsonpModule, BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```
> `systemjs.config.js` file should be configured as described in the [Installation and configuration](#installation-and-configuration) section.
## Run the application
Use the npm run start command to run the application in the browser.
```sh
npm start
```
The following samples shows the file manager component in browser.
{% tab template="file-manager/getting-started", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
}
}
```
{% endtab %}

137
src/filemanager/file-manager/how-to/nested-items.md Normal file
Просмотреть файл

@ -0,0 +1,137 @@
# Nested FileManager
FileManager can be rendered inside the other components like Tab, Dialog, and more.
* [Adding file manager inside the dialog](#adding-file-manager-inside-the-dialog)
* [Adding file manager inside the tab](#adding-file-manager-inside-the-tab)
## Adding file manager inside the dialog
The following example shows the file manager component rendered inside the dialog. Click the browse button in the Uploader element to open the File Manager inside the Dialog control.
{% tab template="file-manager/file-dialog", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component , ViewChild, Inject} from '@angular/core';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { FileManagerComponent, FileOpenEventArgs } from '@syncfusion/ej2-angular-filemanager';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('uploadObj')
public uploadObj: UploaderComponent;
@ViewChild('dialogObj')
public dialogObj: DialogComponent;
@ViewChild('filemanagerObj')
public filemanagerObj: FileManagerComponent;
public dialogHeader = 'Select a file';
public animationSettings: Object = { effect: 'None' };
public showCloseIcon = true;
public target = '#target';
public visible = false;
public dialogWidth = '850px';
public ajaxSettings: object;
public contextMenuSettings: object;
public toolbarSettings: object;
public hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
public contextmenuItems: string[] = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];
public btnClick: EmitType<object> = () => {
this.dialogObj.show();
this.dialogOpen();
this.filemanagerObj.path = '/';
this.filemanagerObj.selectedItems = [];
this.filemanagerObj.refresh();
}
// Uploader will be hidden, if Dialog is opened
public dialogOpen: EmitType<object> = () => {
document.getElementById('uploadFileManager').style.display = 'none';
}
// Uploader will be shown, if Dialog is closed
public dialogClose: EmitType<object> = () => {
document.getElementById('uploadFileManager').style.display = 'block';
}
// File Manager's fileOpen event function
public onFileOpen(args: FileOpenEventArgs): void {
let file = (args as any).fileDetails;
if (file.isFile) {
args.cancel = true;
if (file.size <= 0 ) { file.size = 10000; }
this.uploadObj.files = [{name: file.name, size: file.size, type: file.type }];
this.dialogObj.hide();
}
}
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.toolbarSettings = {
items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']
};
this.contextMenuSettings = {
file: this.contextmenuItems,
folder: this.contextmenuItems
};
this.uploadObj.autoUpload = true;
}
public ngOnDestroy(): void {
if (document.querySelector('.sb-demo-section').classList.contains('upload-dialog')) {
document.querySelector('.sb-demo-section').classList.remove('upload-dialog');
}
}
}
```
{% endtab %}
## Adding file manager inside the tab
The following example demonstrate that the file manager component is placed inside the content area of tab element.
{% tab template="file-manager/file-tab", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
import { FileManagerComponent } from '@syncfusion/ej2-angular-filemanager';
import { TabAllModule } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public headerText: Object = [{ text: 'Overview' }, { text: 'FileManager' }];
public ajaxSettings: object;
// Mapping Tab items showCloseButton property
public enableClose: boolean = true;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
};
}
```
{% endtab %}

Двоичные данные
src/filemanager/file-manager/images/breadcrumb.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 46 KiB

Двоичные данные
src/filemanager/file-manager/images/contextmenu.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 76 KiB

Двоичные данные
src/filemanager/file-manager/images/default-ui.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 82 KiB

Двоичные данные
src/filemanager/file-manager/images/detailsview.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 48 KiB

Двоичные данные
src/filemanager/file-manager/images/fileManager.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 118 KiB

Двоичные данные
src/filemanager/file-manager/images/filemanagerfull.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 166 KiB

Двоичные данные
src/filemanager/file-manager/images/firebase.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 102 KiB

Двоичные данные
src/filemanager/file-manager/images/generate_key.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 66 KiB

Двоичные данные
src/filemanager/file-manager/images/largeiconsview.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 63 KiB

Двоичные данные
src/filemanager/file-manager/images/toolbar.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 32 KiB

Двоичные данные
src/filemanager/file-manager/images/user-interface.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 147 KiB

56
src/filemanager/file-manager/index.md Normal file
Просмотреть файл

@ -0,0 +1,56 @@
# Overview
The **File Manager** is a graphical user interface component for managing the file system that allows the users to perform most common file operation like accessing, editing, and sorting the files and folders.
Also, this component has easy navigation functionality for browsing the folders to select a file or folder from the file system.
## Key features
### File operations
* `Read` - Reads the files from the provided directory path location from the server.
* `Create` - Creates a new folder in a user defined file system path.
* `Delete` - Deletes the files from any file location in the file system.
* `Rename` - Renames any existing file or folder name from the file system.
* `Upload` - Uploads any type of files to the server file system managed by File Manager.
* `Download` - Downloads any type of files and folders from the server file system.
* `Refresh` - Refresh the content of the selected folder in the File Manager.
### View preferences
The **Views** property allows you to customize, how the folders or files in the file system should be displayed in the file manager.
The File Manager provides the following two view options to change the layout of the File Manger window.
* `Details view` - In the Details view, the files are displayed in a sorted listed order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type.
* `Large Icon view` - In the Large view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For example, the **preview** of the image will be displayed for image and video type files and extension thumbnails will be displayed for other type files.
### Navigation in File Managers
File Manager has the easy file navigation options for navigating through the file system for accessing any user designed file to perform any file operation.
Types of navigation support available in File Manager are:
* `Breadcrumb` - Breadcrumb will be present below the toolbar, that mainly gives an advantage of tracking the hierarchy of the file or folder navigation and it gives trail that you can follow to get back to parent folder or drive of the current folder.
* `Navigation pane` - Navigation pane is present at the left side of the File Manager. It allows quick and direct access of a file or folder in a file system where the entire folder hierarchy is listed using a tree view. This can be made visible or hidden as per user requirement.
### Context Menu
The File Manager control is provided with context-menu support to perform list of file operations with the files and folders. It appears when a file or folder is right-clicked, and it appears with varying options based on the target such as a file or a folder. The context menu items can be customized according to user preference.
### Toolbar
The toolbar contains the list of tools to perform various operations like file upload or download, view switching, and more. The toolbar can also be configured to add any custom functionality to be performed with the file system
### File Manipulations
* `Multi-Selection` - The file manager control is provided with built-in support for multiple files or folder selection. Multiple file selection will be effective when a single operation like download or delete is performed over multiple files in the file system.
* `Sorting` - Files and folders in the file system can be sorted either in the ascending or descending order by clicking the column header. Files and folders can be sorted based on the name, date created, size, and more.
### RTL and Localization support
* Supports right-to-left (RTL) direction alignment for users working in right-to-left languages like Hebrew and Arabic.
* The file manager control uses localization library (l10) to localize the text values. The texts and messages displayed in the user interface can be localized to any desired language as needed.

235
src/filemanager/file-manager/localization.md Normal file
Просмотреть файл

@ -0,0 +1,235 @@
---
title: "File Manager Localization"
component: "File Manager"
description: "Localization support in File Manager"
---
# Localization
The file manager can be localized to any culture by defining the texts and messages of the file manager in the corresponding culture. The default locale of the file manager is `en`(English). The following table represents the default texts and messages of the file manager in `en` culture.
|KEY|Text/Message|
|----|----|
|NewFolder|New folder|
|Upload|Upload|
|Delete|Delete|
|Rename|Rename|
|Download|Download|
|Cut|Cut|
|Copy|Copy|
|Paste|Paste|
|SortBy|Sort by|
|Refresh|Refresh|
|Item-Selection|item selected|
|Items-Selection|items selected|
|View|View|
|Details|Details|
|SelectAll|Select all|
|Open|Open|
|Tooltip-NewFolder|New folder|
|Tooltip-Upload|Upload|
|Tooltip-Delete|Delete|
|Tooltip-Rename|Rename|
|Tooltip-Download|Download|
|Tooltip-Cut|Cut|
|Tooltip-Copy|Copy|
|Tooltip-Paste|Paste|
|Tooltip-SortBy|Sort by|
|Tooltip-Refresh|Refresh|
|Tooltip-Selection|Clear selection|
|Tooltip-View|View|
|Tooltip-Details|Details|
|Tooltip-SelectAll|Select all|
|Name|Name|
|Size|Size|
|DateModified|Modified|
|DateCreated|Date created|
|Path|Path|
|Created|Created|
|Modified|Modified|
|Location|Location|
|Type|Type|
|Permission|Permission|
|Ascending|Ascending|
|Descending|Descending|
|None|None|
|View-LargeIcons|Large icons|
|View-Details|Details|
|Search|Search|
|Button-Ok|OK|
|Button-Cancel|Cancel|
|Button-Yes|Yes|
|Button-No|No|
|Button-Create|Create|
|Button-Save|Save|
|Header-NewFolder|Folder|
|Content-NewFolder|Enter your folder name|
|Header-Rename|Rename|
|Content-Rename|Enter your new name|
|Header-Rename-Confirmation|Rename Confirmation|
|Content-Rename-Confirmation|If you change a file name extension| the file might become unstable. Are you sure you want to change it?|
|Header-Delete|Delete File|
|Content-Delete|Are you sure you want to delete this file?|
|Header-Multiple-Delete|Delete Multiple Files|
|Content-Multiple-Delete|Are you sure you want to delete these {0} files?|
|Header-Folder-Delete|Delete Folder|
|Content-Folder-Delete|Are you sure you want to delete this folder?|
|Header-Duplicate|File exists|
|Content-Duplicate| already exists. Are you sure you want to replace it?|
|Header-Upload|Upload Files|
|Error|Error|
|Validation-Empty|The file or folder name cannot be empty.|
|Validation-Invalid|The file or folder name {0} contains invalid characters. Please use a different name. Valid file or folder names cannot end with a dot or space, and cannot contain any of the following characters: \\/:*?\"<>\||
|Validation-NewFolder-Exists|A file or folder with the name {0} already exists.|
|Validation-Rename-Exists|Cannot rename {0} to {1}| destination already exists.|
|Folder-Empty|This folder is empty|
|File-Upload|Drag files here to upload|
|Search-Empty|No results found|
|Search-Key|Try with different keywords|
|Filter-Empty|No results found|
|Filter-Key|Try with different filter|
|Sub-Folder-Error|The destination folder is the subfolder of the source folder|
|Same-Folder-Error|The destination folder is the same as the source folder.|
|Access-Denied|Access Denied|
|Access-Details|You don't have permission to access this folder|
|Header-Retry|File Already Exists|
|Content-Retry|A file with this name already exists in this folder. What would you like to do?|
|Button-Keep-Both|Keep both|
|Button-Replace|Replace|
|Button-Skip|Skip|
|ApplyAll-Label|Do this for all current items|
|KB|KB|
|Access-Message|{0} is not accessible. You need permission to perform the {1} action.|
|Network-Error|NetworkError: Failed to send on XMLHTTPRequest: Failed to load|
|Server-Error|ServerError: Invalid response from|
The below example shows adding the German culture locale(`de-DE`)
{% tab template="file-manager/localization", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public locale: string;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
L10n.load({
'de': {
'filemanager': {
"NewFolder": "Neuer Ordner",
"Upload": "Hochladen",
"Delete": "Löschen",
"Rename": "Umbenennen",
"Download": "Herunterladen",
"Cut": "Schnitt",
"Copy": "Kopieren",
"Paste": "Einfügen",
"SortBy": "Sortiere nach",
"Refresh": "Aktualisierung",
"Item-Selection": "Artikel ausgewählt",
"Items-Selection": "Elemente ausgewählt",
"View": "Aussicht",
"Details": "Einzelheiten",
"SelectAll": "Wählen Sie Alle",
"Open": "Öffnen",
"Tooltip-NewFolder": "Neuer Ordner",
"Tooltip-Upload": "Hochladen",
"Tooltip-Delete": "Löschen",
"Tooltip-Rename": "Umbenennen",
"Tooltip-Download": "Herunterladen",
"Tooltip-Cut": "Schnitt",
"Tooltip-Copy": "Kopieren",
"Tooltip-Paste": "Einfügen",
"Tooltip-SortBy": "Sortiere nach",
"Tooltip-Refresh": "Aktualisierung",
"Tooltip-Selection": "Auswahl aufheben",
"Tooltip-View": "Aussicht",
"Tooltip-Details": "Einzelheiten",
"Tooltip-SelectAll": "Wählen Sie Alle",
"Name": "Name",
"Size": "Größe",
"DateModified": "Geändert",
"DateCreated": "Datum erstellt",
"Path": "Pfad",
"Modified": "Geändert",
"Created": "Erstellt",
"Location": "Ort",
"Type": "Art",
"Permission": "Genehmigung",
"Ascending": "Aufsteigend",
"Descending": "Absteigend",
"None": "Keiner",
"View-LargeIcons": "Große Icons",
"View-Details": "Einzelheiten",
"Search": "Suche",
"Button-Ok": "OK",
"Button-Cancel": "Stornieren",
"Button-Yes": "Ja",
"Button-No": "Nein",
"Button-Create": "Erstellen",
"Button-Save": "Sparen",
"Header-NewFolder": "Mappe",
"Content-NewFolder": "Geben Sie Ihren Ordnernamen ein",
"Header-Rename": "Umbenennen",
"Content-Rename": "Geben Sie Ihren neuen Namen ein",
"Header-Rename-Confirmation": "Bestätigung umbenennen",
"Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?",
"Header-Delete": "Datei löschen",
"Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
"Header-Multiple-Delete": "Mehrere Dateien löschen",
"Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich löschen?",
"Header-Folder-Delete": "Lösche Ordner",
"Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich löschen?",
"Header-Duplicate": "Datei / Ordner existiert",
"Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen und einfügen?",
"Header-Upload": "Daten hochladen",
"Error": "Error",
"Validation-Empty": "Der Datei - oder Ordnername darf nicht leer sein.",
"Validation-Invalid": "Der Datei- oder Ordnername {0} enthält ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei- oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und keines der folgenden Zeichen enthalten: \\ /: *? \" < > | ",
"Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit dem Namen {0} existiert bereits.",
"Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt werden: Ziel existiert bereits.",
"Folder-Empty": "Dieser Ordner ist leer",
"File-Upload": "Dateien zum Hochladen hierher ziehen",
"Search-Empty": "Keine Ergebnisse gefunden",
"Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
"Filter-Empty": "keine Ergebnisse gefunden",
"Filter-Key" : "Versuchen Sie es mit einem anderen Filter",
"Sub-Folder-Error": "Der Zielordner ist der Unterordner des Quellordners.",
"Same-Folder-Error": "Der Zielordner ist derselbe wie der Quellordner.",
"Access-Denied": "Zugriff verweigert",
"Access-Details": "Sie haben keine Berechtigung, auf diesen Ordner zuzugreifen.",
"Header-Retry": "Die Datei existiert bereits",
"Content-Retry": "In diesem Ordner ist bereits eine Datei mit diesem Namen vorhanden. Was möchten Sie tun?",
"Button-Keep-Both": "Behalte beides",
"Button-Replace": "Ersetzen",
"Button-Skip": "Überspringen",
"ApplyAll-Label": "Mache das für alle aktuellen Artikel",
"KB": "KB",
"Access-Message": "{0} ist nicht zugänglich. Sie benötigen die Berechtigung, um die Aktion {1} auszuführen.",
"Network-Error": "NetworkError: Fehler beim Senden auf XMLHTTPRequest: Fehler beim Laden",
"Server-Error": "ServerError: Ungültige Antwort von"
}
}
});
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.locale = 'de';
}
}
```
{% endtab %}

46
src/filemanager/file-manager/multiple-selection.md Normal file
Просмотреть файл

@ -0,0 +1,46 @@
---
title: "Multiple Selection"
component: "File Manager"
description: "Multiple Selection present in file manager"
---
# Multiple Selection
The file manager allows you to select multiple files by enabling the [allowMultiSelection](../api/file-manager/#allowmultiselection) property (enabled by default). The multiple selection can be done by pressing the `Ctrl` key or `Shift` key and selecting the files. The check box can also be used to do multiple selection. `Ctrl + A` can be used to select all files in the current directory. The [fileSelect](../api/file-manager/#fileselect) event will be triggered when the items of file manager control is selected or unselected.
{% tab template="file-manager/multiselect", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
import { FileSelectEventArgs } from '@syncfusion/ej2-filemanager';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public allowMultiSelection: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowMultiSelection = true;
}
// File Manager's file select event function
onFileSelect(args: FileSelectEventArgs) {
console.log(args.fileDetails.name + " has been " + args.action + "ed");
}
}
```
{% endtab %}
>Note: The File Manager has support to select files and folders initially or dynamically by specifying their names in [selectedItems](../api/file-manager/#selecteditems) property.

17
src/filemanager/file-manager/summary.md Normal file
Просмотреть файл

@ -0,0 +1,17 @@
* [Getting Started](file-manager/getting-started.md)
* [User Interface](file-manager/user-interface.md)
* [File Operations](file-manager/file-operations.md)
* [Views](file-manager/views.md)
* [Customization](file-manager/customization.md)
* [Multiple Selection](file-manager/multiple-selection.md)
* [Drag and Drop Support](file-manager/drag-and-drop.md)
* [File System Provider](file-manager/file-system-provider.md)
* [Localization](file-manager/localization.md)
* [Accessibility](file-manager/accessibility.md)
* [Access Control](file-manager/access-control.md)
* [Adding Custom Item To Context Menu](file-manager/how-to/adding-custom-item-to-context-menu.md)
* [Adding Custom Item To Toolbar](file-manager/how-to/adding-custom-item-to-toolbar.md)
* [Enable/Disable Toolbar Item](file-manager/how-to/enable-disable-toolbar-item.md)
* [Initialize File Manager Using SystemJS](file-manager/how-to/initialize-filemanager-using-systemjs.md)
* [Customize Custom Thumbnails](file-manager/how-to/customize-custom-thumbnail.md)
* [Nested File Manager](file-manager/how-to/nested-items.md)

86
src/filemanager/file-manager/user-interface.md Normal file
Просмотреть файл

@ -0,0 +1,86 @@
---
title: "File Manager UI"
component: "File Manager"
description: "Structure of file manager UI"
---
# User Interface Structure
The file manager UI is comprised of several sections like view, toolbar, breadcrumb, context menu, and so on. The UI of the file manager is enhanced with injectable modules like `Details View` for browsing files and folders in a grid, `Navigation Pane` for folder navigation, and `Toolbar` for file operations. The file manager with all feature modules have the following sections in its UI.
* [View](#view) (Large Icons view for browsing files and folders),
* [Toolbar](#toolbar) (For direct access to file operations),
* [Navigation Pane](#navigation-pane) (For easy navigation between folders),
* [Breadcrumb](#breadcrumb) (For parent folder navigations),
* [Context Menu](#context-menu) (For accessing file operations).
![File Manager Overview](./images/user-interface.png "File Manager Overview")
The basic file manager is a light weight component with all the basic functions. The basic file manager have the following sections in its UI to browse files and folders and manage them with file operations.
* [View](#view) (Large Icons view for browsing files and folders),
* [Breadcrumb](#breadcrumb) (For parent folder navigations),
* [Context Menu](#context-menu) (For accessing file operations).
![Basic File Manager](./images/default-ui.png "Basic File Manager")
## Toolbar
The toolbar is an injectable module in file manager. It should be injected before rendering the file manager to avail its functionality. It is present at the top of the file manager. Toolbar provides easy access to the file operations using different buttons.
If the toolbar items exceed the size of the toolbar, then the exceeding toolbar size will be moved to toolbar popup with a dropdown button at the end of toolbar.
*Refer [Toolbar](./file-operations/#toolbar) section in file operations to know more about the buttons present in toolbar*.
![Toolbar](./images/toolbar.png "Responsiveness of Toolbar")
## Files and folders navigation
The file manager provides navigation between files and folders using the following two options.
* [Navigation Pane](#navigation-pane)
* [Breadcrumb](#breadcrumb)
### Navigation pane
The navigation pane is an injectable module so, it should be injected before rendering the file manager to use its functionality.
It displays the folder hierarchy of the file system and provides easy navigation to the desired folder. Using [navigationPaneSettings](../api/file-manager/#navigationpanesettings) minimum and maximum width of the navigation pane can be changed.
The navigation pane can be shown or hidden using the `visible` option in the [navigationPaneSettings](../api/file-manager/#navigationpanesettings).
### BreadCrumb
The file manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the file manager is responsible for resizing.
Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root.
![BreadCrumb](./images/breadcrumb.png "Responsiveness of BreadCrumb Bar")
## View
View is the section where the files and folders are displayed for the user to browse. The file manager has two types of views to display the files and folders.
* [Large Icons View](#large-icons-view)
* [Details View](#details-view)
The `large icons view` is the default starting view in the file manager. The view can be changed by using the [toolbar](#toolbar) view button or by using the view menu in [context menu](#context-menu). The [view](../api/file-manager/#view) API can also be used to change the initial view of the file manager.
### Large icons view
In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For image and video type files, a **preview** will be displayed. Extension thumbnails will be displayed for other type files.
![LargeIconView](./images/largeiconsview.png "File Manager Large Icon View")
### Details view
Details view is an injectable module in the file manager so, it should be injected before rendering the file manager to avail its functionality. In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [detailsViewSettings](../api/file-manager/#detailsviewsettings) API. The details view allows you to perform sorting using column header.
![DetailsView](./images/detailsview.png "File Manager Details View")
## Context menu
The context menu appears on user interaction such as right-click. The file manager is provided with context menu support to perform list of file operations with the files and folders. Context menu appears with varying menu items based on the targets such as file, folder (including navigation pane folders), and layout (empty area in view).
Context menu can be customized using the [contextMenuSettings](../api/file-manager/#contextmenusettings), [menuOpen](../api/file-manager/#menuopen), and [menuClick](../api/file-manager/#menuclick) events.
*Refer [Context Menu](./file-operations/#context-menu) section in file operations to know more about the menu items present in context menu*.
![Context Menu](./images/contextmenu.png "Context Menu")

81
src/filemanager/file-manager/views.md Normal file
Просмотреть файл

@ -0,0 +1,81 @@
---
title: "Views"
component: "File Manager"
description: "Views present in file manager"
---
# Views
View is the section where the files and folders are displayed for the user to browse. The [view](../api/file-manager/#view) API can also be used to change the initial view of the file manager.
The file manager has two types of [views](../api/file-manager/#view) to display the files and folders.
* [LargeIcons View](#largeicons-view)
* [Details View](#details-view)
## LargeIcons View
By Default, File Manager is rendered with largeicons view. The following example demonstrate this.
{% tab template="file-manager/large-icons", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
};
}
```
{% endtab %}
## Details View
Details view is an injectable module in the file manager so, it should be injected before rendering the file manager to avail its functionality. The default appearance of the file manager can be changed from largeicons to details view by using the [view](../api/file-manager/#view) property. The following example demonstrate the file manager with details view.
{% tab template="file-manager/details-view", isDefaultActive = "true",sourceFiles="app/**/*.ts,app/app.component.html" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public view: string;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
// Initial view of File Manager is set to details view
this.view = "Details";
};
}
```
{% endtab %}