How to check MIME type before upload in Angular Uploader

31 Aug 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.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 the Angular File Upload feature tour page for its groundbreaking features. Explore our Angular File Upload example to understand how to browse and select the files which you want to upload to the server.