TnFileUpload
The Angular library for input type file.
ng add @ahmedtamseer/tn-file-upload
What is TnFileUpload?
TnFileUpload is angular package for form element (input:file). This package gives new look and good user experience both reactive and template driven forms. This package can return both type File or Base64 value.
Quickstart
1. Create a new project
npm install -g @angular/cli
ng new <project-name>
cd <project-name>
The Angular CLI's new
command will set up the latest Angular build in a new project structure.
2. Install Angular Form Error
ng add @ahmedtamseer/tn-file-upload
Now that you have a new project setup, install Angular Form Error from npm.
@NgModule
for the TnFileUploadModule
3. Setup Open /src/app/app.module.ts
, inject the TnFileUploadModule.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { TnFileUploadModule } from '@ahmedtamseer/tn-file-upload';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
TnFileUploadModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4. Use it in your component
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
<form [formGroup]="demoForm">
<div>
<label for="file">File</label>
<tn-file-upload [(ngModel)]="ngModalExample" #name="ngModel"></tn-file-upload>
</div>
</form>
`
})
export class MyApp {
demoForm: FormGroup;
constructor() {
this.demoForm = new FormGroup({
file: new FormControl('')
});
}
}
5. Run your app locally
ng serve
Resources
Stackblitz Template - A demo app which shows how to use package for Reactive and Template Driven form.
Developer Guide
attribute | purpose |
---|---|
[multiple] |
Boolean. A Boolean which, if present, indicates that the user may choose more than one file. Default false
|
[maxFileCount] |
Number. Maximum number of files a user can select. This applies only when [multiple]="true" . Default 10
|
[restrictSize] |
Number. Maximum size of file/s. This value is in MB. Default 5
|
[accept] |
String. One or more unique file type specifiers describing file types to allow. KnowMore Default */*
|
[displayFile] |
Boolean. Whether or not to display (preview) file after selection. Default true
|
[displayName] |
Boolean. Whether or not to display file name after selection. Default true
|
[displaySize] |
Boolean. Whether or not to display file size after selection. Default true
|
[showCustomRemoveButton] |
Boolean. Whether or not allow user to remove a file. Default true
|
[hidden] |
Boolean. This hides input element. Default false
|
[isDisabled] |
Boolean. Disabled property of html. Default false
|
[base64] |
Boolean. Setting this to true will return base64 value along with original file. Default false
|
[class] |
String. List of classes separated by space. Ex:- [class]="'bg-danger text-white'"
|
Base64 return value
{
url: string;
name?: string;
size?: number;
status?: string;
type?: string;
ext?: string;
preExt?: string;
file?: File
}