Check the MIME type of file before uploading in Angular Uploader component

26 Feb 20262 minutes to read

By using the uploading event, you can retrieve the file MIME type before the upload process begins on the server.
In the following example, the file MIME type is displayed in an alert dialog before the file starts uploading.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
imports: [
         UploaderModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './default.html',
    styleUrls: ['./index.css']
})

export class AppComponent {
    public autoUpload: boolean = false;
    public path: Object = {
        saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
    };
    public onBeforeUpload: EmitType<Object> = (args: any) => {
        // get the file MIME type
        alert("File MIME type is: " + args.fileData.rawFile.type)
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also explore Angular File Upload feature tour page for its groundbreaking features. You can also explore our Angular File Upload example to understand how to browse the files which you want to upload to the server.