SealShare/resources/views/livewire/file-uploader.blade.php

<x-pane class="upload-column">
    <x-stack gap="space400">
        <x-stack align="center" gap="space200">
            @if ($siteLogo)
                <img src="{{ Storage::disk('public')->url($siteLogo) }}" alt="{{ $siteTitle ?: config('app.name', 'SealShare') }}" class="upload-site-logo" />
            @endif

            <x-stack align="center" gap="space100">
                <h1 class="md-type-headline-lg md-text-center">{{ $siteTitle ?: config('app.name', 'SealShare') }}</h1>

                <p class="md-type-body-lg md-ink-variant md-text-center">{{ $siteDescription ?: __('Share your files safely and securely') }}</p>
            </x-stack>
        </x-stack>

        @if ($isStorageFull)
            <x-alert color="warning" :title="__('Storage is full. Uploads are temporarily disabled.')" />
        @else
            <x-form
                wire:submit="createShare"
                x-data="{
                    uploading: false,
                    progress: 0,
                    dragging: false,
                    handleDrop(e) {
                        this.dragging = false;
                        const items = e.dataTransfer.items;
                        const files = [];

                        for (let i = 0; i < items.length; i++) {
                            const entry = items[i].webkitGetAsEntry?.();
                            if (entry) {
                                this.traverseEntry(entry, '', files);
                            } else if (items[i].kind === 'file') {
                                files.push({ file: items[i].getAsFile(), path: null });
                            }
                        }

                        setTimeout(() => {
                            if (! files.length) {
                                return;
                            }

                            const dt = new DataTransfer();
                            const paths = [];
                            files.forEach(f => {
                                dt.items.add(f.file);
                                paths.push(f.path);
                            });

                            $wire.relativePaths = [...($wire.relativePaths ?? []), ...paths];

                            this.uploading = true;
                            this.progress = 0;

                            $wire.uploadMultiple(
                                'files',
                                dt.files,
                                () => this.progress = 100,
                                () => this.resetUpload(),
                                (event) => this.progress = event.detail.progress,
                                () => this.resetUpload(),
                            );
                        }, 500);
                    },
                    resetUpload() {
                        this.uploading = false;
                        this.progress = 0;
                    },
                    traverseEntry(entry, path, files) {
                        if (entry.isFile) {
                            entry.file(file => {
                                files.push({ file, path: path ? path + '/' + file.name : null });
                            });
                        } else if (entry.isDirectory) {
                            const reader = entry.createReader();
                            reader.readEntries(entries => {
                                entries.forEach(e => this.traverseEntry(e, path ? path + '/' + entry.name : entry.name, files));
                            });
                        }
                    }
                }"
                x-init="$wire.$on('files-processed', () => resetUpload())"
                x-on:livewire-upload-start="uploading = true; progress = 0"
                x-on:livewire-upload-finish="progress = 100"
                x-on:livewire-upload-cancel="resetUpload()"
                x-on:livewire-upload-error="resetUpload()"
                x-on:livewire-upload-progress="progress = $event.detail.progress"
            >
                {{-- Drop zone: the shape behind the icon turns into a burst while files are over it. --}}
                <div
                    class="upload-drop-zone"
                    x-bind:data-dragging="dragging ? 'true' : 'false'"
                    x-bind:aria-disabled="uploading ? 'true' : 'false'"
                    x-on:dragover.prevent="dragging = true"
                    x-on:dragleave.prevent="dragging = false"
                    x-on:drop.prevent="handleDrop($event)"
                    data-test="drop-zone"
                >
                    <x-stack align="center" gap="space200">
                        <div class="upload-drop-shapes">
                            <x-shape name="cookie-9" class="upload-drop-shape upload-drop-shape--idle" />
                            <x-shape name="soft-burst" class="upload-drop-shape upload-drop-shape--burst" data-test="drop-zone-burst" />
                            <x-icon name="upload" size="48" class="upload-drop-icon" />
                        </div>

                        <x-stack align="center" gap="space50">
                            <p class="md-type-title-md md-text-center">{{ __('Drag & drop files or folders here') }}</p>
                            <p class="md-type-body-md md-ink-variant md-text-center">{{ __('or click to browse') }}</p>
                        </x-stack>

                        {{-- The button is the tab stop and opens the browser's own picker; the input only carries the upload. --}}
                        <x-button :label="__('Browse Files')" icon="folder_open" variant="outlined" x-on:click="$refs.picker.click()" x-bind:disabled="uploading" />
                        <input type="file" wire:model="files" multiple hidden x-ref="picker" x-bind:disabled="uploading" />
                    </x-stack>
                </div>

                {{-- Upload progress --}}
                <div x-show="uploading" x-cloak data-test="upload-progress">
                    <x-stack x-show="progress < 100" gap="space100">
                        <x-row justify="between">
                            <span class="md-type-label-lg">{{ __('Uploading...') }} <span x-text="Math.round(progress)"></span>%</span>
                            <x-button :label="__('Cancel')" size="xs" x-on:click="$wire.cancelUpload('files')" />
                        </x-row>
                        <x-progress bind="progress" wavy :label="__('Uploading')" />
                    </x-stack>
                    <x-row x-show="progress >= 100" gap="space100">
                        <x-loading class="upload-processing-indicator" :label="false" />
                        <span class="md-type-label-lg">{{ __('Processing files...') }}</span>
                    </x-row>
                </div>

                @error('files')
                    <x-alert color="error">{{ $message }}</x-alert>
                @enderror

                {{-- Selected files --}}
                @if (count($files))
                    <x-stack gap="space100">
                        <h2 class="md-type-title-lg">{{ __('Selected Files') }} ({{ count($files) }})</h2>

                        <div class="upload-file-list">
                            <x-list segmented :label="__('Selected Files')">
                                @foreach ($files as $index => $file)
                                    <x-list-item
                                        :title="$relativePaths[$index] ?? $file->getClientOriginalName()"
                                        icon="description"
                                        wire:key="selected-file-{{ $index }}"
                                    >
                                        <x-slot:description><span class="md-tabular">{{ Number::fileSize($file->getSize()) }}</span></x-slot:description>
                                        <x-slot:end>
                                            <x-button icon="close" :aria-label="__('Remove')" wire:click="removeFile({{ $index }})" />
                                        </x-slot:end>
                                    </x-list-item>
                                @endforeach
                            </x-list>
                        </div>
                    </x-stack>
                @endif

                {{-- Options --}}
                <x-card :title="__('Share Options')" heading="h2" variant="outlined">
                    <x-stack gap="space200">
                        <x-toggle wire:model.live="usePassword" :label="__('Password protect')" right />

                        @if ($usePassword)
                            <x-password full wire:model="password" :label="__('Password')" autocomplete="new-password" />
                        @endif

                        <x-select full
                            wire:model="expiration"
                            :label="__('Expiration')"
                            :placeholder="$allowNeverExpire ? __('Never') : null"
                            :options="[
                                ['id' => '1h', 'name' => __('1 Hour')],
                                ['id' => '24h', 'name' => __('24 Hours')],
                                ['id' => '48h', 'name' => __('48 Hours')],
                                ['id' => '7d', 'name' => __('7 Days')],
                                ['id' => '14d', 'name' => __('14 Days')],
                                ['id' => '30d', 'name' => __('30 Days')],
                            ]"
                        />

                        <x-input full
                            wire:model="maxDownloads"
                            :label="__('Max downloads')"
                            type="number"
                            min="1"
                            :placeholder="__('Unlimited')"
                        />
                    </x-stack>
                </x-card>

                <x-slot:actions>
                    <x-button
                        type="submit"
                        :label="__('Create Share Link')"
                        variant="filled"
                        size="md"
                        icon="link"
                        spinner="createShare"
                        x-bind:disabled="uploading || {{ count($files) === 0 ? 'true' : 'false' }}"
                        data-test="create-share"
                    />
                </x-slot:actions>
            </x-form>
        @endif
    </x-stack>
</x-pane>