añadir nuevas funcionalidades

resources/views/livewire/image-uploader.blade.php

@@ -0,0 +1,57 @@
+<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>