Filter images in TypeScript or JavaScript

Issue

I'm making a form to take users data in an application web, in which I can add a avatar through an input file. This one filters files with image extensions, but my concern is if I can make a file with a script and give it a .jpg extension for example.

The image I can analyze

const reader = new FileReader();
    reader.onload = (event: any) => {
      console.log(event);
      this.avatarUrl = event.target.result;
      console.log(this.avatarUrl);
    };
    reader.readAsDataURL(this.avatarSelected);

but I can't find anything to differentiate real images and hidden scripts.

Thanks for the answers.

Solution

If I undestand: you want to detect if a file is image or not.

Especially in a case of script.js file that was renamed to script.jpg, you want to detect it as NOT image.

The approach is:

1. create an image element.
2. load it
3. reject on error / resolve on success

4. add timeout: if it doesn't load after X seconds, change the url to fake url in order to stop loading.

   function testImage(url) {
   
       return new Promise((resolve, reject) => {
         let timer;
         const image = new Image();
         image.onerror = image.onabort = () => {
             clearTimeout(timer);
             reject("error");
         };
         image.onload = function() {
              clearTimeout(timer);
              resolve("success");
          };
          timer = setTimeout(function() {
             img.src = "fakeUrl"; // stop loading
             reject("timeout");
          }, 3000); 
          img.src = url;
       });
   }
   

Answered By - Alon Shmiel