file

Funcionalidades

• Seleccionar imagenes
• Arrastras y soltar imagenes
• Renderizar imagenes seleccionadas
• Eliminar imagenes renderizadas

Componente File

El componente File te permite crear campos de carga de archivos personalizados con varias propiedades y opciones. Puedes utilizarlo para permitir que los usuarios carguen archivos en formularios u otras interacciones.

Uso en Componentes

Utilizando en un Componente

Puedes utilizar el componente File en tus componentes de la siguiente manera:

<template>
  <File
    :placeholder="'Cargar archivo'"
    :accept="['image/png', 'image/jpeg', 'application/pdf']"
    :validations="validations"
    :listen-form="true"
    v-model:model-value="fileValue"
    @on-change="handleFileChange"
    @on-remove="handleFileRemove"
    @set-error="handleFileError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const fileValue = ref(null);

const validations = ref({
    required: true,
});

// Métodos para manejar eventos
const handleFileChange = (files) => {
  // Lógica para manejar el cambio de archivo
};

const handleFileRemove = ({ image, index }) => {
  // Lógica para manejar la eliminación de archivo
};

const handleFileError = (value) => {
  // Lógica para manejar el error en el campo de archivo
};
</script>

Autocompletar

si quieres autcompletar las imagenges para actualizar

const fileValue = ref([
  { image: 'www.api.com/images/image1.png' },
  { image: 'www.api.com/images/image2.png' },
  // ...otros objetos
]);

o si quieres agregarle data extra para trackear el file/imagen actual

const fileValue = ref([
  { image: 'www.api.com/images/image1.png', id: 1, name: 'name1' },
  { image: 'www.api.com/images/image2.png', id: 2, name: 'name2' },
  // ...otros objetos
]);

De esta manera funciona con el componente FormFile

Propiedades

El componente File acepta las siguientes propiedades:

Propiedad	Tipo	Valor por defecto	Descripción
placeholder	String		Define el texto de marcador de posición para el campo de carga de archivo.
accept	Array de string	['image/png', 'image/jpeg', 'application/pdf']	Define los tipos de archivo aceptados.
value	Cualquier tipo		Define el valor del campo de carga de archivo.
disabled	Boolean	false	Deshabilita el campo de carga de archivo.
state	Boolean, null	null	Indica el estado del campo de carga de archivo.
customClass	String		Agrega clases de estilo personalizadas al campo de carga de archivo.
validations	Object		Define las validaciones para el campo de carga de archivo.
errors	Array de string	[]	Muestra los mensajes de error asociados al campo de carga de archivo.
listenForm	Boolean		Indica si se debe escuchar los cambios en el formulario que contiene el campo de carga de archivo.
resetOnOpen	Boolean	false	Restablece el valor del campo de carga de archivo al abrirlo.
displayImages	Boolean	true	Muestra las imágenes previas de los archivos cargados.

Eventos

El componente File emite los siguientes eventos:

Evento	Parámetros	Descripción
update:model-value	value: Array<object> or Array<File>	Emitido cuando cambia el valor
onChange	value: Array<object> or Array<File>	Emitido al cambiar el contenido
onRemove	{ image: any, index: number }	Emitido al eliminar un archivo
setError	value: boolean	Emitido cuando cambia el estado de error