Get File Type Extension Using Pipe In Angular

In this blog, I’m creating the custom pipe for the file type extension in angular. when we are uploading the file then show the front-end side filename, file extension, and file size.

Let’s get started,

The most basic of pipe transform a single value, into a new value. This value can be anything you like, a string, array, object, etc.

For the demonstration of this, we’ll be converting array fileType into more human-readable formats, such as “application/pdf” instead of something like “pdf”. But first, let’s start with the basics – how we’ll use the Pipe.

Using Custom Pipes

Let’s assume an image was just uploaded via a drag and drop zone – and we’re getting some of the information from it. A simplified file object we’ll work with:

export class FileComponent {
  file = { name: 'sample.pdf', size: 2120109, type: 'application/pdf' };
}

Properties’ names and sizes are not included in this code. what we’re interested in to learn about Pipes – however, type is the one we’d like.

Let’s put a quick example together for how we’ll define the usage of our pipe (which will convert the array into fileType extension):

<div>
  <p>{{ file.name }}</p>
  <p>{{ file.type | fileExtension }}</p>
</div>

Creating a Custom Pipe

To create a Pipe definition, we need to first create a class (which would live in its file). We’ll call this our FileExtensionPipe, as we are essentially transforming an array value into a string value that’s more human-readable:

ng g p FileExtension

So, we need to name the pipe “file extension”. This is done via another TypeScript decorator, the @Pipe:

import { Pipe } from '@angular/core';

@Pipe({ name: 'fileExtension' })
export class FileExtensionPipe {}

All we need to do is supply a name property that corresponds to our template code name as well (as you’d imagine). Don’t forget to register the Pipe in your @NgModule as well, under-declarations:

// ...
import { FileExtensionPipe } from './fileExtension.pipe';

@NgModule({
  declarations: [
    //...
    FileExtensionPipe ,
  ],
})
export class AppModule {}

*Note: Pipes tend to act as more “utility” classes, so you’ll likely want to register a Pipe inside a shared module. If you want to use your custom Pipe elsewhere, simply use “exports: [YourPipe] ” on the @NgModule.

Pipe and PipeTransform

Once we’ve got our class set up, registered, and the @Pipe decorator added – the next step is implementing the PipeTransform interface:

import { Pipe } from '@angular/core';

@Pipe({ name: 'fileExtension' }) 
export class FileExtensionPipe implements PipeTransform {
    transform(value: any, ...args: any[]): any;
}

Pipe Transform Value

As we’re using our Pipe in interpolation, this is the magic of how we are given arguments in a Pipe.

{{ file.type | fileExtension }}

Firstly, We are adding all file type Extension in enum so we can get and return this value.

/**
 * The enum for file type name.
 */export enum FileTypeName {
  /**
   * The value of xls filetype.
   */  xls = 'application/vnd.ms-excel',
  /**
   * The value of xlsx filetype.
   */  xlsx = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  /**
   * The value of abw filetype.
   */  abw = 'application/x-abiword',
  /**
   * The value of arc filetype.
   */  arc = 'application/x-freearc',
  /**
   * The value of avi filetype.
   */  avi = 'video/x-msvideo',
  /**
   * The value of azw filetype.
   */  azw = 'application/vnd.amazon.ebook',
  /**
   * The value of bin filetype.
   */  bin = 'application/octet-stream',
  /**
   * The value of bz filetype.
   */  bz = 'application/x-bzip',
  /**
   * The value of bz2 filetype.
   */  bz2 = 'application/x-bzip2',
  /**
   * The value of csh filetype.
   */  csh = 'application/x-csh',
  /**
   * The value of docx filetype.
   */  docx = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  /**
   * The value of eot filetype.
   */  eot = 'application/vnd.ms-fontobject',
  /**
   * The value of epub filetype.
   */  epub = 'application/epub+zip',
  /**
   * The value of ico filetype.
   */  ico = 'image/vnd.microsoft.icon',
  /**
   * The value of jar filetype.
   */  jar = 'application/java-archive',
  /**
   * The value of jsonId filetype.
   */  jsonId = 'application/ld+json',
  /**
   * The value of mid filetype.
   */  mid = 'audio/x-midi',
  /**
   * The value of mpkg filetype.
   */  mpkg = 'application/vnd.apple.installer+xml',
  /**
   * The value of odp filetype.
   */  odp = 'application/vnd.oasis.opendocument.presentation',
  /**
   * The value of ods filetype.
   */  ods = 'application/vnd.oasis.opendocument.spreadsheet',
  /**
   * The value of odt filetype.
   */  odt = 'application/vnd.oasis.opendocument.text',
  /**
   * The value of php filetype.
   */  php = 'application/x-httpd-php',
  /**
   * The value of ppt filetype.
   */  ppt = 'application/vnd.ms-powerpoint',
  /**
   * The value of pptx filetype.
   */  pptx = 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  /**
   * The value of rar filetype.
   */  rar = 'application/vnd.rar',
  /**
   * The value of sh filetype.
   */  sh = 'application/x-sh',
  /**
   * The value of svg filetype.
   */  svg = 'image/svg+xml',
  /**
   * The value of swf filetype.
   */  swf = 'application/x-shockwave-flash',
  /**
   * The value of tar filetype.
   */  tar = 'application/x-tar',
  /**
   * The value of vsd filetype.
   */  vsd = 'application/vnd.visio',
  /**
   * The value of xhtml filetype.
   */  xhtml = 'application/xhtml+xml',
  /**
   * The value of xul filetype.
   */  xul = 'application/vnd.mozilla.xul+xml',
  /**
   * The value of x7z filetype.
   */  x7z = 'application/x-7z-compressed'
}

