From f45621d7162775af4477e3b745a779e81a2ef973 Mon Sep 17 00:00:00 2001
From: euzghe <ozgealtinok5@gmail.com>
Date: Mon, 12 Jan 2026 22:09:58 +0300
Subject: [PATCH 1/4] feat: add client-side filesize check to file component

---
 .../views/components/file/index.blade.php     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/file/index.blade.php b/resources/views/components/file/index.blade.php
index 263370b..859a8c4 100644
--- a/resources/views/components/file/index.blade.php
+++ b/resources/views/components/file/index.blade.php
@@ -4,10 +4,22 @@
     'showRequired' => true,
     'showValidation' => true,
     'tooltip' => null,
+    'maxSize' => 2048, // KB cinsinden varsayılan limit (2MB)
 ])
 
 <div>
-    <div class="relative flex w-full flex-col gap-1" x-data="{ uuid: Math.random().toString(20).substring(2, 20) }">
+    <div class="relative flex w-full flex-col gap-1"
+         x-data="{
+            uuid: Math.random().toString(20).substring(2, 20),
+            checkFileSize(event) {
+                const file = event.target.files[0];
+                const limit = {{ $maxSize }} * 1024; // KB'ı Byte'a çeviriyoruz
+                if (file && file.size > limit) {
+                    alert('File is too large! Maximum size allowed is {{ $maxSize }}KB.');
+                    event.target.value = ''; // Seçimi temizle
+                }
+            }
+         }">
         @if($label)
             <label class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark" x-bind:for="uuid">
                 {{ $label }}
@@ -17,7 +29,12 @@
                 @endif
             </label>
         @endif
-            <input x-bind:id="uuid" type="file" @if($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif
+
+
+        <input x-bind:id="uuid"
+               type="file"
+               @change="checkFileSize($event)"
+               @if($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif
             {{ $attributes->twMerge('w-full overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm text-on-surface file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark') }}/>
     </div>
 

From b03f83cc2ba45ede87dbb7bb6daa0c1ab16a938c Mon Sep 17 00:00:00 2001
From: euzghe <ozgealtinok5@gmail.com>
Date: Thu, 15 Jan 2026 13:11:45 +0300
Subject: [PATCH 2/4] refactor: address code review feedback on file size
 validation

---
 .../views/components/file/index.blade.php      | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/file/index.blade.php b/resources/views/components/file/index.blade.php
index 859a8c4..0374f93 100644
--- a/resources/views/components/file/index.blade.php
+++ b/resources/views/components/file/index.blade.php
@@ -4,19 +4,25 @@
     'showRequired' => true,
     'showValidation' => true,
     'tooltip' => null,
-    'maxSize' => 2048, // KB cinsinden varsayılan limit (2MB)
+    'maxSize' => null,
 ])
 
 <div>
     <div class="relative flex w-full flex-col gap-1"
          x-data="{
             uuid: Math.random().toString(20).substring(2, 20),
+            errorMessage: '',
             checkFileSize(event) {
+                this.errorMessage = '';
                 const file = event.target.files[0];
-                const limit = {{ $maxSize }} * 1024; // KB'ı Byte'a çeviriyoruz
-                if (file && file.size > limit) {
-                    alert('File is too large! Maximum size allowed is {{ $maxSize }}KB.');
-                    event.target.value = ''; // Seçimi temizle
+                const maxSize = {{ $maxSize ?? 'null' }};
+
+                if (file && maxSize) {
+                    const limit = maxSize * 1024;
+                    if (file.size > limit) {
+                        this.errorMessage = '{{ __("validation.size.numeric", ["attribute" => "file", "max" => $maxSize]) }}';
+                        event.target.value = '';
+                    }
                 }
             }
          }">
@@ -44,6 +50,8 @@
         </p>
     @endif
 
+    <div x-show="errorMessage" class="text-danger text-sm" x-text="errorMessage"></div>
+
     @if($attributes->whereStartsWith('wire:model')->first() && $errors->has($attributes->whereStartsWith('wire:model')->first()) && $showValidation)
         <div
             class="text-danger text-sm">{{ $errors->first($attributes->whereStartsWith('wire:model')->first()) }}</div>

From e87fb77ffd78175978a4ffadbff3bab99eacd249 Mon Sep 17 00:00:00 2001
From: euzghe <ozgealtinok5@gmail.com>
Date: Thu, 15 Jan 2026 14:35:01 +0300
Subject: [PATCH 3/4] refactor: fix scope issue and update translation key per
 review

---
 .../views/components/file/index.blade.php     | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/resources/views/components/file/index.blade.php b/resources/views/components/file/index.blade.php
index 0374f93..0e1736f 100644
--- a/resources/views/components/file/index.blade.php
+++ b/resources/views/components/file/index.blade.php
@@ -20,7 +20,7 @@
                 if (file && maxSize) {
                     const limit = maxSize * 1024;
                     if (file.size > limit) {
-                        this.errorMessage = '{{ __("validation.size.numeric", ["attribute" => "file", "max" => $maxSize]) }}';
+                        this.errorMessage = '{{ __("validation.max.file", ["max" => $maxSize]) }}';
                         event.target.value = '';
                     }
                 }
@@ -38,11 +38,20 @@
 
 
         <input x-bind:id="uuid"
-               type="file"
-               @change="checkFileSize($event)"
-               @if($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif
-            {{ $attributes->twMerge('w-full overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm text-on-surface file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark') }}/>
-    </div>
+                       type="file"
+                       @change="checkFileSize($event)"
+                       @if($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif
+                    {{ $attributes->twMerge('w-full overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm text-on-surface file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark') }}/>
+
+                @if($showValidation)
+                    <div class="text-danger text-sm">
+                        <span x-show="errorMessage" x-text="errorMessage" x-cloak></span>
+                        @if($attributes->whereStartsWith('wire:model')->first() && $errors->has($attributes->whereStartsWith('wire:model')->first()))
+                            <span x-show="!errorMessage" x-cloak>{{ $errors->first($attributes->whereStartsWith('wire:model')->first()) }}</span>
+                        @endif
+                    </div>
+                @endif
+            </div>
 
     @if($hint)
         <p class="text-on-surface/50 dark:text-on-surface-dark/50 text-xs mt-1">
@@ -50,10 +59,4 @@
         </p>
     @endif
 
-    <div x-show="errorMessage" class="text-danger text-sm" x-text="errorMessage"></div>
 
-    @if($attributes->whereStartsWith('wire:model')->first() && $errors->has($attributes->whereStartsWith('wire:model')->first()) && $showValidation)
-        <div
-            class="text-danger text-sm">{{ $errors->first($attributes->whereStartsWith('wire:model')->first()) }}</div>
-    @endif
-</div>

From 26fe0e7d3fd0d980fc6ac2cc1669bfdd8e4dfda5 Mon Sep 17 00:00:00 2001
From: "Lenny P." <github@realzone22.de>
Date: Thu, 15 Jan 2026 12:49:25 +0100
Subject: [PATCH 4/4] Add missing div closing tag

Added missing `</div>` tag
---
 resources/views/components/file/index.blade.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/views/components/file/index.blade.php b/resources/views/components/file/index.blade.php
index 0e1736f..5a577f3 100644
--- a/resources/views/components/file/index.blade.php
+++ b/resources/views/components/file/index.blade.php
@@ -58,5 +58,4 @@
             {{ $hint }}
         </p>
     @endif
-
-
+</div>