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 {;}
