{"id":13808508,"url":"https://github.com/pIvan/file-upload","last_synced_at":"2025-05-14T02:31:58.543Z","repository":{"id":33118412,"uuid":"140899203","full_name":"pIvan/file-upload","owner":"pIvan","description":"drag and drop file component","archived":false,"fork":false,"pushed_at":"2024-06-12T12:31:58.000Z","size":9008,"stargazers_count":87,"open_issues_count":8,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-07T03:17:14.610Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/pIvan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2018-07-13T22:50:41.000Z","updated_at":"2024-09-12T16:58:21.000Z","dependencies_parsed_at":"2024-08-04T01:09:07.809Z","dependency_job_id":"034df2b1-7bd2-4477-9476-96b3a309b20f","html_url":"https://github.com/pIvan/file-upload","commit_stats":{"total_commits":115,"total_committers":5,"mean_commits":23.0,"dds":0.04347826086956519,"last_synced_commit":"891c45a9a9ef23c722db55b1a68275dd024ccbac"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pIvan%2Ffile-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pIvan%2Ffile-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pIvan%2Ffile-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pIvan%2Ffile-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pIvan","download_url":"https://codeload.github.com/pIvan/file-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224873301,"owners_count":17384078,"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":[],"created_at":"2024-08-04T01:01:44.599Z","updated_at":"2024-11-19T00:30:47.921Z","avatar_url":"https://github.com/pIvan.png","language":"TypeScript","readme":"# @iplab/ngx-file-upload\n\u003e Angular module used for file upload.\n\n\n\n[![npm version](https://badge.fury.io/js/%40iplab%2Fngx-file-upload.svg)](https://www.npmjs.com/package/@iplab/ngx-file-upload)\n[![Build Status](https://travis-ci.com/pIvan/file-upload.svg?branch=master)](https://travis-ci.org/pIvan/file-upload)\n\n\n\n# Demo\nmore detailed instructions can be found\n[here](https://pivan.github.io/file-upload/)\n\n\n# Tested with\n\n- Firefox (latest)\n- Chrome (latest)\n- Chromium (latest)\n- Edge\n\n# Compatible with\n\n- Angular 17 (@iplab/ngx-file-upload@version \u003e= 17.0.0)\n- Angular 16 (@iplab/ngx-file-upload@version \u003e= 16.0.0)\n- Angular 15 (@iplab/ngx-file-upload@version \u003e= 15.0.0)\n- Angular 14 (@iplab/ngx-file-upload@version \u003e= 14.0.0)\n- Angular 13 (@iplab/ngx-file-upload@version \u003e= 13.0.0)\n- Angular 12 (@iplab/ngx-file-upload@version \u003e= 12.0.0)\n- Angular 11 (@iplab/ngx-file-upload@version \u003e= 11.0.0)\n```shell\nwith older version of Angular use @iplab/ngx-file-upload@version \u003c 4.0.0\n```\n\n## Installing / Getting started\n\n\n```shell\nnpm install @iplab/ngx-file-upload\n```\n\nUse the following snippet inside your app module: \n```shell\nimport { ReactiveFormsModule, FormsModule  } from '@angular/forms';\nimport { FileUploadModule } from '@iplab/ngx-file-upload';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n...\n...\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        ReactiveFormsModule,\n        FormsModule,\n        FileUploadModule,\n        BrowserAnimationsModule // or use NoopAnimationsModule\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nUse the following snippet inside your component: \n```shell\nimport { FileUploadControl, FileUploadValidators } from '@iplab/ngx-file-upload';\n\n\n@Component({\n    selector: `app-root`,\n    template: `\u003cfile-upload [control]=\"fileUploadControl\"\u003e\u003c/file-upload\u003e`\n})\nexport class AppComponent {\n\n    public fileUploadControl = new FileUploadControl(null, FileUploadValidators.filesLimit(2));\n\n    constructor() {\n    }\n}\n```\n\nWith angular reactive form you can use the following snippet: \n```shell\nimport { FileUploadValidators } from '@iplab/ngx-file-upload';\n\n\n@Component({\n    selector: `app-root`,\n    template: `\n    \u003cform [formGroup]=\"demoForm\"\u003e\n        \u003cfile-upload formControlName=\"files\"\u003e\u003c/file-upload\u003e\n    \u003c/form\u003e`\n})\nexport class AppComponent {\n\n    private filesControl = new FormControl(null, FileUploadValidators.filesLimit(2));\n  \n    public demoForm = new FormGroup({\n        files: this.filesControl\n    });\n\n    constructor() {\n    }\n}\n```\n\n\nWith angular template driven form you can use the following snippet: \n```shell\n@Component({\n    selector: `app-root`,\n    template: `\n    \u003cform #demoForm=\"ngForm\"\u003e\n        \u003cfile-upload [(ngModel)]=\"uploadedFiles\" name=\"files\" fileslimit=\"2\"\u003e\u003c/file-upload\u003e\n    \u003c/form\u003e`\n})\nexport class AppComponent {\n\n    public uploadedFiles: Array\u003cFile\u003e = [];\n}\n```\n\n## Developing\n\n### Built With: \n- Angular\n- RxJS\n\n### Setting up Dev\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.\n\n[Angular CLI](https://github.com/angular/angular-cli) must be installed before building @iplab/ngx-file-upload project.\n\n```shell\nnpm install -g @angular/cli\n```\n\n```shell\ngit clone https://github.com/pIvan/file-upload.git\ncd file-upload/\nnpm install\nnpm run start\n```\nOpen \"http://localhost:4200\" in browser\n\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [link to tags on this repository](https://github.com/pIvan/file-upload/tags).\n\n## Tests\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.\n\n\n[Angular CLI](https://github.com/angular/angular-cli) must be installed before testing @iplab/ngx-file-upload project.\n\n```shell\nnpm install -g @angular/cli\n```\n\n\n```shell\ngit clone https://github.com/pIvan/file-upload.git\ncd file-upload/\nnpm install\nnpm run test\n```\n\n## Contributing\n\n### Want to help?\n\nWant to file a bug, contribute some code, or improve documentation? Excellent! Read up on our [contributing guide](https://github.com/pIvan/file-upload/blob/master/CONTRIBUTING.md) and then check out one of our [issues](https://github.com/pIvan/file-upload/issues).\n\n\n\n## Licensing\n\n@iplab/ngx-file-upload is freely distributable under the terms of the [MIT license](https://github.com/pIvan/file-upload/blob/master/LICENSE).","funding_links":[],"categories":["Third Party Components"],"sub_categories":["File Upload"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FpIvan%2Ffile-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FpIvan%2Ffile-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FpIvan%2Ffile-upload/lists"}