The 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 projects/ngx-flow-demo 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

From the v18, we aligned the main version of this library with Angular (and Angular CLI).

For previous versions, use the matrix below:

Install dependencies :

npm install @flowjs/flow.js @flowjs/ngx-flow

Import in your module:

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.

2. First you need to initialize ngx-flow directive and export it as for example flow variable:

   <ng-container #flow="flow" [flowConfig]="{target: 'http://localhost:3000/upload'}"></ng-container>

3. Now you can use either directive flowButton for select file dialog:

   <input type="file" flowButton [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" />

   Or flowDrop for drag&drop feature:

   <div class="drop-area" flowDrop [flow]="flow.flowJs"></div>

   For both you have to pass [flow]=flow.flowJs where flow is template variable exported in step 1.

4. You can than subscribe to observable of transfers:

   <div *ngFor="let transfer of (flow.transfers$ | async).transfers"></div>

5. After adding files you can begin upload using upload() method:

   <button type="button" (click)="flow.upload()" [disabled]="!(flow.somethingToUpload$ | async)">Start upload</button>

Observable flow.transfers$ emits state in form:

{ 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.

<p>Is flowjs supported by the browser? {{flow.flowJs?.support}}</p>

Use trackBy for ngFor:

<div *ngFor="let transfer of (flow.transfers$ | async).transfers; trackBy: trackTransfer"></div>

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

Add singleFile: true to your flow config:

<ng-container #flow="flow" [flowConfig]="{target: 'http://localhost:3000/upload', singleFile: true}"></ng-container>

Add flowDirectoryOnly="true" to your button:

<input type="file" flowButton [flow]="flow.flowJs" flowDirectoryOnly="true" [flowAttributes]="{accept: 'image/*'}" />

Use directive flowSrc:

<div *ngFor="let transfer of (flow.transfers$ | async).transfers"> <img [flowSrc]="transfer" /> </div>

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.

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:lib - builds the library into dist folder

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

cd dist/ngx-flow npm publish