@rign/angular2-filemanager
Advanced tools
Filemanager component to display structure of directories and files
This project is a very simple Angular2 file manager.
Install npm package
npm i @rign/angular2-filemanager --save
It also require such dependencies:
you can install it using below command
npm i @angular/cdk @angular/common @angular/core @angular/forms @angular/http @rign/angular2- @ngrx/core @ngrx/effects @ngrx/store @ngrx/store-devtools @ngx-translate/core angular-confirmation-popover angular2-notifications angular2-uuid bootstrap core-js font-awesome lodash.isequal ng2-dnd ng2-file-upload ng2-img-cropper ngx-contextmenu rxjs zone.js --save
In your project put this line
<filemanager>Loading...</filemanager>
In your module add following lines with configuration
import {FileManagerModule, IFileManagerConfiguration} from '../../../main';
...
const fileManagerConfiguration: IFileManagerConfiguration = {
urls: {
foldersUrl: '/api/folder',
filesUrl: /api/files,
folderMoveUrl: '/api/folder/move'
},
isMultiSelection: true,
mimeTypes: ['image/jpg', 'image/jpeg', 'image/png'],
maxFileSize: 50 * 1024,
allowChooseMultipleFiles: true
}
...
You can create a simple configuration object, it should contains a subset of below options
Then you have to provide this value as configuration for the module
@NgModule({
...
imports: [
...,
FileManagerModule.forRoot(fileManagerConfiguration)
],
bootstrap: [AppComponent]
})
export class AppModule {
}
You have also add few other modules:
imports: [
...,
BrowserAnimationsModule,
ConfirmationPopoverModule.forRoot(),
EffectsModule.forRoot([]),
FileManagerModule.forRoot(fileManagerConfiguration),
StoreModule.forRoot({}),
TreeModule.forRoot(),
TranslateModule.forRoot(),
]
Now you should create your own API service to communicate with backend or use existing one FileManagerBackendApiService (remember, it should extend AbstractFileManagerApi and implements IFileManagerApi). If you create your own API service it should have implemented IFileManagerApi interface
All those actions should manipulate on two protected properties:
You can see two examples of that service:
Because of using store, actions and effects you can attach to any actions by creating your own effects service. You are able to connect to actions for doing something special (but this is not obligatory, this is only possibility):
From version 2.0.0 translation dependency is removed from @rign/angular2-filemanager. Now you have to create service which implements IFilemanagerTranslation interface:
import {IFilemanagerTranslation} from '@rign/angular2-filemanager';
export class TranslationService implements IFilemanagerTranslation {
readonly RI_TREE_LBL_ADD_NODE = 'Add data';
readonly RI_TREE_LBL_EDIT_NODE = 'Edit data';
readonly RI_TREE_LBL_REMOVE_NODE = 'Delete data';
readonly RI_TREE_LBL_DROP_ZONE = 'Drop here to move data to root level';
readonly RI_FM_BTN_LANDSCAPE = 'Landscape';
readonly RI_FM_BTN_PORTRAIT = 'Portrait';
readonly RI_FM_BTN_SAVE = 'Save';
readonly RI_FM_BTN_DELETE_YES = 'Yes';
readonly RI_FM_BTN_DELETE_NO = 'No';
readonly RI_FM_LBL_CHOOSE_SELECTION = 'Choose selection';
readonly RI_FM_LBL_DELETE_SELECTION = 'Delete selection';
readonly RI_FM_LBL_INVERSE_SELECTION = 'Inverse selection';
readonly RI_FM_LBL_REMOVE_TITLE = 'Remove file';
readonly RI_FM_LBL_SEARCH_FOR = 'Search for...';
readonly RI_FM_LBL_SELECT_ALL = 'Select all';
readonly RI_FM_LBL_UNSELECT_ALL = 'Unselect all';
readonly RI_FM_MSG_REMOVE_QUESTION = 'You are try to delete ${FILENAME}. Are you sure?';
}
and set is as provider in module which use FilemanagerModule
providers: [
TreeOneNodeService,
{provide: FILEMANAGER_TRANSLATION_TOKEN, useClass: TranslationService},
]
Please remember to add also translations for TreeModule. Look at Translations
Filemanager module has its own service FilemanagerNotifications which store all notifications that comes from inside of that module. You can override this service using INotificationService interface.
export interface INotificationService {
readonly notification$: Observable<INotification>;
send(notification: INotification): void;
}
You can listen on that notification$ property and display your own type of notification. Each notification has such interface
export interface INotification {
type: 'alert' | 'error' | 'success';
title: string;
message?: string;
}
To run local demo you have to clone repo and start
ng start --project=filemanager-example
Or you can see it online demo with local storage
Licensed under MIT.
FAQs
Filemanager component to display structure of directories and files
The npm package @rign/angular2-filemanager receives a total of 2 weekly downloads. As such, @rign/angular2-filemanager popularity was classified as not popular.
We found that @rign/angular2-filemanager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.