Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwinding/ngx-filemanager
File manager for Angular
https://github.com/benwinding/ngx-filemanager
angular cloud-storage filemanager filemanager-ui firebase
Last synced: about 2 months ago
JSON representation
File manager for Angular
- Host: GitHub
- URL: https://github.com/benwinding/ngx-filemanager
- Owner: benwinding
- License: mit
- Created: 2019-04-08T09:30:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-16T03:55:07.000Z (over 3 years ago)
- Last Synced: 2024-11-02T14:51:35.669Z (2 months ago)
- Topics: angular, cloud-storage, filemanager, filemanager-ui, firebase
- Language: TypeScript
- Homepage: https://benwinding.github.io/ngx-filemanager/
- Size: 33.8 MB
- Stars: 9
- Watchers: 3
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxFilemanager
A filemanager for Angular (ngx).
### Filemanager Api
[](https://www.npmjs.com/package/ngx-filemanager-api-firebase)
[](https://github.com/benwinding/ngx-filemanager/blob/master/LICENSE)
[](https://www.npmjs.com/package/ngx-filemanager-api-firebase)
### Filemanager Client
[](https://www.npmjs.com/package/ngx-filemanager-client-firebase)
[](https://github.com/benwinding/ngx-filemanager/blob/master/LICENSE)
[](https://www.npmjs.com/package/ngx-filemanager-client-firebase)
## Features
- 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
- Side Panel Previewer
- Image Preview
- Name
- File size
- Last modified
- Permissions
## Supported Backends
- [x] Google Cloud Storage (firebase storage)
- [ ] FTP
## Firebase - Get Started
This package has been designed to be easy to install on an Angular app.
1. In your `functions` file for Firebase, navigate to the folder and install the 'filemanager' backend npm package.
`yarn add ngx-filemanager-api-firebase`
2. Then add the dependency to the cloud functions as an endpoint like so:
``` typescript
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`.
``` typescript
import { NgxFilemanagerClientFirebaseModule } from 'ngx-filemanager-client-firebase';
imports: [
...,
NgxFilemanagerClientFirebaseModule
]
```
Then add the icon assets to the `angular.json` file:
``` json
"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.
``` javascript
import { Component } from '@angular/core';
import {
FilesSystemProviderService,
FileManagerConfig
} from 'ngx-filemanager-client-firebase';
@Component({
selector: 'app-test-page',
template: `
File Explorer
`
})
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.