The “file. type” variable is passed straight through to our transform method, as the first argument. We can call this our size and type it appropriately:

export class FileExtensionPipe implements PipeTransform {
   transform(val: string, params?: string[]): string {}
}

From here, we can implement the logic to convert the string value into a more readable format of the file extension.

export class FileExtensionPipe implements PipeTransform {
  transform(val: string, params?: string[]): string {
     switch (val) {
      case FileTypeName.xlsx:
        return val = 'xlsx';
        break;
      case FileTypeName.xls:
        return val = 'xls';
        break;
      case FileTypeName.abw:
        return val = 'abw';
        break;
      case FileTypeName.arc:
        return val = 'arc';
        break;
      case FileTypeName.avi:
        return val = 'avi';
        break;
      case FileTypeName.azw:
        return val = 'azw';
        break;
      case FileTypeName.bin:
        return val = 'bin';
        break;
      case FileTypeName.bz:
        return val = 'bz';
        break;
      case FileTypeName.bz2:
        return val = 'bz2';
        break;
      case FileTypeName.csh:
        return val = 'csh';
        break;
      case FileTypeName.docx:
        return val = 'docx';
        break;
      case FileTypeName.eot:
        return val = 'eot';
        break;
      case FileTypeName.epub:
        return val = 'epub';
        break;
      case FileTypeName.ico:
        return val = 'ico';
        break;
      case FileTypeName.jar:
        return val = 'jar';
        break;
      case FileTypeName.jsonId:
        return val = 'jsonId';
        break;
      case FileTypeName.mid:
        return val = 'mid';
        break;
      case FileTypeName.mpkg:
        return val = 'mpkg';
        break;
      case FileTypeName.odp:
        return val = 'odp';
        break;
      case FileTypeName.ods:
        return val = 'ods';
        break;
      case FileTypeName.odt:
        return val = 'odt';
        break;
      case FileTypeName.php:
        return val = 'php';
        break;
      case FileTypeName.ppt:
        return val = 'ppt';
        break;
      case FileTypeName.pptx:
        return val = 'pptx';
        break;
      case FileTypeName.rar:
        return val = 'rar';
        break;
      case FileTypeName.sh:
        return val = 'sh';
        break;
      case FileTypeName.svg:
        return val = 'svg';
        break;
      case FileTypeName.swf:
        return val = 'swf';
        break;
      case FileTypeName.tar:
        return val = 'tar';
        break;
      case FileTypeName.vsd:
        return val = 'vsd';
        break;
      case FileTypeName.xhtml:
        return val = 'xhtml';
        break;
      case FileTypeName.xul:
        return val = 'xul';
        break;
      case FileTypeName.x7z:
        return val = '7z';
        break;
      default:
        return val.split('/')[1];
        break;
    }
  } 
}

Html file:

<!-- pdf -->
{{ file.type | fileExtension }}

Now, We can demonstrate how to add your custom arguments to custom Pipes.

That’s it.

I hope you guys understand how I can do this. Let me know if you face any difficulties.

You can watch my previous blog here.

Happy Coding {;}