How to show file extensions for files in the top right corner of the Syncfusion JavaScript FileManager control?

This guide will help you integrate Syncfusion’s FileManager control to display file extensions at the top right of each file item within the FileManager. This enhancement improves the user experience by clearly displaying file extensions directly on the file icons in the large Icons view of the FileManager control.

Setup Syncfusion FileManager

Refer Syncfusion FileManager Getting Started to get started with FileManager

Initialize FileManager

Add the following code to your TypeScript file (ex: index.ts) to initialize the FileManager 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 FileManager 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 FileManager control.

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

Sample: https://stackblitz.com/edit/f87yud-c5pyj9?file=index.ts

Customization output