{"id":13808505,"url":"https://github.com/kukhariev/ngx-uploadx","last_synced_at":"2025-10-05T17:18:41.578Z","repository":{"id":28820593,"uuid":"119429067","full_name":"kukhariev/ngx-uploadx","owner":"kukhariev","description":"Angular Resumable Upload Module","archived":false,"fork":false,"pushed_at":"2024-04-26T09:48:58.000Z","size":3017,"stargazers_count":42,"open_issues_count":0,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T10:49:14.085Z","etag":null,"topics":["angular","chunked-uploads","resumable-upload","tus","uploader","uploadx"],"latest_commit_sha":null,"homepage":"https://github.com/kukhariev/ngx-uploadx","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kukhariev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-29T19:17:01.000Z","updated_at":"2024-05-28T19:05:56.585Z","dependencies_parsed_at":"2024-01-12T12:13:00.107Z","dependency_job_id":"41b8c33e-03ec-4ed5-b548-78f93e85c3b1","html_url":"https://github.com/kukhariev/ngx-uploadx","commit_stats":{"total_commits":857,"total_committers":11,"mean_commits":77.9090909090909,"dds":0.1388564760793466,"last_synced_commit":"98878f4dd3d50d75a9da702a008e367a8c2f791f"},"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kukhariev%2Fngx-uploadx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kukhariev%2Fngx-uploadx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kukhariev%2Fngx-uploadx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kukhariev%2Fngx-uploadx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kukhariev","download_url":"https://codeload.github.com/kukhariev/ngx-uploadx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445681,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","chunked-uploads","resumable-upload","tus","uploader","uploadx"],"created_at":"2024-08-04T01:01:44.499Z","updated_at":"2025-10-05T17:18:36.527Z","avatar_url":"https://github.com/kukhariev.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["File Upload"],"readme":"# ngx-uploadx\n\n\u003e Angular Resumable Upload Module\n\n[![tests][tests-image]][tests-url]\n[![build][build-image]][build-url]\n[![npm version][npm-image]][npm-url]\n[![commits since latest release][comm-image]][comm-url]\n\n## Key Features\n\n- Pause / Resume / Cancel Uploads\n- Retries using exponential back-off strategy\n- Chunking\n\n## Basic usage\n\n- Add ngx-uploadx module as dependency:\n\n```sh\n  npm install ngx-uploadx\n```\n\n- Import UploadxModule:\n\n```ts\n//...\nimport { UploadxModule } from 'ngx-uploadx';\n\n@NgModule({\n  imports: [\n    UploadxModule,\n   // ...\n});\n```\n\n- Add `uploadx` directive to the component template and provide the required options:\n\n```ts\n// Component code\n//...\nimport { UploadxOptions, UploadState } from 'ngx-uploadx';\n\n@Component({\n  selector: 'app-home',\n  template: ` \u003cinput type=\"file\" [uploadx]=\"options\" (state)=\"onUpload($event)\" /\u003e `\n})\nexport class AppHomeComponent {\n  options: UploadxOptions = { endpoint: `[URL]` };\n  onUpload(state: UploadState) {\n    console.log(state);\n    //...\n  }\n}\n```\n\n\u003e _Please navigate to the [src/app sub-folder](src/app) for more detailed examples._\n\n## Server-side setup\n\n- [node-uploadx](https://github.com/kukhariev/node-uploadx#readme)\n\n## API\n\n### UploadxOptions\n\n- `allowedTypes` Allowed file types (directive only)\n\n- `authorize` Function used to authorize requests [(example)](src/app/on-push/on-push.component.ts)\n\n- `autoUpload` Auto start upload when files added. Default value: `true`\n\n- `storeIncompleteHours` Limit upload lifetime. Default value: `24`\n\n- `chunkSize` Fixed chunk size. If not specified, the optimal size will be automatically adjusted based on the network speed.\n  If set to `0`, normal unloading will be used instead of chunked\n\n- `maxChunkSize` Dynamic chunk size limit\n\n- `concurrency` Set the maximum parallel uploads. Default value: `2`\n\n- `endpoint` URL to create new uploads. Default value: `'/upload'`\n\n- `responseType` Expected server response type\n\n- `headers` Headers to be appended to each HTTP request\n\n- `metadata` Custom metadata to be added to the uploaded files\n\n- `multiple` Allow selecting multiple files. Default value: `true` (directive only)\n\n- `prerequest` Function called before every request [(example)](src/app/service-way/service-way.component.ts)\n\n- `retryConfig` Object to configure retry settings:\n\n  - `maxAttempts` Maximum number of retry attempts. Default value: `8`\n  - `shouldRestartCodes` Upload not exist and will be restarted. Default value: `[404, 410]`\n  - `authErrorCodes` If one of these codes is received, the request will be repeated with an updated authorization token. Default value: `[401]`\n  - `shouldRetryCodes` Retryable 4xx status codes. Default value: `[408, 423, 429, 460]`\n  - `shouldRetry` Overrides the built-in function that determines whether the operation should be retried\n  - `minDelay` Minimum (initial) retry interval. Default value: `500`\n  - `maxDelay` Maximum retry interval. Default value: `50_000`\n  - `onBusyDelay` Delay used between retries for non-error responses with missing range/offset. Default value: `1000`\n  - `timeout` Time interval after which unfinished requests must be retried\n  - `keepPartial` Determines whether partial chunks should be kept\n\n- `token` Authorization token as a `string` or function returning a `string` or `Promise\u003cstring\u003e`\n\n- `uploaderClass` Upload API implementation. Built-in: `UploaderX`(default), `Tus`. More [examples](uploader-examples)\n\n### UploadxModule\n\nAdds directives and provide static method `withConfig` for global configuration [(example)](src/app/app.module.ts).\n\n\u003e :bulb: _No need to import `UploadxModule` if you do not use the `uploadx` or `uploadxDrop` directives in your application._\n\n### Directives\n\n```html\n\u003cdiv uploadxDrop\u003e\n  \u003clabel class=\"file-drop\"\u003e\n    \u003cinput type=\"file\" [uploadx]=\"options\" [control]=\"control\" (state)=\"onState($event)\" /\u003e\n  \u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### uploadx\n\nFile input directive.\n\nselectors: `[uploadx]`, `uploadx`\n\nProperties:\n\n- `@Input() uploadx: UploadxOptions` Set directive options\n\n- `@Input() options: UploadxOptions` Alias for `uploadx` property\n\n- `@Input() control: UploadxControlEvent` Control the uploads\n\n- `@Output() state: EventEmitter\u003cUploadState\u003e` Event emitted on upload state change\n\n#### uploadxDrop\n\nFile drop directive.\n\nselector: `uploadxDrop`\n\n\u003e :bulb: _Activates the `.uploadx-drop-active` class on DnD operations._\n\n### UploadxService\n\n- `init(options?: UploadxOptions): Observable\u003cUploadState\u003e`\n\n  Initializes service. Returns Observable that emits a new value on progress or status changes.\n\n  ```ts\n  //  @example:\n  uploadxOptions: UploadxOptions = {\n    concurrency: 4,\n    endpoint: `${environment.api}/upload`,\n    uploaderClass: Tus\n  };\n  ngOnInit() {\n    this.uploadService.init(this.uploadxOptions)\n      .subscribe((state: UploadState) =\u003e {\n        console.log(state);\n        // ...\n      }\n  }\n  ```\n\n- `connect(options?: UploadxOptions): Observable\u003cUploader[]\u003e`\n\n  Initializes service. Returns Observable that emits the current queue.\n\n  ```ts\n  // @example:\n  @Component({\n    template: `\n      \u003cinput type=\"file\" uploadx\"\u003e\n      \u003cdiv *ngFor=\"let item of uploads$ | async\"\u003e{{item.name}}\u003c/div\u003e\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n  })\n  export class UploadsComponent {\n    uploads$: Observable\u003cUploader[]\u003e;\n    options: UploadxOptions = {\n      endpoint: `${environment.api}/upload?uploadType=uploadx`,\n      headers: { 'ngsw-bypass': 1 }\n    }\n    constructor(private uploadService: UploadxService) {\n      this.uploads$ = this.uploadService.connect(this.options);\n    }\n  ```\n\n- `disconnect(): void`\n\n  Terminate all uploads and clears the queue.\n\n- `ngOnDestroy(): void`\n\n  Called when the service instance is destroyed. Interrupts all uploads and clears the queue and subscriptions.\n\n  \u003e :bulb: _Normally `ngOnDestroy()` is never called because `UploadxService` is an application-wide service,\n  \u003e and uploading will continue even after the upload component is destroyed._\n\n- `handleFiles(files: FileList | File | File[], options = {} as UploadxOptions): void`\n\n  ```ts\n  // @example:\n  onFilesSelected(): void {\n    this.uploadService.handleFiles(this.fileInput.nativeElement.files);\n  }\n  ```\n\n  Creates uploaders for files and adds them to the upload queue.\n\n- `control(event: UploadxControlEvent): void`\n\n  Uploads control.\n\n  ```ts\n  // @example:\n  pause(uploadId?: string) {\n    this.uploadService.control({ action: 'pause', uploadId });\n  }\n  setToken(token: string) {\n    this.uploadService.control({ token });\n  }\n  ```\n\n- `request\u003cT = string\u003e(config: AjaxRequestConfig): Promise\u003cAjaxResponse\u003cT\u003e\u003e`\n\n  Make HTTP request with `axios` like interface. [(example)](src/app/service-way/service-way.component.ts)\n\n- `state(): UploadState[]`\n\n  Returns the current state of uploads.\n\n  ```ts\n  // @example:\n  uploads: UploadState[];\n  constructor(private uploadService: UploadxService) {\n    // restore background uploads\n    this.uploads = this.uploadService.state();\n  }\n  ```\n\n- `queue: Uploader[]`\n\n  Uploaders array.\n\n  ```ts\n  // @example:\n  export class UploadComponent {\n    state: UploadState;\n    options: UploadxOptions = {\n      concurrency: 1,\n      multiple: false,\n      endpoint: `${environment.api}/upload`,\n    }\n    constructor(private uploadService: UploadxService) {\n      this.state = this.uploadService.queue[0] || {};\n    }\n  ```\n\n- `events: Observable\u003cUploadState\u003e`\n\n  Uploads state events.\n\n### DI tokens\n\n- `UPLOADX_FACTORY_OPTIONS`: override default configuration\n\n- `UPLOADX_OPTIONS`: global options\n\n- `UPLOADX_AJAX`: override internal ajax lib\n\n## Demo\n\nCheckout the [Demo App](https://ngx-uploadx.vercel.app/) or run it on your local machine:\n\n- Run script `npm start`\n- Navigate to `http://localhost:4200/`\n\n## Build\n\nRun `npm run build:pkg` to build the lib.\n\n\u003e _packaged by_ [ng-packagr](https://github.com/dherges/ng-packagr)\n\n## Bugs and Feedback\n\nFor bugs, questions and discussions please use the [GitHub Issues](https://github.com/kukhariev/ngx-uploadx/issues).\n\n## Contributing\n\nPull requests are welcome!\\\nTo contribute, please read [contributing instructions](https://github.com/kukhariev/ngx-uploadx/blob/master/.github/CONTRIBUTING.md#contributing).\n\n## License\n\nThe MIT License (see the [LICENSE](LICENSE) file for the full text)\n\n[npm-image]: https://img.shields.io/npm/v/ngx-uploadx.svg\n[npm-url]: https://www.npmjs.com/package/ngx-uploadx\n[tests-image]: https://github.com/kukhariev/ngx-uploadx/actions/workflows/test.yml/badge.svg\n[tests-url]: https://github.com/kukhariev/ngx-uploadx/actions/workflows/test.yml\n[build-image]: https://github.com/kukhariev/ngx-uploadx/actions/workflows/integration.yml/badge.svg\n[build-url]: https://github.com/kukhariev/ngx-uploadx/actions/workflows/integration.yml\n[comm-image]: https://img.shields.io/github/commits-since/kukhariev/ngx-uploadx/latest\n[comm-url]: https://github.com/kukhariev/ngx-uploadx/releases/latest\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkukhariev%2Fngx-uploadx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkukhariev%2Fngx-uploadx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkukhariev%2Fngx-uploadx/lists"}