a248d3fc79
- show external links in listings - refactor image-input.blade.php to display image while update - refactor image-input.js to show selected image after user clicks submit - refactor components to accept default value - add FileService to handle image update and delete
52 lines
2.0 KiB
PHP
52 lines
2.0 KiB
PHP
@props(['name' => '', 'label' => '', 'allowed' => '', 'size' => '1', 'required' => false, 'value' => ''])
|
|
|
|
<div class="flex flex-col space-y-2">
|
|
@if($label !== '')
|
|
<label class="text-sm font-bold" for="{{$name}}">
|
|
{{$label}} @if($required && !$value)
|
|
*
|
|
@endif
|
|
</label>
|
|
@endif
|
|
|
|
<div class="relative group">
|
|
<div
|
|
class="p-8 border-2 border-dashed border-accent-600/70 rounded-lg flex flex-col space-y-2 justify-center items-center overflow-hidden min-h-40 bg-gray-50 relative">
|
|
|
|
<img src="{{ $value }}" id="preview-image"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-10 transition-opacity">
|
|
|
|
<x-heroicon-o-arrow-up-tray class="w-8 text-accent-600/70 z-10"/>
|
|
<p class="text-sm text-accent-600/90 font-bold z-10">
|
|
{{ $value ? 'Click to replace current image' : 'Click to upload or drag and drop' }}
|
|
</p>
|
|
<p class="text-xs text-accent-600/70 z-10">{{strtoupper($allowed)}} up to {{$size}}MB</p>
|
|
</div>
|
|
|
|
<input
|
|
name="{{$name}}"
|
|
id="image-input"
|
|
class="opacity-0 absolute w-full h-full top-0 left-0 cursor-pointer"
|
|
type="file"
|
|
accept="{{ $allowed ? '.' . str_replace(',', ',.', $allowed) : 'image/*' }}"
|
|
onchange="upload(10)"
|
|
{{ $required && !$value ? 'required' : '' }}
|
|
/>
|
|
</div>
|
|
|
|
<x-ui.inline-error :name="$name"/>
|
|
</div>
|
|
|
|
<dialog id="image-modal"
|
|
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg">
|
|
<div>
|
|
<img src="" alt="" id="image-placeholder">
|
|
</div>
|
|
<div class="flex space-x-4 mt-6 justify-end">
|
|
<button type="button" autofocus id="cancel-modal" class="ui-btn">Close</button>
|
|
<button type="button" class="ui-btn ui-btn-neutral" id="close-modal">Submit</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
@vite('resources/js/image-input.js')
|