Merge pull request #504 from pinkary-project/fix/image-ratio

Fix: Add addition validation rules for max size & ratio
pinkary-project · Aug 18, 2024 · ecaa0d2 · ecaa0d2
2 parents 07f2af6 + cbd8b4d
commit ecaa0d2
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/app/Livewire/Questions/Create.php b/app/Livewire/Questions/Create.php
@@ -7,6 +7,7 @@
 use App\Models\User;
 use App\Rules\MaxUploads;
 use App\Rules\NoBlankCharacters;
+use Closure;
 use Illuminate\Http\Request;
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Storage;
@@ -94,13 +95,33 @@ public function runImageValidation(): void
                 'images.*' => [
                     File::image()
                         ->types(['jpeg', 'png', 'gif', 'webp', 'jpg'])
-                        ->max($this->maxFileSize),
+                        ->max($this->maxFileSize)
+                        ->dimensions(
+                            Rule::dimensions()->maxWidth(4000)->maxHeight(4000)
+                        ),
+
+                    static function (string $attribute, mixed $value, Closure $fail): void {
+                        /** @var UploadedFile $value */
+                        $dimensions = $value->dimensions();
+                        if (is_array($dimensions)) {
+                            [$width, $height] = $dimensions;
+                            $aspectRatio = $width / $height;
+                            $maxAspectRatio = 2 / 5;
+                            if ($aspectRatio < $maxAspectRatio) {
+                                $fail('The image aspect ratio must be less than 2/5.');
+                            }
+                        } else {
+                            $fail('The image aspect ratio could not be determined.');
+                        }
+                    },
+
                 ],
             ],
             messages: [
                 'images.*.image' => 'The file must be an image.',
                 'images.*.mimes' => 'The image must be a file of type: :values.',
                 'images.*.max' => 'The image may not be greater than :max kilobytes.',
+                'images.*.dimensions' => 'The image must be less than :max_width x :max_height pixels.',
             ]
         );
     }

diff --git a/app/Services/ParsableContentProviders/ImageProviderParsable.php b/app/Services/ParsableContentProviders/ImageProviderParsable.php
@@ -30,7 +30,7 @@ static function (array $match) use ($content): string {
 
                 $url = $disk->url($match[2]);
 
-                return "<img class='object-cover mx-auto max-h-[52rem] w-full max-w-[26rem] rounded-lg' src=\"{$url}\" alt=\"image\">";
+                return "<img class='object-contain mx-auto max-h-[52rem] w-full max-w-[26rem] rounded-lg' src=\"{$url}\" alt=\"image\">";
             },
             $content
         );

diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
@@ -1,9 +1,7 @@
 <!-- Lightbox Modal -->
 <x-modal name="image-lightbox" close-button-outside-modal should-center-modal-content>
     <div x-data="lightBox" class="relative md:flex md:items-center">
-        <div class="overflow-y-auto max-h-[85vh]">
-            <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
-        </div>
+            <img :src="imgSrc" alt="image" class="object-contain max-h-[85vh] rounded-lg"/>
         <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white cursor-pointer text-2xl" @click="prevImage">&larr;</button>
         <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 text-white cursor-pointer text-2xl" @click="nextImage">&rarr;</button>
     </div>

diff --git a/tests/.pest/snapshots/Unit/Services/ContentProvidersTest/image_exists.snap b/tests/.pest/snapshots/Unit/Services/ContentProvidersTest/image_exists.snap
@@ -1 +1 @@
-<img class='object-cover mx-auto max-h-[52rem] w-full max-w-[26rem] rounded-lg' src="/storage/images/pathtoimage.png" alt="image">
+<img class='object-contain mx-auto max-h-[52rem] w-full max-w-[26rem] rounded-lg' src="/storage/images/pathtoimage.png" alt="image">
diff --git a/tests/Unit/Livewire/Questions/CreateTest.php b/tests/Unit/Livewire/Questions/CreateTest.php
@@ -601,3 +601,31 @@
         'images.0' => "The image may not be greater than {$maxFileSize} kilobytes.",
     ]);
 });
+
+test('max size & ratio validation', function () {
+    $user = User::factory()->create([
+        'is_verified' => true,
+    ]);
+
+    $component = Livewire::actingAs($user)->test(Create::class, [
+        'toId' => $user->id,
+    ]);
+
+    $component->set('images', [
+        UploadedFile::fake()->image('test.jpg', '4005', '4005'),
+    ]);
+    $component->call('runImageValidation');
+
+    $component->assertHasErrors([
+        'images.0' => 'The image must be less than 4000 x 4000 pixels.',
+    ]);
+
+    $component->set('images', [
+        UploadedFile::fake()->image('test.jpg', '429', '1100'),
+    ]);
+    $component->call('runImageValidation');
+
+    $component->assertHasErrors([
+        'images.0' => 'The image aspect ratio must be less than 2/5.',
+    ]);
+});