Historial de página

Para adjuntar archivos, disponemos del componente FileUpload de Primevue (documentación). Podemos ver los diferentes modos y propiedades que tiene. Por defecto, su funcionamiento al subir el archivo es hacer un POST a la url que le indiquemos, pero en nuestro caso, como tendremos servicios sin estado, es probable que queramos mandar el archivo al backend junto con los datos de un formulario, en un solo paso. Para ello, podemos personalizar su comportamiento, indicando :customUpload="true" e implementando el handler del evento @uploader. Podemos, por ejemplo, guardar el archivo en nuestro componente Vue, simplemente teniendo @uploader="myUploader" y:

methods: {
    myUploader(event) {
        this.archivos = event.files;
    }
}

Para esto, nos interesa indicar :auto="true", para que directamente al seleccionar el archivo se ejecute esta función. El problema de esto es que al seleccionar un archivo, si le volvemos a clickar para seleccionar otro y sustituirlo no hace nada, porque el componente interpreta que ya ha subido un archivo. Para evitar esto, tenemos dos opciones.

En primer lugar, podemos usar renderización condicional, es decir, utilizar v-if para que se incluya el componente solo si no hay ningún archivo subido. Cuando hay un archivo, podemos incluir un botón, o lo que queramos, para eliminar el archivo, con v-else. De esta manera, cuando lo eliminemos, el FileUpload se volverá a incluir en su estado inicial, nos dejará subir otro archivo.

La otra forma, que no es la recomendable, es utilizar el componente modificado. Hemos implementado este componente, que es el mismo añadiendo una línea de código para indicarle que, después de subir el archivo con el uploader personalizado, se limpie su estado, pues ya lo habremos obtenido, y nos permitirá seleccionar otro: CustomFileUploader.vue. Este componente, al añadir sólo una línea de código, se utiliza exactamente igual que el original de Primevue (versión 2.4.0). Insistimos en que esta forma no es la recomendable, lo más adecuado es utilizar la primera forma, sólo incluimos ésta por si hay una casuística muy particular para la que sea necesaria.