I'm currently facing an issue where I need to display different icons next to documents based on their file types using Angular framework. However, no matter what file type I set as the fileExtension variable (e.g., txt or jpg), it always defaults to returning file-text as the iconType.
public getIcon(document: Document): string {
let mimeType = document.fileType;
let fileExtension = mimeType.split('.')[1];
let iconType = '';
switch (fileExtension) {
case fileExtension === 'jpeg' || 'gif' || 'png' || 'svg' || 'xml' || 'bmp' || 'jpg'|| 'tif' || 'tiff':
iconType = 'picture';
break;
case fileExtension === 'avi' || 'mpg' || 'wmv' || 'mpeg' || 'mp4' || 'mov':
iconType = 'video-folder';
break;
case fileExtension === 'cda' || 'mp3' || 'mpa' || 'wav' || 'wma':
iconType = 'volume';
break;
case fileExtension === 'pdf' || 'ai' || 'pptx':
iconType = 'article';
break;
default:
//includes: .docx , .odt, .rtf, .txt, .xml, .xps
iconType = 'file-text';
break;
}
console.log(iconType);
return iconType;
}
Despite setting fileExtension to be "jpg", it always returns the default icon-type of "file-text" upon debugging. Debugging with breakpoints can be seen here.
I also attempted a simple if-else loop approach, but it still returned the first if case value for all scenarios (e.g.: picture even when fileExtension is "txt"):
if (fileExtension === 'jpeg' || 'gif' || 'png' || 'svg' || 'xml' || 'bmp' || 'jpg' || 'tif' || 'tiff') {
iconType = 'picture';
} else if (fileExtension === 'avi' || 'mpg' || 'wmv' || 'mpeg' || 'mp4' || 'mov') {
iconType = 'video-folder';
} else if (fileExtension === 'cda' || 'mp3' || 'mpa' || 'wav' || 'wma') {
iconType = 'volume';
} else if (fileExtension === 'pdf' || 'ai' || 'pptx') {
iconType = 'article';
} else {
iconType = 'file-text';
}
console.log(iconType);
return iconType;
I am quite perplexed as to why it does not enter the correct case. Any assistance would be highly appreciated!