Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

flow.js file upload for angular

License

NotificationsYou must be signed in to change notification settings

flowjs/ngx-flow

Repository files navigation

Build StatusTest CoverageMaintainabilitycode style: prettier

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

Demo

https://stackblitz.com/edit/ngx-flow-example

You can also find example source code in theprojects/ngx-flow-demo 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

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

For previous versions, use the matrix below:

Angular@flowjs/ngx-flow
170.8.1
160.7.2
15(not available)
140.6.0
130.5.0
12(not available)
6 -> 110.4.6

Install

Install dependencies :

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

Import in your module:

import{NgxFlowModule,FlowInjectionToken}from'@flowjs/ngx-flow';importFlowfrom'@flowjs/flow.js';@NgModule({imports:[NgxFlowModule],providers:[{provide:FlowInjectionToken,useValue:Flow}]})exportclassAppModule

We use dependecy injection to provide flow.js library.

How to use

  1. Start up server. There is a server example taken fromflow.js here inserver directory. In this repo you can run it usingnpm run server.

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

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

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

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

    OrflowDrop for drag&drop feature:

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

    For both you have to pass[flow]=flow.flowJs whereflow 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 usingupload() method:

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

How doestransfers$ data look like?

Observableflow.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*/}}

FAQ

I need access to flow.js object

You can find it underflow variable.

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

I see flickering when upload is in progress

UsetrackBy forngFor:

<div*ngFor="let transfer of (flow.transfers$ | async).transfers; trackBy: trackTransfer"></div>
exportclassAppComponent{trackTransfer(transfer:Transfer){returntransfer.id;}}

I need just a single file

AddsingleFile: true to your flow config:

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

I want to upload whole directory

AddflowDirectoryOnly="true" to your button:

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

I want to display image which is going to be uploaded

Use directiveflowSrc:

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

How to trigger upload right after picking the file?

Subscribe toevents$. NgxFlow listens for these events:filesSubmitted,fileRemoved,fileRetry,fileProgress,fileSuccess,fileError of flow.js. EventfileSubmitted is fired when user drops or selects a file.

exportclassAppComponentimplementsAfterViewInit,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 fromdist folder:

cd dist/ngx-flownpm publish

About

flow.js file upload for angular

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors14

[8]ページ先頭
©2009-2025 Movatter.jp