ngx-uploadx

Angular Resumable Upload Module

Key Features

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

Basic usage

• Add ngx-uploadx module as dependency:

• Add
  uploadx
  directive to the component template and provide the required options:

Please navigate to the src/app sub-folder for more detailed examples.

Server-side setup

• node-uploadx

API

UploadxOptions

• allowedTypes
  Allowed file types (directive only)

• authorize
  Function used to authorize requests (example)

• autoUpload
  Auto start upload when files added. Default value:
  true

• storeIncompleteHours
  Limit upload lifetime. Default value:
  24

• chunkSize
  Fixed chunk size. If not specified, the optimal size will be automatically adjusted based on the network speed. If set to
  0
  , normal uploading will be used instead of chunked

• maxChunkSize
  Dynamic chunk size limit

• concurrency
  Set the maximum parallel uploads. Default value:
  2

• endpoint
  URL to create new uploads. Default value:
  '/upload'

• responseType
  Expected server response type

• headers
  Headers to be appended to each HTTP request

• metadata
  Custom metadata to be added to the uploaded files

• multiple
  Allow selecting multiple files. Default value:
  true
  (directive only)

• prerequest
  Function called before every request (example)

• retryConfig
  Object to configure retry settings:
  • maxAttempts
    Maximum number of retry attempts. Default value:
    8
  • shouldRestartCodes
    Upload not exist and will be restarted. Default value:
    [404, 410]
  • authErrorCodes
    If one of these codes is received, the request will be repeated with an updated authorization token. Default value:
    [401]
  • shouldRetryCodes
    Retryable 4xx status codes. Default value:
    [408, 423, 429, 460]
  • shouldRetry
    Overrides the built-in function that determines whether the operation should be retried
  • minDelay
    Minimum (initial) retry interval. Default value:
    500
  • maxDelay
    Maximum retry interval. Default value:
    50_000
  • onBusyDelay
    Delay used between retries for non-error responses with missing range/offset. Default value:
    1000
  • timeout
    Time interval after which unfinished requests must be retried
  • keepPartial
    Determines whether partial chunks should be kept

• token
  Authorization token as a
  string
  or function returning a
  string
  or
  Promise<string>

• uploaderClass
  Upload API implementation. Built-in:
  UploaderX
  (default),
  Tus
  . More examples

provideUploadx

Provides configuration options for standalone app (example).

UploadxModule

Adds directives and provide static method

for global configuration

💡 No need to import

UploadxModule

if you do not use the

uploadx

or

uploadxDrop

directives in your application.

Directives

uploadx

File input directive.

selectors:

,

uploadx

Properties:

• @Input() uploadx: UploadxOptions
  Set directive options

• @Input() options: UploadxOptions
  Alias for
  uploadx
  property

• @Input() control: UploadxControlEvent
  Control the uploads

• @Output() state: EventEmitter<UploadState>
  Event emitted on upload state change

uploadxDrop

File drop directive.

selector:

💡 Activates the

.uploadx-drop-active

class on DnD operations.

UploadxService

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

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

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

  Initializes service. Returns Observable that emits the current queue.

• disconnect(): void

  Terminate all uploads and clears the queue.

• ngOnDestroy(): void

  Called when the service instance is destroyed. Interrupts all uploads and clears the queue and subscriptions.

  💡 Normally

  ngOnDestroy()

  is never called because

  UploadxService

  is an application-wide service, and uploading will continue even after the upload component is destroyed.

• handleFiles(files: FileList | File | File[], options = {} as UploadxOptions): void

  Creates uploaders for files and adds them to the upload queue.

• control(event: UploadxControlEvent): void

  Uploads control.

• request<T = string>(config: AjaxRequestConfig): Promise<AjaxResponse<T>>

  Make HTTP request with

  axios
  like interface. (example)

• state(): UploadState[]

  Returns the current state of uploads.

• queue: Uploader[]

  Uploaders array.

• events: Observable<UploadState>

  Uploads state events.

DI tokens

• UPLOADX_FACTORY_OPTIONS
  : override default configuration

• UPLOADX_OPTIONS
  : global options

• UPLOADX_AJAX
  : override internal ajax lib

Demo

Checkout the Demo App or run it on your local machine:

• Run script
  npm start
• Navigate to
  http://localhost:4200/

Build

Run

to build the lib.

packaged by ng-packagr

Bugs and Feedback

For bugs, questions and discussions please use the GitHub Issues.

Contributing

Pull requests are welcome!
To contribute, please read contributing instructions.

License

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