57 lines
2.4 KiB
PHP
57 lines
2.4 KiB
PHP
<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> |