Subamos archivos con Vue y FilePond

Oscar Uve
Oscar Uve
Apr 30 · 4 min read

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

¡Recuerda suscribirte a nuestro newsletter para recibir noticias y contenido exclusivo de Fixter!

FixterGeek

No basta con ser programador, toma el camino del desarrollador.

Oscar Uve

Written by

Oscar Uve

FixterGeek

No basta con ser programador, toma el camino del desarrollador.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade