Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pIvan/file-upload
drag and drop file component
https://github.com/pIvan/file-upload
Last synced: 3 months ago
JSON representation
drag and drop file component
- Host: GitHub
- URL: https://github.com/pIvan/file-upload
- Owner: pIvan
- License: mit
- Created: 2018-07-13T22:50:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-12T12:31:58.000Z (5 months ago)
- Last Synced: 2024-07-12T20:18:01.456Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 8.59 MB
- Stars: 87
- Watchers: 4
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - file-upload - Angular module used for file upload. (Table of contents / Third Party Components)
- fucking-awesome-angular - file-upload - Angular module used for file upload. (Table of contents / Third Party Components)
- fucking-awesome-angular - file-upload - Angular module used for file upload. (Table of contents / Third Party Components)
README
# @iplab/ngx-file-upload
> Angular module used for file upload.
[](https://www.npmjs.com/package/@iplab/ngx-file-upload)
[](https://travis-ci.org/pIvan/file-upload)
# Demo
more detailed instructions can be found
[here](https://pivan.github.io/file-upload/)
# Tested with
- Firefox (latest)
- Chrome (latest)
- Chromium (latest)
- Edge
# Compatible with
- Angular 17 (@iplab/ngx-file-upload@version >= 17.0.0)
- Angular 16 (@iplab/ngx-file-upload@version >= 16.0.0)
- Angular 15 (@iplab/ngx-file-upload@version >= 15.0.0)
- Angular 14 (@iplab/ngx-file-upload@version >= 14.0.0)
- Angular 13 (@iplab/ngx-file-upload@version >= 13.0.0)
- Angular 12 (@iplab/ngx-file-upload@version >= 12.0.0)
- Angular 11 (@iplab/ngx-file-upload@version >= 11.0.0)
```shell
with older version of Angular use @iplab/ngx-file-upload@version < 4.0.0
```
## Installing / Getting started
```shell
npm install @iplab/ngx-file-upload
```
Use the following snippet inside your app module:
```shell
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FileUploadModule } from '@iplab/ngx-file-upload';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
...
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
FileUploadModule,
BrowserAnimationsModule // or use NoopAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
Use the following snippet inside your component:
```shell
import { FileUploadControl, FileUploadValidators } from '@iplab/ngx-file-upload';
@Component({
selector: `app-root`,
template: ``
})
export class AppComponent {
public fileUploadControl = new FileUploadControl(null, FileUploadValidators.filesLimit(2));
constructor() {
}
}
```
With angular reactive form you can use the following snippet:
```shell
import { FileUploadValidators } from '@iplab/ngx-file-upload';
@Component({
selector: `app-root`,
template: `
`
})
export class AppComponent {
private filesControl = new FormControl(null, FileUploadValidators.filesLimit(2));
public demoForm = new FormGroup({
files: this.filesControl
});
constructor() {
}
}
```
With angular template driven form you can use the following snippet:
```shell
@Component({
selector: `app-root`,
template: `
`
})
export class AppComponent {
public uploadedFiles: Array = [];
}
```
## Developing
### Built With:
- Angular
- RxJS
### Setting up Dev
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
[Angular CLI](https://github.com/angular/angular-cli) must be installed before building @iplab/ngx-file-upload project.
```shell
npm install -g @angular/cli
```
```shell
git clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm run start
```
Open "http://localhost:4200" in browser
## Versioning
We 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).
## Tests
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
[Angular CLI](https://github.com/angular/angular-cli) must be installed before testing @iplab/ngx-file-upload project.
```shell
npm install -g @angular/cli
```
```shell
git clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm run test
```
## Contributing
### Want to help?
Want 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).
## Licensing
@iplab/ngx-file-upload is freely distributable under the terms of the [MIT license](https://github.com/pIvan/file-upload/blob/master/LICENSE).