better image uploading & user roles
Some checks failed
Docker / build (push) Has been cancelled

This commit is contained in:
yuriko 🦊 2025-08-09 23:01:27 -04:00
parent 21e59d775a
commit f60ae41bf6
26 changed files with 741 additions and 70 deletions

View file

@ -25,11 +25,17 @@
<wa-card>
<div class="wa-stack wa-gap-l">
<div class="wa-stack">
<span class="wa-heading-m">Profile picture</span>
<input type="file" wire:model.live="avatar" wire:loading.attr="disabled" />
@error('avatar')
<span class="wa-caption-m">{{ $message }}</span>
@enderror
<span class="wa-heading-s">Profile picture</span>
<label for="avatar" class="wa-cluster wa-placeholder">
<livewire:app.icon name="image-user" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)" />
<div class="wa-stack wa-gap-3xs">
<span class="wa-heading-m">Click to upload a new profile picture.</span>
@error('avatar')
<span class="wa-caption-m">{{ $message }}</span>
@enderror
</div>
<input id="avatar" type="file" wire:model.live="avatar" wire:loading.attr="disabled" style="opacity: 0;" />
</label>
</div>
<wa-divider></wa-divider>

View file

@ -4,23 +4,40 @@
<wa-breadcrumb-item>upload</wa-breadcrumb-item>
</wa-breadcrumb>
<form wire:submit="createPost" class="wa-stack wa-gap-xl">
<wa-card class="wa-stack">
<input wire:model="file" type="file" label="file" placeholder="Select a file to upload." />
@error('file')
<span class="wa-caption-m">{{ $message }}</span>
@enderror
</wa-card>
<form wire:submit="createPost">
<div class="wa-stack wa-gap-xl"
x-data="{ uploading: false, progress: 0 }"
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"
>
<label for="files" class="wa-cluster wa-placeholder wa-link-plain">
<livewire:app.icon name="file-image" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)" />
<div class="wa-stack wa-gap-3xs" wire:loading.remove>
<span class="wa-heading-m">Click to select files to upload.</span>
@error('files.*')
<span class="wa-caption-l">{{ $message }}</span>
@enderror
</div>
<div class="wa-stack wa-gap-3xs" wire:loading>
<span class="wa-heading-m">Uploading files...</span>
<wa-progress-bar x-show="uploading" x-bind.value="progress" style="--track-height: 6px;"></wa-progress-bar>
</div>
<input id="files" wire:model="files" type="file" style="opacity: 0;" multiple />
</label>
<wa-select wire:model="rating" label="Rating" value="safe" hint="Select a content rating that matches the file.">
<wa-option value="safe">Safe</wa-option>
<wa-option value="suggestive">Suggestive</wa-option>
<wa-option value="explicit">Explicit</wa-option>
</wa-select>
<wa-select wire:model="rating" label="Rating" value="safe" hint="Select a content rating that matches the file.">
<wa-option value="safe">Safe</wa-option>
<wa-option value="suggestive">Suggestive</wa-option>
<wa-option value="explicit">Explicit</wa-option>
</wa-select>
<wa-button type="submit" variant="brand" wire:loading.attr="disabled">
<livewire:app.icon slot="prefix" name="arrow-up-from-bracket" />
Upload
</wa-button>
<wa-button type="submit" variant="brand" wire:loading.attr="disabled">
<livewire:app.icon slot="prefix" name="arrow-up-from-bracket" />
Upload
</wa-button>
</div>
</form>
</div>