Upload

Form

Subida de archivos con drag & drop, progreso en tiempo real vía Livewire, validación del lado del cliente (tipo, tamaño, cantidad), previews de imágenes, pegado desde portapapeles y fallback sin Livewire.

Uso básico

Avatar

Drag & drop or browse

{{-- Con Livewire --}}
<x-kore::upload wire:model="avatar" label="Avatar" accept="image/*" :max-size="5" />

{{-- Sin Livewire (input file estándar) --}}
<x-kore::upload name="document" label="Documento" accept=".pdf" />

{{-- Con Livewire --}}
<x-kore::upload wire:model="avatar" label="Avatar" accept="image/*" :max-size="5" />

{{-- Sin Livewire (input file estándar) --}}
<x-kore::upload name="document" label="Documento" accept=".pdf" />

Variantes

Dropzone (por defecto) y button.

Dropzone

Drag & drop or browse

Botón

{{-- Dropzone --}}
<x-kore::upload wire:model="file" label="Dropzone" />

{{-- Button --}}
<x-kore::upload wire:model="file" label="Botón" variant="button" />

{{-- Dropzone --}}
<x-kore::upload wire:model="file" label="Dropzone" />

{{-- Button --}}
<x-kore::upload wire:model="file" label="Botón" variant="button" />

Múltiples archivos

Permite subir varios archivos con límites de cantidad y tamaño.

Fotos

Drag & drop or browse

<x-kore::upload wire:model="photos" label="Fotos"
    multiple :max-files="5" :max-size="3"
    accept="image/png,image/jpeg,.webp" />

<x-kore::upload wire:model="photos" label="Fotos"
    multiple :max-files="5" :max-size="3"
    accept="image/png,image/jpeg,.webp" />

Validación cliente

Los archivos se validan antes de iniciar la subida. Se verifican tipo, tamaño y cantidad.

Documentos

Drag & drop or browse

<x-kore::upload wire:model="docs" label="Documentos"
    accept=".pdf,.docx" :max-size="10" :max-files="3" multiple />

<x-kore::upload wire:model="docs" label="Documentos"
    accept=".pdf,.docx" :max-size="10" :max-files="3" multiple />

Preview de imágenes

Habilitado por defecto. Las imágenes muestran miniatura; los demás archivos un icono genérico.

Con preview

Drag & drop or browse

Sin preview

Drag & drop or browse

{{-- Con preview (default) --}}
<x-kore::upload wire:model="file" label="Con preview" accept="image/*" />

{{-- Sin preview --}}
<x-kore::upload wire:model="file" label="Sin preview" :preview="false" />

{{-- Con preview (default) --}}
<x-kore::upload wire:model="file" label="Con preview" accept="image/*" />

{{-- Sin preview --}}
<x-kore::upload wire:model="file" label="Sin preview" :preview="false" />

Pegar del portapapeles

Habilitado por defecto. Ctrl+V / Cmd+V con el componente enfocado para pegar imágenes.

Pega una imagen

Drag & drop or browse

Sin paste

Drag & drop or browse

{{-- Con paste (default) --}}
<x-kore::upload wire:model="file" label="Pega una imagen" />

{{-- Sin paste --}}
<x-kore::upload wire:model="file" label="Sin paste" :pasteable="false" />

{{-- Con paste (default) --}}
<x-kore::upload wire:model="file" label="Pega una imagen" />

{{-- Sin paste --}}
<x-kore::upload wire:model="file" label="Sin paste" :pasteable="false" />

Eliminar y limpiar

Botón de eliminar por archivo y botón de limpiar todo.

Archivo

Drag & drop or browse

Archivos

Drag & drop or browse

{{-- Eliminar por archivo --}}
<x-kore::upload wire:model="file" label="Archivo" deletable />

{{-- Limpiar todo --}}
<x-kore::upload wire:model="files" label="Archivos" multiple clearable />

{{-- Eliminar por archivo --}}
<x-kore::upload wire:model="file" label="Archivo" deletable />

{{-- Limpiar todo --}}
<x-kore::upload wire:model="files" label="Archivos" multiple clearable />

Modo estático

Muestra archivos ya subidos sin zona de carga. Útil en formularios de edición.

Adjuntos

<x-kore::upload label="Adjuntos" static
    :static-files="[
        ['name' => 'reporte.pdf', 'size' => 245760, 'type' => 'application/pdf'],
        ['name' => 'foto.jpg', 'size' => 1048576, 'type' => 'image/jpeg', 'url' => '/storage/foto.jpg'],
    ]"
    deletable />

<x-kore::upload label="Adjuntos" static
    :static-files="[
        ['name' => 'reporte.pdf', 'size' => 245760, 'type' => 'application/pdf'],
        ['name' => 'foto.jpg', 'size' => 1048576, 'type' => 'image/jpeg', 'url' => '/storage/foto.jpg'],
    ]"
    deletable />

Auto upload

