Skip to content

castasamu/ngx-uploadx

This branch is 938 commits behind kukhariev/ngx-uploadx:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 24, 2018
47aa562 · Mar 24, 2018

History

35 Commits
Jan 29, 2018
Jan 29, 2018
Mar 24, 2018
Feb 9, 2018
Mar 24, 2018
Jan 29, 2018
Jan 29, 2018
Feb 10, 2018
Feb 9, 2018
Feb 10, 2018
Mar 9, 2018
Mar 9, 2018
Jan 29, 2018
Mar 24, 2018
Mar 24, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018

Repository files navigation

ngx-uploadx

Angular 5+ Resumable Upload Module

Build Status

Key Features

  • Pause / Resume / Cancel Uploads
  • Retries using exponential back-off strategy
  • Chunking

Setups

  • Add ngx-uploadx module as dependency :
  npm install ngx-uploadx
  • Import UploadxModule in the root module:
//...
import { UploadxModule } from 'ngx-uploadx';

@NgModule({
  imports: [
    UploadxModule,
   // ...
});

Basic usage

// Component code
//...
import { Observable } from 'rxjs/Observable';
import { UploadxOptions, UploadState } from 'ngx-uploadx';

@Component({
  selector: 'app-home',
  templateUrl: `
  <input type="file" [uploadx]="options" (uploadxState)="onUpload($event)">
  `
})

export class AppHomeComponent {
  options: UploadxOptions = { url: `[URL]`};
  onUpload(state: Observable<UploadState>) {
    state
      .subscribe((item: UploadState) => {
         console.log(item);
         //...
      }
 }

Directive

<input type="file" [uploadx]="options" [uploadxAction]="control" (uploadxState)="onUpload($event)">

Selector

[uploadx]

inputs

  • [uploadx]: UploadxOptions
  • [uploadxAction]: UploadxControlEvent

Output

  • (uploadxState): $event <Observable>UploadState

Service

UploadxService

Public Methods

  • init(options: UploadxOptions): Observable<UploadState>

    Set global module options

    // example:
    
    ngOnInit() {
      this.uploadService.init(this.uploadxOptions)
        .subscribe((item: UploadState) => {
          console.log(item);
          //...
        }
    }
  • handleFileList(fileList: FileList): void

    Add files to the upload queue

  • control(event: UploadxControlEvent): void

    Send event

    // example:
    
    pause(uploadId: string) {
      this.uploadService.control({ action: 'pause', uploadId });
    }

Interfaces

UploadxOptions

Name Defaults? Description
[allowedTypes] - Set "accept" attribute
[autoUpload] true Auto upload with global options
[chunkSize] 0 If set to > 0 use chunked upload
[concurrency] 2 Limit the number of concurrent uploads
[headers] - Custom headers
[method] "POST" Upload API initial method
[token] - Auth Bearer token
[url] "/upload/" API URL
[withCredentials] false Use withCredentials xhr option

<Observable> UploadState

Name Type Description
file File FileAPI File
name string file name
progress number progress percentage
remaining number ETA
response any success/error response
size number file size
speed number upload speed bytes/sec
status UploadStatus 'added', 'queue', 'uploading', 'complete', 'error', 'cancelled', 'paused'
uploadId string Unique upload id

UploadItem

Item custom options, override globals

Name Type Description
[method] string API initial method
[uploadId] string Unique upload id ( ReadOnly )
[url] string Item URL
[headers] { [key: string]: string } | Function Add custom headers
[metadata] any Add custom data

UploadxControlEvent

Name Type Description
action UploadAction 'uploadAll', 'upload', 'cancel', 'cancelAll', 'pauseAll, 'pause'
[uploadId] string Unique upload id ( ReadOnly )
[itemOptions] UploadItem Item custom options

Run demo

  • Start server npm run server
  • Run demo app npm start
  • Navigate to http://localhost:4200/

Build

Run npm run build to build the lib.

packaged by ng-packagr

Contributing

Pull requests are welcome!

Links

License

The MIT License (see the LICENSE file for the full text)

About

Angular 5+ Resumable Upload Module

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 71.9%
  • JavaScript 16.8%
  • CSS 5.9%
  • HTML 5.4%