Angular package for to customize input type file in both reactive and template driven forms

Usage no npm install needed!

<script type="module">
  import ahmedtamseerTnFileUpload from 'https://cdn.skypack.dev/@ahmedtamseer/tn-file-upload';



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.


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.

3. Setup @NgModule for the TnFileUploadModule

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';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

4. Use it in your component

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

  selector: 'app-root',
  template: `
  <form [formGroup]="demoForm">
        <label for="file">File</label>
         <tn-file-upload [(ngModel)]="ngModalExample" #name="ngModel"></tn-file-upload>
export class MyApp {

  demoForm: FormGroup;

  constructor() {
      this.demoForm = new FormGroup({
      file: new FormControl('')

5. Run your app locally

ng serve


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