NgxFlow

The purpose of this package is to create a wrapper for Angular for fileupload using flow.js.


Demo

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

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 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
`

$3

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

$3

You can find it under flow variable.

`html


Is flowjs supported by the browser? {{flow.flowJs?.support}}


`

$3

Use trackBy for ngFor:

`html



`

`typescript
export class AppComponent {
trackTransfer(transfer: Transfer) {
return transfer.id;
}
}
`

$3

Add singleFile: true to your flow config:

`html

`

$3

Add flowDirectoryOnly="true" to your button:

`html

`

$3

Use directive flowSrc:

`html



`

$3

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();
}
}
`

$3

npm run build - builds the library into dist folder

After that you can publish to npm repository from dist folder:

`
cd dist/ngx-flow
npm publish
``