Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flowjs/ngx-flow
flow.js file upload for angular
https://github.com/flowjs/ngx-flow
Last synced: 3 days ago
JSON representation
flow.js file upload for angular
- Host: GitHub
- URL: https://github.com/flowjs/ngx-flow
- Owner: flowjs
- License: mit
- Created: 2017-03-10T13:47:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T15:07:53.000Z (3 months ago)
- Last Synced: 2024-10-29T22:37:19.650Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.49 MB
- Stars: 60
- Watchers: 14
- Forks: 19
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-flow - flow.js file upload for Angular. (Uncategorized / Uncategorized)
- awesome-angular - ngx-flow - Angular7+ wrapper for [flow.js](https://github.com/flowjs/flow.js) for file upload. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-flow - Angular7+ wrapper for <b><code> 2969⭐</code></b> <b><code> 348🍴</code></b> [flow.js](https://github.com/flowjs/flow.js)) for file upload. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-flow - Angular7+ wrapper for <b><code> 2961⭐</code></b> <b><code> 346🍴</code></b> [flow.js](https://github.com/flowjs/flow.js)) for file upload. (Table of contents / Third Party Components)
README
# NgxFlow
[](https://travis-ci.com/flowjs/ngx-flow)
[](https://codeclimate.com/github/flowjs/ngx-flow/test_coverage)
[](https://codeclimate.com/github/flowjs/ngx-flow/maintainability)
[](https://github.com/prettier/prettier)
The purpose of this package is to create a wrapper for Angular for fileupload using [flow.js](https://github.com/flowjs/flow.js).
## Demo
[https://stackblitz.com/edit/ngx-flow-example](https://stackblitz.com/edit/ngx-flow-example)
You can also find example source code in the `src` folder.
## Roadmap
- ✅ upload single file
- ✅ upload multiple files
- ✅ queue management
- ✅ error handling
- ✅ pause / resume upload
- ✅ cancel upload, cancel all uploads
- ✅ upload progress
- ✅ file / directory restrictions
- ✅ drag & drop
- ✅ display uploaded image
- ✅ tests
- ✅ upload right after selecting file
- ✅ run tests using TravisCI
- ✅ demo using Stackblitz
- ✅ support for server side rendering
## Compatibility
| Angular | @flowjs/ngx-flow |
| :-----: | :--------------: |
| 18 | ^18.0.0 |
| 17 | 0.8.1 |
| 16 | 0.7.2 |
| 15 | \- |
| 14 | 0.6.0 |
| 13 | 0.5.0 |
| 12 | \- |
| 6 -> 11 | 0.4.6 |
## Install
`npm install @flowjs/flow.js @flowjs/ngx-flow`
Import in your module:
```typescript
import { NgxFlowModule, FlowInjectionToken } from '@flowjs/ngx-flow';
import Flow from '@flowjs/flow.js';
@NgModule({
imports: [NgxFlowModule],
providers: [
{
provide: FlowInjectionToken,
useValue: Flow
}
]
})
export class AppModule
```
We use dependecy injection to provide flow.js library.
## How to use
1. Start up server. There is a server example taken from [flow.js](https://github.com/flowjs/flow.js) here in `server` directory. In this repo you can run it using `npm run server`.
1. First you need to initialize ngx-flow directive and export it as for example `flow` variable:
```html
```
1. Now you can use either directive `flowButton` for select file dialog:
```html
```
Or `flowDrop` for drag&drop feature:
```html
```
For both you have to pass `[flow]=flow.flowJs` where `flow` is template variable exported in step 1.
1. You can than subscribe to observable of transfers:
```html
```
1. After adding files you can begin upload using `upload()` method:
```html
Start upload
```
### How does `transfers$` data look like?
Observable `flow.transfers$` emits state in form:
```typescript
{
totalProgress: 0.5,
transfers: [
{
name: "somefile.txt",
flowFile: FlowFile,
progress: number,
error: boolean,
paused: boolean,
success: boolean,
complete: boolean,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "uploading.txt",
flowFile: FlowFile,
progress: 0.5,
error: false,
paused: false,
success: false,
complete: false,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "failed-to-upload.txt",
flowFile: FlowFile,
progress: number,
error: true,
paused: false,
success: false,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
{
name: "uploaded.txt",
flowFile: FlowFile,
progress: number,
error: false,
paused: false,
success: true,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
],
flow: { /* flow.js instance*/ }
}
```
## FAQ
### I need access to flow.js object
You can find it under `flow` variable.
```html
Is flowjs supported by the browser? {{flow.flowJs?.support}}
```
### I see flickering when upload is in progress
Use `trackBy` for `ngFor`:
```html
```
```typescript
export class AppComponent {
trackTransfer(transfer: Transfer) {
return transfer.id;
}
}
```
### I need just a single file
Add `singleFile: true` to your flow config:
```html
```
### I want to upload whole directory
Add `flowDirectoryOnly="true"` to your button:
```html
```
### I want to display image which is going to be uploaded
Use directive `flowSrc`:
```html
![]()
```
### How to trigger upload right after picking the file?
Subscribe to `events$`. NgxFlow listens for these events: `filesSubmitted`, `fileRemoved`, `fileRetry`, `fileProgress`, `fileSuccess`, `fileError` of flow.js. Event `fileSubmitted` is fired when user drops or selects a file.
```typescript
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('flow')
flow: FlowDirective;
autoUploadSubscription: Subscription;
ngAfterViewInit() {
this.autoUploadSubscription = this.flow.events$.subscribe((event) => {
if (event.type === 'filesSubmitted') {
this.flow.upload();
}
});
}
ngOnDestroy() {
this.autoUploadSubscription.unsubscribe();
}
}
```
### Development
`npm run build:lib` - builds the library into dist folder
After that you can publish to npm repository from `dist` folder:
```
cd dist/ngx-flow
npm publish
```