A filemanager for Angular (ngx).
-
Using Angular Material Design
-
Optimistic actions, (actions shown on client then confirmed on server)
-
File type icons
-
Actions
- Files / Folders
- Download
- Rename
- Delete
- Copy
- Move
- Set permissions
- Bulk Actions
- Delete
- Rename
- Move
- Copy
- Set permissions
- Files / Folders
-
Side Panel Previewer
- Image Preview
- Name
- File size
- Last modified
- Permissions
- Google Cloud Storage (firebase storage)
- FTP
This package has been designed to be easy to install on an Angular app.
- In your
functions
file for Firebase, navigate to the folder and install the 'filemanager' backend npm package.
yarn add ngx-filemanager-api-firebase
- Then add the dependency to the cloud functions as an endpoint like so:
import { FileManagerEndpointExpress } from '../../ngx-filemanager-api-firebase/src/public_api';
exports.files_endpoint = functions.https.onRequest(FileManagerEndpointExpress(admin.storage()))
Now add the client-side npm package to the Angular App.
yarn add ngx-filemanager-client-firebase
Then import the module into your app.module.ts
.
import { NgxFilemanagerClientFirebaseModule } from 'ngx-filemanager-client-firebase';
imports: [
...,
NgxFilemanagerClientFirebaseModule
]
Then add the icon assets to the angular.json
file:
"ngx-filemanager-client-firebase-demo": {
...,
"architect": {
"build": {
...,
"options": {
...,
"assets": [
...,
{
"glob": "**/*",
"input": "node_modules/ngx-filemanager-client-firebase/assets",
"output": "./assets/fileicons"
}
Finally add the filemanager component where you want, with the correct configuration details to read your cloud function and the bucket name you want.
import { Component } from '@angular/core';
import {
FilesSystemProviderService,
FileManagerConfig
} from 'ngx-filemanager-client-firebase';
@Component({
selector: 'app-test-page',
template: `
<h2>File Explorer</h2>
<div>
<ngx-filemanager [fileSystem]="firebaseClientProvider" [config]="config">
</ngx-filemanager>
</div>
`
})
export class AppTestFunctionsLocallyComponent {
public config: FileManagerConfig = {
initialPath: '/'
};
constructor(
public firebaseClientProvider: FilesSystemProviderService
) {
const bucketName = 'myspecial-bucket.appspot.com';
const apiEndpoint = 'http://myfirebase.cloudfunction.com/files_endpoint';
this.firebaseClientProvider.Initialize(bucketName, apiEndpoint);
}
}
Enjoy! Please file an issue if there's any problems.