ngx-uploadx

ngx-uploadx

Angular Resumable Upload Module

Key Features

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

Setup

• Add ngx-uploadx module as dependency :

  npm install ngx-uploadx

• Import UploadxModule:

//...
import { UploadxModule } from 'ngx-uploadx';

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

Basic usage

// Component code
//...
import { Observable } from 'rxjs';
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);
         //...
      }
 }

Server-side setup

• node-uploadx

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>

Initializes service. Returns Observable that emits a new value on progress or status changes

// example:
uploadxOptions: UploadxOptions = {
  concurrency: 2,
  endpoint: `${environment.api}/upload`,
  token:  () => localStorage.getItem('access_token'),
  autoUpload: true,
  chunkSize: 1024 * 256 * 8
};
ngOnInit() {
  this.uploadService.init(this.uploadxOptions)
    .subscribe((item: UploadState) => {
      console.log(item);
      //...
    }
}

connect(options?: UploadxOptions): Observable<Uploader[]>

Initializes service. Returns Observable that emits the current queue

// example:
@Component({
  template: `
    <input type="file" uploadx">
    <div *ngFor="let item of uploads$ | async">{{item.name}}</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UploadsComponent {
  uploads$: Observable<Uploader[]>;
  options: UploadxOptions = {
    endpoint: `${environment.api}/upload?uploadType=uploadx`,
    token:  () => localStorage.getItem('access_token'),
  }
  constructor(private uploadService: UploadxService) {
    this.uploads$ = this.uploadService.connect(this.options);
  }

disconnect(): <void>

Terminate all uploads and clears the queue

handleFile(file: File): <void>

Create Uploader for the file and add to the queue

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 });
}

Public props

queue: Uploader[]

Uploaders array

events: Observable<UploadState>

Uploadx Events

Interfaces

UploadxOptions

Name	Defaults?	Description
[allowedTypes]	-	Set "accept" attribute
[autoUpload]	true	Auto upload with global options
[chunkSize]	1MiB	If set to > 0 use chunked upload
[concurrency]	2	Limit the number of concurrent uploads
[headers]	-	Custom headers
[uploaderClass]	UploaderX	Upload API implementation
[token]	-	Auth Bearer token / token Getter
[endpoint]	"/upload"	API URL
[maxRetryAttempts]	3	Maximum number of retries to allow (client errors (4xx))

<Observable> UploadState

Name	Type	Description
file	File	FileAPI File
name	string	file name
percentage	number	progress percentage
remaining	number	ETA
response	Object | null	response body
responseStatus	number	response’s status
size	number	file size
speed	number	upload speed bytes/sec
status	UploadStatus	'added', 'queue', 'uploading', 'complete','retry', 'error', 'cancelled', 'paused'
uploadId	string	upload id
URI	string	file URI

UploadItem

Item custom options, override globals

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

UploadxControlEvent

Name	Type	Description
action	UploadAction	'uploadAll', 'upload', 'cancel', 'cancelAll', 'pauseAll, 'pause', 'refreshToken'
[uploadId]	string	upload id ( ReadOnly )
[itemOptions]	UploadItem	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!

Collaborators

wil92	GitHub/wil92
kukhariev	GitHub/kukhariev

Links

• https://developers.google.com/drive/v3/web/resumable-upload

License

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