103 lines
4.3 KiB
PHP
103 lines
4.3 KiB
PHP
<<<<<<< HEAD
|
|
<div x-data="{ isUploading: false }"
|
|
x-on:livewire-upload-start="isUploading = true"
|
|
x-on:livewire-upload-finish="isUploading = false"
|
|
x-on:livewire-upload-error="isUploading = false">
|
|
|
|
<div class="form-group">
|
|
<label>{{ $label }}</label>
|
|
|
|
<!-- Zona de dropzone modificada -->
|
|
<div wire:ignore
|
|
x-on:drop.prevent="
|
|
const files = event.dataTransfer.files;
|
|
if (files.length) {
|
|
@this.upload('image', files[0]);
|
|
}
|
|
$wire.toggleHover(false);
|
|
event.stopPropagation(); // Evita propagación del evento
|
|
"
|
|
x-on:dragover.prevent="$wire.toggleHover(true)"
|
|
x-on:dragleave.prevent="$wire.toggleHover(false)"
|
|
class="dropzone {{ $hover ? 'dropzone-hover' : '' }} mb-3 p-4 border-2 border-dashed rounded text-center cursor-pointer">
|
|
|
|
<!-- Contenido modificado -->
|
|
<div wire:loading wire:target="image" class="text-center py-4">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Cargando...</span>
|
|
</div>
|
|
<p>Subiendo imagen...</p>
|
|
</div>
|
|
|
|
<div wire:loading.remove wire:target="image">
|
|
@if(!$imagePath && !$image)
|
|
<i class="fas fa-cloud-upload-alt fa-3x mb-2 text-muted"></i>
|
|
<p class="mb-1">Arrastra y suelta tu imagen aquí</p>
|
|
<p class="text-muted small">o haz clic para seleccionar</p>
|
|
<!-- Input file modificado -->
|
|
<input type="file"
|
|
wire:model="image"
|
|
class="d-none"
|
|
id="fileInput"
|
|
x-on:change="$wire.uploadImage(); event.stopPropagation();">
|
|
<button type="button"
|
|
class="btn btn-sm btn-outline-primary mt-2"
|
|
onclick="document.getElementById('fileInput').click()">
|
|
Seleccionar archivo
|
|
</button>
|
|
@endif
|
|
|
|
<!-- Resto del contenido se mantiene igual -->
|
|
</div>
|
|
</div>
|
|
|
|
@error('image')
|
|
<div class="alert alert-danger mt-2">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
=======
|
|
<div>
|
|
<!-- Preview de imagen -->
|
|
<div class="relative mb-4">
|
|
<img src="{{ $photo ? $photo->temporaryUrl() : ($currentImage ?? $placeholder) }}"
|
|
alt="Preview"
|
|
class="w-32 h-32 rounded-full object-cover border-2 border-gray-300">
|
|
|
|
@if($photo || $currentImage)
|
|
<button type="button"
|
|
wire:click="removePhoto"
|
|
class="absolute top-0 right-0 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition"
|
|
title="Eliminar foto">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Input de archivo -->
|
|
<label class="cursor-pointer bg-white px-4 py-2 rounded-md shadow-sm border border-gray-300 hover:bg-gray-50 inline-block">
|
|
<span class="text-sm font-medium text-gray-700">
|
|
{{ $photo || $currentImage ? 'Cambiar imagen' : 'Seleccionar imagen' }}
|
|
</span>
|
|
<input type="file"
|
|
wire:model="photo"
|
|
class="hidden"
|
|
accept="image/*"
|
|
name="{{ $fieldName }}_input"> <!-- Input oculto para Livewire -->
|
|
|
|
<!-- Input real para el formulario -->
|
|
@if($photo)
|
|
<input type="hidden" name="{{ $fieldName }}" value="{{ $photo->getFilename() }}">
|
|
@elseif($currentImage)
|
|
<input type="hidden" name="{{ $fieldName }}" value="current">
|
|
@endif
|
|
</label>
|
|
|
|
@error('photo')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
|
|
<p class="mt-1 text-xs text-gray-500">PNG, JPG o JPEG (Max. 2MB)</p>
|
|
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
|
</div> |