flowjs/ngx-flow

<h1>ngx-flow example</h1>
<p>
  To see how files are being uploaded to the server you need to run this example along with <a href="">a flowjs server</a>.
</p>

<p>
  @if (flow?.flowJs?.support) {
    ✅ FlowJS is supported by your browser
  }
  @else {
    🛑 FlowJS is NOT supported by your browser
  }
</p>

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

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

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

<button type="button" (click)="flow.upload()" [disabled]="!(flow.somethingToUpload$ | async)">Start upload</button>
<button type="button" (click)="flow.cancel()" [disabled]="!(flow.transfers$ | async)?.transfers?.length">Cancel all</button>
Total progress: {{(flow.transfers$ | async)?.totalProgress | percent}}

<div class="transfers">

  @for (transfer of (flow.transfers$ | async)?.transfers; track transfer.id) {
    <div class="transfer" [ngClass]="{'transfer--error': transfer.error, 'transfer--success': transfer.success}">
      <div class="name">name: {{transfer.name}}</div>
      <div>progress: {{transfer.progress | percent}}</div>
      <div>size: {{transfer.size | number: '1.0'}} bytes</div>
      <div>current speed: {{transfer.currentSpeed | number: '1.0'}} bytes/s</div>
      <div>average speed: {{transfer.averageSpeed | number: '1.0'}} bytes/s</div>
      <div>time ramining: {{transfer.timeRemaining}}s</div>
      <div>paused: {{transfer.paused}}</div>
      <div>success: {{transfer.success}}</div>
      <div>complete: {{transfer.complete}}</div>
      <div>error: {{transfer.error}}</div>

      <img [flowSrc]="transfer">

      <button (click)="flow.pauseFile(transfer)">pause</button>
      <button (click)="flow.resumeFile(transfer)">resume</button>
      <button (click)="flow.cancelFile(transfer)">cancel</button>
    </div>
  }

</div>