How to show file extensions in JavaScript File Manager?

This article explains how to show file extensions for files in the top-right corner of the Syncfusion JavaScript File Manager control. In Syncfusion’s File Manager control, file extensions can be displayed at the top-right of each file item within the File Manager. This enhancement improves the user experience by clearly displaying file extensions directly on the file icons in the large Icons view of the File Manager control.

Setup Syncfusion File Manager

Refer Syncfusion File Manager Getting Started to get started with File Manager

Initialize FileManager

Add the following code to your TypeScript file (e.g., index.ts) to initialize the File Manager control with the necessary settings.

let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
let fileObject: FileManager = new FileManager({
  ajaxSettings: {
      url: hostUrl + 'api/FileManager/FileOperations',
      getImageUrl: hostUrl + 'api/FileManager/GetImage',
      uploadUrl: hostUrl + 'api/FileManager/Upload',
      downloadUrl: hostUrl + 'api/FileManager/Download'
  },
  view: 'LargeIcons',
  showFileExtension:false
}); 

Add fileLoad Event

Add a fileLoad event to the File Manager control. Within this event, verify if the file is displayed in the LargeIconsView and confirm that it is a file (not a folder). If both criteria are met, retrieve the file extension from the file type, create a new span element, assign the file extension as the text content of the span, and apply the file-extension class to it. Lastly, prepend the span to the content of the file item.

fileLoad: function (args){
           if (args.module === "LargeIconsView" && args.fileDetails.isFile) {
               // Extract file extension from args.fileDetails.type
               var fileExtension = args.fileDetails.type.split('.').pop();

               // Create a new <span> element
               var newSpan = createElement('span');
               newSpan.textContent = fileExtension; // Set text content of the new span
               newSpan.className = 'file-extension'; 
               var eTextContent = args.element.querySelector('.e-text-content');

               if (eTextContent) {
                   eTextContent.insertBefore(newSpan, eTextContent.firstChild);
               }
           }
       } 

Add CSS for Styling

The CSS below is used to style file extensions in the large icons view of the File Manager control.

#filemanager .file-extension {
   background-color: black;
   color: white;
   font-size: smaller;
   padding: 1px; 
   text-transform: uppercase;
   line-height: 1;
   float: right;
} 

Refer to the working sample for additional details and implementation: Sample

Customization output