Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Implement file attachment functionality in ticket creation with upload preview and removal options

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-07 06:50:33 -05:00
parent eb44e03340
commit 9547a3589a
2 changed files with 89 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
themes/lucentui/views/tickets/create.blade.php
View File

@@ -50,6 +50,57 @@
</div>
<x-easymde-editor wire:model="message" target-id="editor" />
</div>
<!-- File Upload Section -->
<div class="col-span-1 md:col-span-2">
<label class="block text-sm font-medium text-color-base mb-2">
<x-ri-attachment-2 class="inline size-4 mr-1" />
{{ __('ticket.attachments') ?? 'Attachments' }}
</label>
<div class="flex items-center justify-center w-full">
<label for="attachments" class="flex flex-col items-center justify-center w-full h-32 border-2 border-neutral border-dashed rounded-lg cursor-pointer bg-background/50 hover:bg-background/80 transition-colors">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<x-ri-upload-cloud-2-line class="size-8 mb-2 text-neutral-400" />
<p class="mb-2 text-sm text-neutral-400">
<span class="font-semibold">{{ __('ticket.click_to_upload') ?? 'Click to upload' }}</span> {{ __('ticket.or_drag_drop') ?? 'or drag and drop' }}
</p>
<p class="text-xs text-neutral-500">{{ __('ticket.image_formats') ?? 'PNG, JPG, GIF up to 5MB' }}</p>
</div>
<input id="attachments" type="file" class="hidden" wire:model="attachments" multiple accept="image/*" />
</label>
</div>
<!-- Upload Progress -->
<div wire:loading wire:target="attachments" class="mt-2">
<div class="flex items-center gap-2 text-sm text-primary">
<x-ri-loader-4-line class="size-4 animate-spin" />
{{ __('ticket.uploading') ?? 'Uploading...' }}
</div>
</div>
<!-- Preview Uploaded Files -->
@if(count($attachments) > 0)
<div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
@foreach($attachments as $index => $attachment)
<div class="relative group">
<div class="aspect-square rounded-lg overflow-hidden border border-neutral bg-background">
<img src="{{ $attachment->temporaryUrl() }}" alt="Preview" class="w-full h-full object-cover">
</div>
<button type="button" wire:click="removeAttachment({{ $index }})"
class="absolute -top-2 -right-2 bg-error text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-error/80">
<x-ri-close-line class="size-4" />
</button>
<p class="mt-1 text-xs text-neutral-400 truncate">{{ $attachment->getClientOriginalName() }}</p>
</div>
@endforeach
</div>
@endif
@error('attachments.*')
<p class="mt-2 text-sm text-error">{{ $message }}</p>
@enderror
</div>
</div>
<div class="flex justify-end mt-6">