How to get Extension of image in angular?

Question

Here I check image Extension using below code. imageName.split(".").pop() using split and pop I got image extension, but after this I have to check this extension is matched with this for that I have to check with multiple or condition so it is make process of code is slow so Is there any possiblity to make code reduced and reduce OR condtions.

Ex. If jpEg extension image that time only with one condition (extn == jpeg) is check all type small,capital extension ('jpeg','Jpeg','jPeg','jpEg','jpeG','JPeg','JpEg','JpeG','jPEg','jPeG','jpEG','jPEG','JPeG','JPEg','JpEG','JPEG') and make less or conditions

previewFiles(imageName){
 console.log(imagename);  // 125.jpEg

 var extn = imageName.split(".").pop();

   console.log(extn);  // jpEg

  if((extn == 'pdf') || (extn == 'PDF') || (extn == 'pdF') || (extn == 'pDf') ||
     (extn == 'pDF') || (extn == 'PDf') || (extn == 'PdF') || (extn == 'Pdf') ||
     (extn == 'jpg') || (extn == 'JPG') || (extn == 'jpG') || (extn == 'jPg') ||
     (extn == 'jPG') || (extn == 'JPg') || (extn == 'JpG') || (extn == 'Jpg') ||
     (extn == 'gif') || (extn == 'GIF') || (extn == 'giF') || (extn == 'gIf') ||
     (extn == 'gIF') || (extn == 'GIf') || (extn == 'GiF') || (extn == 'Gif') ||
     (extn == 'png') || (extn == 'PNG') || (extn == 'pnG') || (extn == 'pNg') ||
     (extn == 'pNG') || (extn == 'PNg') || (extn == 'PnG') || (extn == 'Png') ||
     (extn == 'tif') || (extn == 'TIF') || (extn == 'tiF') || (extn == 'tIf') ||
     (extn == 'tIF') || (extn == 'TIf') || (extn == 'TiF') || (extn == 'Tif') ||
     (extn == 'jpeg') || (extn == 'Jpeg') || (extn == 'jPeg') || (extn == 'jpEg') ||
     (extn == 'jpeG') || (extn == 'JPeg') || (extn == 'JpEg') || (extn == 'JpeG') ||
     (extn == 'jPEg') || (extn == 'jPeG' ) || (extn == 'jpEG' ) || (extn == 'jPEG' ) ||
     (extn == 'JPeG' ) || (extn == 'JPEg') || (extn == 'JpEG') || (extn == 'JPEG') ||
     (extn == 'tiff') || (extn == 'Tiff' ) || (extn == 'tIff') || (extn == 'tiFf' ) ||
    (extn == 'tifF') || (extn == 'TIff') || (extn == 'TiFf') || (extn == 'TifF') ||
     (extn == 'tIFf') || (extn == 'tIfF') || (extn == 'tiFF') || (extn == 'tIFF') ||
     (extn == 'TIfF') || (extn == 'TIFf') || (extn == 'TiFF') || (extn == 'TIFF')){
      console.log("extension of image is matched");    
   }else{
      console.log("extension of image is not matched");
   }
}

please use `toLowerCase()` to convert any extension. then all extensions will be changed to lowercase string. And you will check easily — Julian, Dec 22 '18 at 15:53
Possible duplicate of [Javascript Image Url Verify](https://stackoverflow.com/questions/9714525/javascript-image-url-verify) — Reactgular, Dec 22 '18 at 16:03

score 3 · Answer 1 · answered Dec 22 '18 at 15:50

You could simply call extn.toLowerCase() on a string having every JpEg, jpEg in lowercase jpeg representation.

What you could do also is having available extensions in another variable and check given extension if it match with any from the array

const availableExtensions = new Set(['jpeg', 'tiff', 'gif'])

if(availableExtensions.has(extn.toLowerCase())) {
    console.log("extension of image is matched")
}

The fourth bird · Accepted Answer · 2018-12-22T15:59:15.877

3

You might use a regex using an alternation and the /i for a case insensitive comparison or string compare using toLowerCase:

let extn = "TIFf";
const regex = /(?:pdf|jpeg|jpg|tiff?|gif|png)/i;
if (regex.test(extn)) {
  console.log(extn);
}

let valid = [
  "pdf", "tif", "tiff", "jpg", "jpeg", "gif", "png"
];

if (valid.includes(extn.toLowerCase())) {
  console.log(extn);
}

edited Dec 22 '18 at 15:59

answered Dec 22 '18 at 15:52

The fourth bird

154,723
16
55
70

How to get Extension of image in angular?

2 Answers2