The purpose of this package is to create a wrapper for Angular for fileupload using [flow.js](https://github.com/flowjs/flow.js).
npm install @flowjs/ngx-flowThe purpose of this package is to create a wrapper for Angular for fileupload using flow.js.




https://stackblitz.com/edit/ngx-flow-example
You can also find example source code in the src folder.
- ✅ 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
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.
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`
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/ }
}
You can find it under flow variable.
` Is flowjs supported by the browser? {{flow.flowJs?.support}}html`
Use trackBy for ngFor:
`html`
`typescript`
export class AppComponent {
trackTransfer(transfer: Transfer) {
return transfer.id;
}
}
Add singleFile: true to your flow config:
`html`
Add flowDirectoryOnly="true" to your button:
`html`
Use directive flowSrc:
`html`
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();
}
}
`
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