some webp images when saved have .jpg extension but I want to explicitly disallow webp type files because it is still too heavy in size for my storage. This is my working code in javascript that detects and disallows non jpg/png file extensions, but webp images with extensions of jpg obviously will still pass through

$.each(previousFiles, function(index, file) {

const fileExtension = file.name.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExtension)) {

        alert('Only JPG and PNG files are allowed.');

            return;

    }

};

once passed through ajax, I also process it in PHP and this is my code to only allow jpeg, jpg, png files

$filePath = $uploadPath . $newName;

$fileExtension = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));

if (!in_array($fileExtension, ['jpeg', 'jpg', 'png'])) {

    return $this->response->setJSON([

    'success' => false,

    'message' => 'Only JPG and PNG files are allowed.'

    ]);

}

but the webp images still gets through most likely because these codes only detect the extension. How can I detect if it is a webp and explicitly return a message that it is not allowed?

I have tried using this code

$.each(previousFiles, function(index, file) {

const fileExtension = file.name.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExtension)) {

        alert('Only JPG and PNG files are allowed.');

            return;

    }

};

once passed through ajax, I also process it in PHP and this is my code to only allow jpeg, jpg, png files

$filePath = $uploadPath . $newName;

$fileExtension = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));

if (!in_array($fileExtension, ['jpeg', 'jpg', 'png'])) {

    return $this->response->setJSON([

    'success' => false,

    'message' => 'Only JPG and PNG files are allowed.'

    ]);

}

still webp images with jpg extensions passes through. I am guessing I need more than a file extension detection code but I am at my wits end.