[5.x] Add support for avif image format (#11016)

resources/js/components/FileIcon.vue

@@ -81,6 +81,7 @@ export default {
                     return 'video';
                 case 'xml':
                     return 'xml';
+                case 'avif':
                 case 'bmp':
                 case 'gif':
                 case 'ico':
@@ -90,6 +91,7 @@ export default {
                 case 'raw':
                 case 'nef':
                 case 'tiff':
+                case 'webp':
                     return 'image';
                 default:
                     return 'generic';

resources/js/components/fieldtypes/assets/Asset.js

@@ -41,7 +41,7 @@ export default {
         },
 
         canBeTransparent() {
-            return ['png', 'svg'].includes(this.asset.extension)
+            return ['png', 'svg', 'webp', 'avif'].includes(this.asset.extension)
         },
 
         canDownload() {

src/Assets/Asset.php

@@ -488,7 +488,7 @@ public function isPreviewable()
      */
     public function isImage()
     {
-        return $this->extensionIsOneOf(['jpg', 'jpeg', 'png', 'gif', 'webp']);
+        return $this->extensionIsOneOf(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif']);
     }
 
     /**

src/Fieldtypes/Assets/ImageRule.php

@@ -25,7 +25,7 @@ public function __construct($parameters = null)
      */
     public function passes($attribute, $value)
     {
-        $extensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
+        $extensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'avif'];
 
         return collect($value)->every(function ($id) use ($extensions) {
             if ($id instanceof UploadedFile) {

src/Filesystem/AbstractAdapter.php

@@ -100,7 +100,7 @@ public function isImage($path)
     {
         return in_array(
             strtolower($this->extension($path)),
-            ['jpg', 'jpeg', 'png', 'gif']
+            ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif']
         );
     }
 

src/Http/Resources/CP/Assets/FolderAsset.php

@@ -22,7 +22,7 @@ public function toArray($request)
                 return [
                     'is_image' => true,
                     'thumbnail' => $this->thumbnailUrl('small'),
-                    'can_be_transparent' => $this->isSvg() || $this->extension() === 'png',
+                    'can_be_transparent' => $this->isSvg() || $this->extensionIsOneOf(['svg', 'png', 'webp', 'avif']),
                     'alt' => $this->alt,
                 ];
             }),

tests/Assets/AssetTest.php

@@ -601,7 +601,7 @@ public function it_checks_if_its_a_video_file()
     #[Test]
     public function it_checks_if_its_an_image_file()
     {
-        $extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+        $extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif'];
 
         foreach ($extensions as $ext) {
             $this->assertTrue((new Asset)->path("path/to/asset.$ext")->isImage());

tests/Filesystem/FilesystemAdapterTests.php

@@ -170,6 +170,10 @@ public function checks_if_a_file_is_an_image()
         $this->assertTrue($this->adapter->isImage('test.JPEG'));
         $this->assertTrue($this->adapter->isImage('test.PNG'));
         $this->assertTrue($this->adapter->isImage('test.GIF'));
+        $this->assertTrue($this->adapter->isImage('test.webp'));
+        $this->assertTrue($this->adapter->isImage('test.WEBP'));
+        $this->assertTrue($this->adapter->isImage('test.avif'));
+        $this->assertTrue($this->adapter->isImage('test.AVIF'));
         $this->assertFalse($this->adapter->isImage('test.txt'));
     }
 

tests/Imaging/ImageValidatorTest.php

@@ -20,7 +20,7 @@ public function it_checks_if_image_has_valid_extension_and_mimetype()
         ]]);
 
         // We'll test `isValidExtension()` functionality separately below, and just mock here...
-        ImageValidator::shouldReceive('isValidExtension')->andReturnTrue()->times(23);
+        ImageValidator::shouldReceive('isValidExtension')->andReturnTrue()->times(24);
         ImageValidator::makePartial();
 
         $this->assertTrue(ImageValidator::isValidImage('jpg', 'image/jpeg'));
@@ -30,6 +30,7 @@ public function it_checks_if_image_has_valid_extension_and_mimetype()
         $this->assertTrue(ImageValidator::isValidImage('png', 'image/png'));
         $this->assertTrue(ImageValidator::isValidImage('gif', 'image/gif'));
         $this->assertTrue(ImageValidator::isValidImage('webp', 'image/webp'));
+        $this->assertTrue(ImageValidator::isValidImage('avif', 'image/avif'));
         $this->assertTrue(ImageValidator::isValidImage('tif', 'image/tiff'));
         $this->assertTrue(ImageValidator::isValidImage('bmp', 'image/bmp'));
         $this->assertTrue(ImageValidator::isValidImage('bmp', 'image/x-bmp'));
@@ -90,6 +91,7 @@ public function it_checks_if_image_extension_is_allowed_for_manipulation_with_im
         $this->assertFalse(ImageValidator::isValidExtension('svg'));
         $this->assertFalse(ImageValidator::isValidExtension('pdf'));
         $this->assertFalse(ImageValidator::isValidExtension('eps'));
+        $this->assertFalse(ImageValidator::isValidExtension('avif'));
     }
 
     #[Test]
@@ -101,6 +103,7 @@ public function it_checks_if_custom_image_extension_is_allowed_for_manipulation_
             'svg',
             'pdf',
             'eps',
+            'avif',
         ]]);
 
         $this->assertTrue(ImageValidator::isValidExtension('jpeg'));
@@ -116,6 +119,7 @@ public function it_checks_if_custom_image_extension_is_allowed_for_manipulation_
         $this->assertTrue(ImageValidator::isValidExtension('svg'));
         $this->assertTrue(ImageValidator::isValidExtension('pdf'));
         $this->assertTrue(ImageValidator::isValidExtension('eps'));
+        $this->assertTrue(ImageValidator::isValidExtension('avif'));
 
         // Not configured, should still be false...
         $this->assertFalse(ImageValidator::isValidExtension('exe'));