RealZone22/PenguBlade

Watch

Fork 0

Add file upload progress bar support with Livewire integration #54

Merged

RealZone22 merged 4 commits from github/fork/chetanupare/feature/file-upload-progress-bar into v1

2026-01-28 22:20:46 +01:00

RealZone22 commented

2026-01-27 21:04:30 +01:00

(Migrated from git.cyanfox.de)

Enhanced file component with progress tracking capabilities
Added real-time upload progress indicators
Support for multiple file uploads
Livewire integration for server-side uploads
File size validation with client-side checking
Upload speed calculation and time remaining estimation
Customizable progress bar colors and appearance
Comprehensive documentation and usage examples
Updated README and CHANGELOG with new features

Resolves: #22

- Enhanced file component with progress tracking capabilities - Added real-time upload progress indicators - Support for multiple file uploads - Livewire integration for server-side uploads - File size validation with client-side checking - Upload speed calculation and time remaining estimation - Customizable progress bar colors and appearance - Comprehensive documentation and usage examples - Updated README and CHANGELOG with new features Resolves: #22

RealZone22 commented

2026-01-28 20:30:14 +01:00

(Migrated from git.cyanfox.de)

Why simulate a upload progress? Livewire already has a upload progress (See: livewire-upload-progress): https://livewire.laravel.com/docs/4.x/uploads#progress-indicators

Why simulate a upload progress? Livewire already has a upload progress (See: `livewire-upload-progress`): https://livewire.laravel.com/docs/4.x/uploads#progress-indicators

RealZone22 commented

2026-01-28 20:32:04 +01:00

(Migrated from git.cyanfox.de)

I prefer keeping text inside components to a minimum because of multi-language support.
We should remove this label and only show the percentage value.

I prefer keeping text inside components to a minimum because of multi-language support. We should remove this label and only show the percentage value.

RealZone22 commented

2026-01-28 21:52:55 +01:00

(Migrated from git.cyanfox.de)

As shown in the docs this would be here:

<div class="relative flex w-full flex-col gap-1"
         x-on:livewire-upload-start="uploading = true"
         x-on:livewire-upload-finish="uploading = false"
         x-on:livewire-upload-cancel="uploading = false"
         x-on:livewire-upload-error="uploading = false"
         x-on:livewire-upload-progress="progress = $event.detail.progress"

As shown in the docs this would be here: ```blade <div class="relative flex w-full flex-col gap-1" x-on:livewire-upload-start="uploading = true" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-cancel="uploading = false" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress" ```

RealZone22 commented

2026-01-28 21:52:59 +01:00

(Migrated from git.cyanfox.de)

Then we can add the progress and uploading here:

            uploading: false,
            progress: 0,

Then we can add the progress and uploading here: ```javascript uploading: false, progress: 0, ```

RealZone22 commented

2026-01-28 21:53:25 +01:00

(Migrated from git.cyanfox.de)

As we defined the uploading and progress var in the x-data block we can now use it here. We just need to replace the $wire.uploadProgress with progress and the x-show with x-show="uploading"
This should look something like this:

            @if($showProgress)
                <div class="mt-1" x-show="uploading" x-cloak>
                    <div class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt">
                        <div
                            class="h-full bg-primary transition-all duration-500 ease-out dark:bg-primary-dark"
                            x-bind:style="'width: ' + progress + '%'">
                        </div>
                    </div>

                    <div class="text-right text-xs mt-1 text-on-surface/50 dark:text-on-surface-dark/50">
                        <span x-text="progress + '%'"></span>
                    </div>
                </div>
            @endif

As we defined the uploading and progress var in the x-data block we can now use it here. We just need to replace the `$wire.uploadProgress` with `progress` and the `x-show` with `x-show="uploading"` This should look something like this: ```blade @if($showProgress) <div class="mt-1" x-show="uploading" x-cloak> <div class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt"> <div class="h-full bg-primary transition-all duration-500 ease-out dark:bg-primary-dark" x-bind:style="'width: ' + progress + '%'"> </div> </div> <div class="text-right text-xs mt-1 text-on-surface/50 dark:text-on-surface-dark/50"> <span x-text="progress + '%'"></span> </div> </div> @endif ```

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

RealZone22/PenguBlade!54

No description provided.

Rows
Columns