{"id":13481095,"url":"https://github.com/valor-software/ng2-file-upload","last_synced_at":"2026-10-19T11:06:22.809Z","repository":{"id":1207860,"uuid":"41478768","full_name":"valor-software/ng2-file-upload","owner":"valor-software","description":"Easy to use Angular components for files upload","archived":false,"fork":false,"pushed_at":"2026-10-07T12:14:22.000Z","size":20489,"stargazers_count":1896,"open_issues_count":416,"forks_count":647,"subscribers_count":71,"default_branch":"development","last_synced_at":"2026-10-09T12:30:30.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://valor-software.github.io/ng2-file-upload/","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/valor-software.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-08-27T09:48:28.000Z","updated_at":"2026-10-09T06:40:25.000Z","dependencies_parsed_at":"2024-09-24T23:00:57.433Z","dependency_job_id":"afe5f0a9-7525-4126-834c-24aa862c2312","html_url":"https://github.com/valor-software/ng2-file-upload","commit_stats":{"total_commits":196,"total_committers":47,"mean_commits":4.170212765957447,"dds":0.7602040816326531,"last_synced_commit":"f7a066b8e0cbc64e7edb086302327df279b95643"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/valor-software/ng2-file-upload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-file-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-file-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-file-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-file-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valor-software","download_url":"https://codeload.github.com/valor-software/ng2-file-upload/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-file-upload/sbom","scorecard":{"id":915427,"data":{"date":"2025-08-11","repo":{"name":"github.com/valor-software/ng2-file-upload","commit":"085716851ed13492b92fd95a1cd7807a4cdcc9b4"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":4,"reason":"Found 4/9 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/on-gh-release.yml:1","Warn: no topLevel permission defined: .github/workflows/on-publish.yml:1","Warn: no topLevel permission defined: .github/workflows/on-push-or-pull.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":1,"reason":"dependency not pinned by hash detected -- score normalized to 1","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-gh-release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-gh-release.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-gh-release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-gh-release.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-gh-release.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-gh-release.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-gh-release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-gh-release.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-publish.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:109: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:114: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-publish.yml:119: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-publish.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-publish.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-publish.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:70: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:100: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-push-or-pull.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/valor-software/ng2-file-upload/on-push-or-pull.yml/development?enable=pin","Info:   0 out of  28 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   7 third-party GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"31 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T20:47:32.517Z","repository_id":1207860,"created_at":"2025-08-24T20:47:32.517Z","updated_at":"2025-08-24T20:47:32.517Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38355205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T17:00:48.640Z","updated_at":"2026-10-19T11:06:22.802Z","avatar_url":"https://github.com/valor-software.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","others","Third Party Components","Table of Contents","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","File Upload","File Libraries","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)\nEasy to use Angular directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/))\n\n[![Build Status](https://github.com/valor-software/ng2-file-upload/actions/workflows/on-push-or-pull.yml/badge.svg?branch=development)](https://github.com/valor-software/ng2-file-upload/actions/workflows/on-push-or-pull.yml)\n\n## Quick start\n\n1. A recommended way to install ***ng2-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-file-upload) package manager using the following command:\n\n  `npm i ng2-file-upload`\n\n  Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-file-upload/archive/development.zip).\n\n2. Currently `ng2-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and\n  `ng2-file-drop` is used for area that will be used for dropping of file or files.\n\n3. More information regarding using of ***ng2-file-upload*** is located in\n  [demo](http://valor-software.github.io/ng2-file-upload/) and [demo sources](https://github.com/valor-software/ng2-file-upload/tree/development/apps/demo/src/app/components/file-upload).\n\n## Compatibility\n\n| Angular     | ng2-file-upload |\n|-------------|-----------------|\n| 22.x        | 11.x            |\n| 21.x        | 10.x            |\n| 20.x        | 9.x             |\n| 19.x        | 8.x             |\n| 18.x        | 7.x             |\n| 17.x        | 6.x             |\n| 16.x        | 5.x             |\n| 15.x        | 4.x             |\n| 14.x        | 3.x             |\n| 11.x - 12.x | 2.0.0-x         |\n| 2.x - 10.x  | 1.x             |\n\n## Using ***ng2-file-upload*** in a project\n\n1. Install as shown in the above section.\n\n2. Import the directives into a standalone component, or `FileUploadModule` into an `NgModule`:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FileDropDirective, FileSelectDirective, FileUploader } from 'ng2-file-upload';\n\n@Component({\n  selector: 'app-upload',\n  imports: [ FileSelectDirective, FileDropDirective ],\n  template: `\n    \u003cdiv ng2FileDrop [uploader]=\"uploader\" (fileOver)=\"over = $event\"\u003eDrop files here\u003c/div\u003e\n    \u003cinput type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple /\u003e\n    \u003cbutton (click)=\"uploader.uploadAll()\"\u003eUpload all\u003c/button\u003e\n  `\n})\nexport class UploadComponent {\n  uploader = new FileUploader({ url: '/api/upload' });\n  over = false;\n}\n```\n\n```typescript\nimport { FileUploadModule } from 'ng2-file-upload';\n\n@NgModule({ imports: [ FileUploadModule ] })\n```\n\nThe uploader updates items and progress from XHR callbacks. Apps without zone.js (zoneless change detection, the default for new Angular apps) are not re-rendered by those updates: add `provideZoneChangeDetection()` to the app providers, or call `ChangeDetectorRef.markForCheck()` (or update a signal) from every callback whose state you display, e.g. `onBeforeUploadItem`, `onProgressItem`, `onSuccessItem`, `onErrorItem`, `onCancelItem` and `onCompleteItem`, and after your own calls such as `item.remove()`.\n\nRequests are sent with `withCredentials` on, so a server on another origin must answer with that exact origin in `Access-Control-Allow-Origin` and with `Access-Control-Allow-Credentials: true`. To send requests without credentials, set `item.withCredentials = false` in `onAfterAddingFile`.\n\nTo keep uploads running while the user navigates between routes, create the uploader in a service instead of a component.\n\nThe directives add files to the uploader as soon as they are selected or dropped. To change files first, e.g. resize images, handle the input's `change` event or your own drop zone instead, and call `uploader.addToQueue(files)` with the results. The filters run on the files you add.\n\n## API for `ng2FileSelect`\n\n### Properties\n\n  - `uploader` - (`FileUploader`) - the uploader that selected files are added to.\n\n### Events\n - `onFileSelected` - fires when files are selected and added to the uploader queue; `$event` is the selected `FileList` (use `Array.from($event)` for an array). A file removed from the queue can be selected again.\n\n## API for `ng2FileDrop`\n\n### Properties\n\n  - `uploader` - (`FileUploader`) - the uploader that dropped files are added to.\n\n### Events\n\n  - `fileOver` - fires when files are dragged over the drop area (`true`) and when they leave it or are dropped (`false`).\n  - `onFileDrop` - fires after files are dropped and added to the uploader queue; `$event` is the dropped `FileList` (use `Array.from($event)` for an array), i.e. `(onFileDrop)=\"dropped($event)\"`.\n\nSee the [demo sources](https://github.com/valor-software/ng2-file-upload/tree/development/apps/demo/src/app/components/file-upload) for complete examples.\n\n## API for `FileUploader`\n\n### Options\n\n  `new FileUploader(options)` and `setOptions(options)` accept:\n\n  1. `url` - URL of the upload route (required).\n  2. `method` - HTTP method. Defaults to `POST`.\n  3. `headers` - Headers sent with every request, as an array of `{ name, value }`.\n  4. `authToken` - Value of the auth header sent with every request, including its scheme, e.g. `'Bearer ' + token`.\n  5. `authTokenHeader` - Name of that header. Defaults to `Authorization`.\n  6. `itemAlias` - Name of the file field in the multipart form. Defaults to `file`.\n  7. `additionalParameter` - Extra form fields sent with every file; `{{file_name}}` in a string value is replaced with the file name.\n  8. `parametersBeforeFiles` - Sends `additionalParameter` fields before the file instead of after it. Defaults to false.\n  9. `disableMultipart` - If true, sends the file itself as the request body instead of a multipart form. Some APIs (e.g. Amazon S3) expect this. Defaults to false.\n  10. `formatDataFunction` - Function to modify the request body. `disableMultipart` must be true for this function to be called.\n  11. `formatDataFunctionIsAsync` - Informs if the function sent in `formatDataFunction` is asynchronous. Defaults to false.\n  12. `autoUpload` - Uploads files as soon as they are added. Defaults to false.\n  13. `removeAfterUpload` - Removes an item from the queue once its upload has finished, whether it succeeded or failed. Defaults to false.\n  14. `maxFileSize` - Largest accepted file size in bytes.\n  15. `allowedMimeType` - Accepted MIME types, e.g. `['image/png', 'application/pdf']`.\n  16. `allowEmptyMimeType` - Whether files with an empty MIME type pass `allowedMimeType`. Browsers report an empty type when the operating system does not know the extension, which differs between systems (e.g. `.7z`, `.mkv` or old Office files on some machines). Defaults to true. Set it to false to accept only the listed types; to accept untyped files with certain extensions instead, keep it true and add your own filter that checks the extension of files without a type.\n  17. `allowedFileType` - Accepted file classes: `image`, `video`, `audio`, `pdf`, `compress`, `doc`, `xls`, `ppt`, or `application` for anything else. The class comes from the MIME type, then from the file extension.\n  18. `queueLimit` - Largest number of items in the queue.\n  19. `filters` - Your own filters, as `{ name, fn: (file: FileLikeObject, options) =\u003e boolean }`.\n  20. `isHTML5` - Keep the default (true); there is no other transport.\n\n  `setOptions` merges the given options into the current ones, so pass only what changes (plus `url`, which the type requires). It also resets `item.url` of every queued item to the new `url`. Filters apply to files added afterwards.\n\n### Properties and methods\n\n  - `queue` - the `FileItem`s added to the uploader. Each item has the file's `name`, `size` and `type` in `item.file`, the `File` itself in `item._file`, its `progress` (0 to 100), the state flags `isReady`, `isUploading`, `isUploaded`, `isSuccess`, `isError` and `isCancel`, and `upload()`, `cancel()` and `remove()` methods. `item.url`, `item.method`, `item.headers` and `item.withCredentials` apply to that item's requests.\n  - `progress` - progress of the whole queue (0 to 100): the average over the items in the queue, each counted from 0 to 100 whatever its size, so it drops when files are added. With `removeAfterUpload` it is the progress of the item being uploaded. `isUploading` - whether a request is in progress.\n  - `addToQueue(files)` - adds a `FileList` or an array of `File`s, applying the filters.\n  - `uploadAll()` / `cancelAll()` - uploads, or cancels, every item that has not been uploaded. Items upload one at a time; an item that is waiting for its turn is cancelled without sending a request. Cancelled items stay in `queue` with `isCancel` set; remove them with `item.remove()`.\n  - `removeFromQueue(item)` / `clearQueue()` - removes items, cancelling an upload in progress.\n  - `response` - an `EventEmitter` with the response text of every request.\n\n### Callbacks\n\n  Assign these to react to the queue. Each is a single property, so put all your handling for an event in one function.\n\n  - `onAfterAddingFile(item)` / `onAfterAddingAll(items)` - after files pass the filters and are added.\n  - `onWhenAddingFileFailed(file, filter, options)` - when a file is rejected; `filter.name` is `fileSize`, `mimeType`, `fileType`, `queueLimit` or the name of your own filter. A file has to pass every filter. They run in the order `mimeType`, `fileType`, `fileSize`, `queueLimit`, then your own filters, and only the first one that rejects the file is reported.\n  - `onBuildItemForm(item, form)` - before a multipart request is sent; append your own fields to the `FormData`.\n  - `onBeforeUploadItem(item)` - before an item is uploaded; change `item.url`, `item.method` or `item.headers` here.\n  - `onProgressItem(item, progress)` / `onProgressAll(progress)` - upload progress, 0 to 100.\n  - `onSuccessItem`, `onErrorItem`, `onCancelItem`, `onCompleteItem` - `(item, response, status, headers)` when an item finishes; `onCompleteItem` follows each of the others. Status `0` means there was no response: a network error, a request blocked by CORS, or an error thrown by a callback before the request was sent.\n  - `onCompleteAll()` - when no more items are waiting.\n\n  An error thrown by a callback is rethrown after the item is finished, so the queue still moves on and the error reaches your error handling. If another callback for the same item throws as well, the first error is rethrown and the later one is reported asynchronously, so it still reaches `window.onerror` and Angular's `ErrorHandler`. An error thrown before the request is sent (e.g. in `onBeforeUploadItem` or `onBuildItemForm`) fails the item with status `0` and is rethrown from the call that started the upload, such as `uploadAll()`, `item.upload()` or `addToQueue()` with `autoUpload`, or, when the item was waiting in the queue, from the response handling of the item before it.\n\n## Chunked uploads\n\n  Use `ChunkedFileUploader` (a `FileUploader` subclass) instead of `FileUploader` to send large files in several requests. It works with the same directives, options and callbacks; without a positive `chunkSize` (missing, 0, negative or `NaN`) it behaves exactly like `FileUploader` and sends each file in one request.\n\n  The demo's \"Chunked\" tab shows a complete example: retargeting chunks to an upload id, app-side retries with `resumeItem`, and a backend that reassembles the file.\n\n  ```typescript\n  uploader = new ChunkedFileUploader({ url: URL, chunkSize: 2 * 1024 * 1024 });\n  ```\n\n  Additional options:\n\n  1. `chunkSize` - Bytes per request, rounded down to a whole number and fixed when an upload starts; other options apply to each request. Multipart requests send any fields added in `onBuildItemForm`, then `chunkIndex` and `totalChunks` fields, then the chunk as the file field; with `disableMultipart` the raw chunk is sent with a `Content-Range: bytes \u003cfirst\u003e-\u003clast\u003e/\u003cfile size\u003e` header (inclusive byte positions; `bytes */0` for an empty file) unless you set one (`formatDataFunction` is not used). An empty file is sent as one empty chunk.\n  2. `chunkIndexParam` / `totalChunksParam` - Names of those form fields. Default to `chunkIndex` and `totalChunks`.\n\n  Additional callbacks and methods:\n\n  - `onBeforeUploadChunk(item, chunk)` - before each chunk request; change `item.url`, `item.method` or `item.headers` (an array of `{ name, value }`) here to change that request.\n  - `onSuccessChunk(item, chunk, response, status, headers)` - after each successful chunk. Change `item.url`, `item.method` or `item.headers` here to target the next chunk, e.g. with an upload id from your server. They stay changed, so reset them before uploading the item from the start again; `setOptions` also resets `item.url` and `item.method` for every queued item.\n  - `onErrorChunk(item, chunk, response, status, headers)` - when a chunk fails; the item then fails as usual (`onErrorItem`, `onCompleteItem`) with the same response and no more chunks are sent.\n  - `getChunk(item)` - the chunk being sent, or the one `resumeItem` will send next; `undefined` before the item starts and once the file is uploaded.\n  - `resumeItem(item)` - uploads a failed or cancelled item again, starting from the chunk that did not complete (an item that never started or was uploaded starts from the beginning). It is ignored while the item is uploading, so call it from `onErrorItem` or later, not from `onErrorChunk`, and keep `removeAfterUpload` off so failed items stay in the queue.\n  - `resumeAll()` - like `uploadAll()`, but it also includes failed items (`uploadAll()` skips them), and failed or cancelled items continue from the chunk that did not complete. `item.upload()` and `uploadAll()` always start an item from the first chunk.\n\n  A chunk is `{ index, total, start, end, blob }`: `index` counts from 0 to `total - 1`, and `start` / `end` are byte offsets in the file, `end` exclusive.\n\n  A failed or cancelled item keeps the progress of the chunk it will resume from, i.e. of the chunks the server has confirmed, so a paused upload does not drop back to 0%. When a chunk fails partway, the progress steps back to the start of that chunk without an `onProgressItem` call, so read `item.progress` after `onErrorItem` / `onCancelItem` rather than keeping the last reported value. `uploader.progress` counts such items with the progress they keep.\n\n  A typical setup sends the first chunk to an endpoint that answers with an upload id, sends the rest of the file there, and retries transient failures from the failed chunk with backoff. Assign each callback once, and set `item.url` and `item.method` in `onBeforeUploadChunk` from your own state, so a resumed, restarted or `setOptions`-reset item always goes to the right place:\n\n  ```typescript\n  const sessions = new WeakMap\u003cFileItem, string\u003e();\n  const retries = new WeakMap\u003cFileItem, number\u003e();\n\n  uploader.onBeforeUploadChunk = (item, chunk) =\u003e {\n    const id = chunk.index \u003e 0 ? sessions.get(item) : undefined;\n    item.url = id ? `/sessions/${ id }` : '/sessions';\n    item.method = id ? 'PUT' : 'POST';\n  };\n\n  uploader.onSuccessChunk = (item, chunk, response) =\u003e {\n    retries.delete(item);\n    if (chunk.index === 0) {\n      sessions.set(item, JSON.parse(response).uploadId);\n    }\n  };\n\n  uploader.onErrorItem = (item, response, status) =\u003e {\n    const count = retries.get(item) ?? 0;\n    const transient = status === 0 || status === 408 || status === 429 || status \u003e= 500;\n    if (transient \u0026\u0026 count \u003c 5) {\n      retries.set(item, count + 1);\n      setTimeout(() =\u003e uploader.resumeItem(item), 1000 * 2 ** count);\n    }\n  };\n  ```\n\n  `WeakMap`s drop the entries of items removed from the queue, and a restarted upload replaces the old upload id when its first chunk succeeds.\n\n  The retry budget resets after every successful chunk, so a large file is not given up on after a few unrelated failures. Status `0` means no response: a dropped connection or an offline browser, but also a request blocked by CORS or a callback that threw, which fail the same way on every attempt until the budget runs out. If the user can pause an item, clear its pending retry timer at that point, otherwise the timer resumes it; `resumeItem` ignores items removed from the queue. When `navigator.onLine` is false, wait for the window `online` event before resuming instead of spending the retry budget; a request that was already sent can still complete while the browser is offline.\n\n  Each attempt reports the item again (`onErrorItem`, `onCompleteItem`, and `onCompleteAll` when no other item is waiting) and queues the item behind items that are already waiting. Because `onCompleteAll` also fires while a retry is pending, check the queue (e.g. `uploader.queue.every(item =\u003e item.isSuccess)`) before showing the upload as finished.\n\n  `onBuildItemForm` and the `response` emitter fire once per chunk, `onBuildItemForm` after `onBeforeUploadChunk` and only for multipart requests; the other item callbacks fire once per file, and `onSuccessItem` / `onErrorItem` receive the response of the last chunk sent. Chunk requests carry only the chunk fields, so if your server needs to tell files apart, use an upload id as above, add a field in `onBuildItemForm`, or, with `disableMultipart`, add a header in `onBeforeUploadChunk`.\n\n  **Uploading parts directly to storage** (e.g. S3 multipart uploads with presigned URLs): set `disableMultipart: true` so each chunk is sent as the request body, and set `item.url` and `item.method` (`PUT`) for each chunk in `onBeforeUploadChunk`. Keep in mind:\n\n  - `onBeforeUploadChunk` must set the URL synchronously; a returned promise is not awaited. Get the part URLs before the upload starts (e.g. when the upload is created on your server), and when one has expired (usually status `403`), get a new one in `onErrorItem` and call `resumeItem` to resend that part.\n  - Read each part's `ETag` in `onSuccessChunk` from `headers['etag']` (header names are lower-case). The storage service must list `ETag` in `Access-Control-Expose-Headers`, otherwise the browser hides it.\n  - Set `item.withCredentials = false` (e.g. in `onAfterAddingFile`), since storage services usually do not allow credentials. Otherwise the request fails with status `0`.\n  - Each part is sent with a `Content-Range` header, which makes the browser send a CORS preflight, so the storage CORS rules must allow `PUT` and the `Content-Range` header. The request's `Content-Type` is the file's type, which matters if it is part of the signature.\n  - After the last part, complete the upload on your server from `onSuccessItem` with the collected ETags.\n\n  `item.cancel()` stops the remaining chunks. From `onSuccessChunk` of the last chunk it has no effect (the file is uploaded), and from `onErrorChunk` the item stays failed.\n\n  A chunk callback that throws fails the item with status `0`, without calling `onErrorChunk`, and the error is rethrown, except before the first request, where it is handled like an error in `onBeforeUploadItem`. Resuming resends that chunk, so servers should accept a repeated chunk.\n\n# Troubleshooting\n\nPlease follow these guidelines when reporting bugs and feature requests:\n\n1. Use [GitHub Issues](https://github.com/valor-software/ng2-file-upload/issues) board to report bugs and feature requests (not our email address)\n2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.\n\nThanks for understanding!\n\n### License\n\nThe MIT License (see the [LICENSE](https://github.com/valor-software/ng2-file-upload/blob/development/LICENSE) file for the full text)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalor-software%2Fng2-file-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalor-software%2Fng2-file-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalor-software%2Fng2-file-upload/lists"}