Subamos archivos con Vue y FilePond
La biblioteca de carga de archivos FilePond ha estado activa durante poco más de un año y es momento de que exploremos cómo se puede integrar con Vue. En este artículo, configuraremos una nueva aplicación Vue y vincularemos la aplicación con el adaptador Vue FilePond. Cuando hayamos terminado, configuraremos una conexión a un backend que recibirá nuestros archivos cargados.
Usaremos Vue CLI para crear rápidamente nuestra aplicación base de Vue. Si estás familiarizado con este proceso, probablemente debas pasar a la sección de integración con FilePond.
Creando una aplicación Vue
Asumiendo que ya instalaste Node y Vue CLI (si aún no lo haces, este es un buen momento), ejecuta el siguiente comando desde tu terminal. Esto creará una carpeta “my-app” que contendrá nuestra aplicación Vue.
vue create my-app
Nos aparecerán una o más preguntas, responderemos con las opciones predeterminadas.
Cuando la instalación haya finalizado, entraremos a nuestro proyecto.
cd my-app
Ahora iniciamos el servidor local.
npm run serve
Vayamos a http://localhost:8080/ para ver nuestra aplicación Vue.
Puedes detener la aplicación Vue desde tu terminal presionando las teclas CTRL y C al mismo tiempo.
Integración con FilePond
Con nuestra aplicación Vue lista, ahora podemos agregar el adaptador FilePond Vue.
Detengamos nuestra app (presiona CTRL + C) e instalemos el adaptador.
npm install filepond vue-filepond --save
Ahora que los archivos del adaptador se han instalado, reiniciemos nuestra app, para que podamos comenzar a hacer cambios.
Agregaremos el componente FilePond a la página de inicio de la aplicación, en realidad probablemente lo ocuparás en otra parte, pero para el propósito de este artículo será suficiente.
Primero necesitamos importar el componente FilePond y su archivo CSS.
Abre el archivo “src/App.vue” y agrega las siguientes líneas en la parte superior del bloque <script>.
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';Ahora necesitamos registrar nuestro componente FilePond. Lo hacemos agregándolo a la lista de componentes como se muestra a continuación.
export default {
name: 'app',
components: {
FilePond: vueFilePond()
}
}El siguiente paso es agregar el componente al HTML. Editemos el HTML en la etiqueta <template> y reemplacemos el contenido de <div> con la etiqueta <FilePond/>.
<template>
<div id="app">
<FilePond/>
</div>
</template>El área de arrastrar y soltar de FilePond ahora debería mostrarse en la pantalla
Ahora podemos comenzar a configurar FilePond a placer nuestro.
Por defecto, FilePond solo acepta un archivo, esto se debe a que trabaja como un elemento input de archivoy copia su comportamiento estándar.
Para habilitar la subida de múltiples archivos, vamos a agregar el atributo allowMultiple.
<FilePond allowMultiple="true"/>Vamos a soltar una carpeta o seleccionar varios archivos para verla en acción.
Al igual que en el input de archivos clásico, los archivos se cargan en FilePond pero no hacen nada más, simplemente se quedan ahí. Es muy probable que queramos enviarlos a nuestro backend. Haremos esto proporcionando a FilePond el atributo de servidor.
Si tienes un servidor listo y está configurado para manejar objetos de archivo, deberías usarlo; de lo contrario, configuraremos el FilePond PHP Boilerplate (descarga el repositorio y ejecuta vagrant up).
<FilePond allowMultiple="true" server="http://192.168.33.10"/>Con la ubicación del servidor configurada, FilePond enviará (POST) automáticamente los archivos soltados y seleccionados a la URL proporcionada.
Las llamadas al servidor de FilePond predeterminadas se describen en los documentos de configuración del servidor. El atributo del servidor se puede ajustar en un alto grado, esto permite que FilePond se integre básicamente con cualquier solución de almacenamiento de archivos local o remoto.
Registremos el complemento de vista previa de la imagen de FilePond para que las imágenes agregadas, se vean más agradables.
npm install filepond-plugin-image-preview --save
Ahora necesitamos importar y registrar el plugin con el core de FilePond. Tendremos que modificar la llamada vueFilePond para usar el plugin de vista previa de la imagen.
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';export default {
name: 'app',
components: {
FilePond: vueFilePond(FilePondPluginImagePreview)
}
}
¡Hecho! Vamos a reiniciar la aplicación y soltar nuestra primera imagen.
Y eso es todo sobre lo básico de cargar archivos con Vue y FilePond.
Puedes mejorar el componente con funciones como la corrección automática de la orientación EXIF, el recorte de imágenes, el cambio de tamaño, las transformaciones de imagen del lado del cliente, la edición de imágenes y otros complementos.
Hay una lista completa de propiedades y eventos que puedes configurar para que FilePond se ajuste a tus necesidades.
Artículo traducido originalmente de Dev.to — Rik Schennink
