ngx-explorer-sdteam

Preview

A version inherits from ngx-explorer.

• Image preview
• Right click context menu
• Read-only mode
• Asynchronous upload progress bar
• One-click treeview
• Observable callback function
• File link generation

DEMO

Icon View

Detail View

Quick Start

• Install package

yarn add ngx-explorer-sdteam

• Implement IDataService provider interface

import { IDataService } from 'ngx-explorer-sdteam';

export class MainComponent implements IDataService<ExampleNode> {
    ...
}

• Add NgxExplorerModule and data provider to NgModule

import { MainComponent } from './main/main.component';
import { NgxExplorerModule, DataService } from 'ngx-explorer-sdteam';

@NgModule({
    imports: [
        ...
        NgxExplorerModule
    ],
    exports: [],
    declarations:[MainComponent],
    providers: [
        { provide: DataService, useClass: MainComponent }
    ]
})
export class AppModule { }

• Add Style to angular.json

"styles": [
    "node_modules/ngx-explorer-sdteam/src/assets/icons/css/txt.css"
],

• Add to .html

<nxe-explorer></nxe-explorer>

Available attribute

Attribute	Type	Default	Description
read-only	boolean	false	Explorer work on read only mode (Open Folder/Download File only)
auto-refresh	boolean	false	Explorer will be refreshed automatically
refresh-interval	number	10000	Interval between refreshes
offset-top	number	0	Right click context menu offset from top
offset-right	number	0	Right click context menu offset from right
offset-bottom	number	0	Right click context menu offset from bottom
offset-left	number	0	Right click context menu offset from left
main-node	string	"Files"	Root folder name
view-type	string	"Detail"	Default explorer view type

Example

<nxe-explorer main-node="home" 
              [read-only]="true" 
              [offset-left]="30" 
              [offset-right]="48" 
              [offset-top]="126" 
              [offset-bottom]="80"> 
</nxe-explorer>

Main function

Function	Description
New Folder	Create a new folder on recent path
Upload File	Open a dialog to select uploaded file
Download File	Download selected files
Rename	Rename selected item
Delete	Delete selected item
Copy Path	Copy recent path
Generate Link	Generate a link to selected item

Copy Path

Path Format : Home/Music/Classical

Generate Link

Link Format : .../file-explorer?filter=Home%2FMusic%2FClassical

import { ExampleNode, IDataService, HelperService } from 'ngx-explorer-sdteam';

export class MainComponent implements IDataService<ExampleNode> {
    filter: string;
    baseUrl: string = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`;
    constructor(
        private _activatedroute: ActivatedRoute,
        private _router: Router
    ) {
        this.filter = this._activatedroute.snapshot.queryParamMap.get('filter')
        this._router.events
            .pipe(filter((event: Event | RouterEvent) => event instanceof NavigationEnd))
            .subscribe(() => { delete this.filter });
    }
    getFilterString(): Observable<any> {
        return of(this.filter);
    }
    getBaseUrl(): Observable<any> {
        return of(`${this.baseUrl}#/file-explorer?filter=`);
    }
}

SignalR

import { ExampleNode, IDataService, HelperService } from 'ngx-explorer-sdteam';

export class MainComponent implements IDataService<ExampleNode> {
    constructor(
    private service: FileManagerService,
    private helperService: HelperService,
    private signalRService: SignalRService,
  ) {
    this.signalRService.fileChangedEmitter
    .pipe(takeUntilDestroyed())
    .subscribe(() => {
        this.helperService.refreshExplorer()
    });
  }
}

Usage

Database & API

Contact me for more detail ([e-mail])

SPA

Example file