Cuando está deshabilitado, los archivos se preparan localmente y el usuario debe hacer clic en Subir.

Archivos

Drag & drop or browse

<x-kore::upload wire:model="files" label="Archivos"
    :auto-upload="false" multiple deletable clearable />

<x-kore::upload wire:model="files" label="Archivos"
    :auto-upload="false" multiple deletable clearable />

Reintentos

Reintenta automáticamente las subidas fallidas hasta el máximo configurado.

Archivo

Drag & drop or browse

<x-kore::upload wire:model="file" label="Archivo"
    retryable :max-retries="3" :retry-delay="2000" />

<x-kore::upload wire:model="file" label="Archivo"
    retryable :max-retries="3" :retry-delay="2000" />

Cámara

En dispositivos móviles, abre la cámara directamente en lugar del selector de archivos.

Selfie

Drag & drop or browse

Escanear

Drag & drop or browse

{{-- Cámara frontal (selfie) --}}
<x-kore::upload wire:model="selfie" label="Selfie" capture="user" accept="image/*" />

{{-- Cámara trasera (escaneo) --}}
<x-kore::upload wire:model="scan" label="Escanear" capture="environment" accept="image/*" />

{{-- Cámara frontal (selfie) --}}
<x-kore::upload wire:model="selfie" label="Selfie" capture="user" accept="image/*" />

{{-- Cámara trasera (escaneo) --}}
<x-kore::upload wire:model="scan" label="Escanear" capture="environment" accept="image/*" />

Estados

Disabled, required, hint y error.

Disabled

Drag & drop or browse

Required *

Drag & drop or browse

Con hint

Drag & drop or browse

Máximo 5 MB, PNG o JPG

Con error

Drag & drop or browse

Por favor sube un archivo.

<x-kore::upload label="Disabled" disabled />
<x-kore::upload label="Required" required />
<x-kore::upload label="Con hint" hint="Máximo 5 MB, PNG o JPG" />
<x-kore::upload label="Con error" error="Por favor sube un archivo." />

<x-kore::upload label="Disabled" disabled />
<x-kore::upload label="Required" required />
<x-kore::upload label="Con hint" hint="Máximo 5 MB, PNG o JPG" />
<x-kore::upload label="Con error" error="Por favor sube un archivo." />

Props

Prop	Tipo	Default	Descripción
`label`	string\|null	null	Texto de la etiqueta
`hint`	string\|null	null	Texto de ayuda debajo del campo
`name`	string\|null	null	Nombre para detección de errores
`error`	string\|null	null	Mensaje de error manual
`variant`	string	dropzone	Variante visual: dropzone, button
`multiple`	bool	false	Permitir selección de múltiples archivos
`accept`	string\|null	null	Tipos de archivo aceptados (ej: image/*,.pdf)
`maxSize`	int\|null	null	Tamaño máximo en MB por archivo
`maxFiles`	int\|null	null	Número máximo de archivos (modo multiple)
`preview`	bool	true	Mostrar miniaturas para imágenes
`deletable`	bool	false	Mostrar botón de eliminar en cada archivo
`deleteMethod`	string	deleteUpload	Método Livewire para eliminar archivo
`clearable`	bool	false	Mostrar botón de limpiar todo
`pasteable`	bool	true	Permitir pegar archivos del portapapeles
`static`	bool	false	Mostrar archivos existentes sin zona de carga
`staticFiles`	array\|null	null	Array de objetos de archivos existentes
`disabled`	bool	false	Estado deshabilitado
`required`	bool	false	Campo obligatorio con asterisco
`showError`	bool	true	Auto-detectar errores del \$errors bag
`autoUpload`	bool	true	Subir automáticamente al seleccionar. false = modo staging
`retryable`	bool	false	Habilitar reintento automático en error
`maxRetries`	int	3	Máximo de reintentos por archivo
`retryDelay`	int	2000	Retraso en ms entre reintentos
`capture`	string\|null	null	Modo de captura de cámara: user (frontal) o environment (trasera)

Configuración

Defaults globales en config/kore-ui.php.

config/kore-ui.php

'form' => [
    'upload' => [
        'max_size' => null,              // MB por archivo (null = sin límite del lado del cliente)
        'delete_method' => 'deleteUpload',
        'auto_upload' => true,           // false = modo staging
        'retryable' => false,            // reintento automático en error
        'max_retries' => 3,
        'retry_delay' => 2000,           // ms
    ],
],

'form' => [
    'upload' => [
        'max_size' => null,              // MB por archivo (null = sin límite del lado del cliente)
        'delete_method' => 'deleteUpload',
        'auto_upload' => true,           // false = modo staging
        'retryable' => false,            // reintento automático en error
        'max_retries' => 3,
        'retry_delay' => 2000,           // ms
    ],
],

En esta página

Uso básico Variantes Múltiples archivos Validación cliente Preview de imágenes Pegar del portapapeles Eliminar y limpiar Modo estático Auto upload Reintentos Cámara Estados Props Configuración