feat: add client-side filesize check to file component

RealZone22 commented

2026-01-12 20:12:57 +01:00

(Migrated from git.cyanfox.de)

I've implemented a client-side file size check using Alpine.js. This ensures that users cannot upload files larger than the specified maxSize. If a file is too large, it alerts the user and clears the input.
Fixes #20

I've implemented a client-side file size check using Alpine.js. This ensures that users cannot upload files larger than the specified maxSize. If a file is too large, it alerts the user and clears the input. Fixes #20

RealZone22 commented

2026-01-15 10:09:36 +01:00

(Migrated from git.cyanfox.de)

Please avoid using alert() for validation errors.
We already render validation messages below the input with the text-danger class (line 48–49).
Also, please do not hardcode the error message in English.
The project uses Laravel translations, so the message should come from the language files.
I will add the German translation on my side.

Please avoid using alert() for validation errors. We already render validation messages below the input with the `text-danger` class (line 48–49). Also, please do not hardcode the error message in English. The project uses Laravel translations, so the message should come from the language files. I will add the German translation on my side.

RealZone22 commented

2026-01-15 10:11:19 +01:00

(Migrated from git.cyanfox.de)

I suggest changing maxSize to null by default.
A default limit of 2048 KB enforces behavior that may not be desired for all usages.
The inline comment can be removed, the intent of maxSize is already clear.

I suggest changing maxSize to null by default. A default limit of 2048 KB enforces behavior that may not be desired for all usages. The inline comment can be removed, the intent of maxSize is already clear.

RealZone22 commented

2026-01-15 10:15:37 +01:00

(Migrated from git.cyanfox.de)

The inline comment can be removed.
The conversion from KB to bytes is self explanatory and does not need a comment.

The inline comment can be removed. The conversion from KB to bytes is self explanatory and does not need a comment.

RealZone22 commented

2026-01-15 10:15:39 +01:00

(Migrated from git.cyanfox.de)

Remove this comment.
Clearing the file input value is clear without explanation.

Remove this comment. Clearing the file input value is clear without explanation.

RealZone22 commented

2026-01-15 12:11:45 +01:00

(Migrated from git.cyanfox.de)

This translations does not exists in Laravel (See: https://github.com/laravel/framework/blob/12.x/src/Illuminate/Translation/lang/en/validation.php#L101)
You can use this one instead:

this.errorMessage = '{{ __('validation.max.file', ['max' => $maxSize]) }}';

This translations does not exists in Laravel (See: https://github.com/laravel/framework/blob/12.x/src/Illuminate/Translation/lang/en/validation.php#L101) You can use this one instead: ```blade this.errorMessage = '{{ __('validation.max.file', ['max' => $maxSize]) }}'; ```

RealZone22 commented

2026-01-15 12:19:36 +01:00

(Migrated from git.cyanfox.de)

The original div with x-show="errorMessage" is outside the x-data scope. That prevents AlpineJS error messages from showing. The easiest fix is to move this code to the end of the x-data div (after the input, Line 45).
Here is an approach that ensures only 1 validation message is shown at a time:

        @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

We can then remove the old validation (Line: 55-58).

The original div with `x-show="errorMessage"` is outside the `x-data` scope. That prevents AlpineJS error messages from showing. The easiest fix is to move this code to the end of the `x-data `div (after the input, Line 45). Here is an approach that ensures only 1 validation message is shown at a time: ```blade @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 ``` We can then remove the old validation (Line: 55-58).

Rows
Columns

feat: add client-side filesize check to file component #52