pIvan
@iplab/ngx-file-upload
Angular module used for file upload.
Demo
more detailed instructions can be found here
Tested with
- Firefox (latest)
- Chrome (latest)
- Chromium (latest)
- Edge
Compatible with
- Angular 20 (@iplab/ngx-file-upload@version >= 20.0.0)
- Angular 19 (@iplab/ngx-file-upload@version >= 19.0.0)
- Angular 18 (@iplab/ngx-file-upload@version >= 18.0.0)
- 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)
with older version of Angular use @iplab/ngx-file-upload@version < 4.0.0
Installing / Getting started
npm install @iplab/ngx-file-uploadUse the following snippet inside your app module:
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FileUploadModule } from '@iplab/ngx-file-upload';
...
...
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
FileUploadModule,
],
bootstrap: [AppComponent]
})
export class AppModule {}Use the following snippet inside your component:
import { FileUploadControl, FileUploadValidators } from '@iplab/ngx-file-upload';
@Component({
selector: `app-root`,
template: `<file-upload [control]="fileUploadControl"></file-upload>`
})
export class AppComponent {
public fileUploadControl = new FileUploadControl(null, FileUploadValidators.filesLimit(2));
constructor() {
}
}With angular reactive form you can use the following snippet:
import { FileUploadValidators } from '@iplab/ngx-file-upload';
@Component({
selector: `app-root`,
template: `
<form [formGroup]="demoForm">
<file-upload formControlName="files"></file-upload>
</form>`
})
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:
@Component({
selector: `app-root`,
template: `
<form #demoForm="ngForm">
<file-upload [(ngModel)]="uploadedFiles" name="files" fileslimit="2"></file-upload>
</form>`
})
export class AppComponent {
public uploadedFiles: Array<File> = [];
}Developing
Built With:
- Angular
- RxJS
Setting up Dev
This project was generated with Angular CLI version 16.0.0.
Angular CLI must be installed before building @iplab/ngx-file-upload project.
npm install -g @angular/cligit clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm run startOpen "http://localhost:4200" in browser
Versioning
We use SemVer for versioning. For the versions available, see the link to tags on this repository.
Tests
This project was generated with Angular CLI version 16.0.0.
Angular CLI must be installed before testing @iplab/ngx-file-upload project.
npm install -g @angular/cligit clone https://github.com/pIvan/file-upload.git
cd file-upload/
npm install
npm run testContributing
Want to help?
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.
Licensing
@iplab/ngx-file-upload is freely distributable under the terms of the MIT license.