Flask 13. Subiendo Archivos al servidor con Flask-WTF

 

Anteriormente. Flask 12. Formularios con Flask-WTF

Subir archivos al servidor usando Flask-WTF

    Habrá ocasiones en las que necesitarás subir archivos a tu servidor. Imagina por ejemplo que tienes una página web de una tienda y tienes que subir imágenes de nuevos artículos que quieres vender. Aunque se puede hacer de otras formas, aprovechando que tenemos fresco la creación de formularios con Flask-WTF vamos a hacerlo de esta manera. 

Lo primero vamos a crear un nuevo directorio, dentro de static, llamado img donde guardaremos las imágenes que vayamos subiendo.

Directorio_de_trabajo/static/img

Luego creamos el archivo forms.py que tendrá el código de nuestro formulario. Importamos las librerías necesarias y creamos la clase subir_archivo usando las propiedades FileField y SubmitField para crear los campos. También importamos el validador DataRequired para que sea un campo obligatorio que no se pueda dejar en blanco.

Ahora vamos a programar la página html que contendrá el código de la página y el formulario. La llamaré como siempre, formulario_post.html.

Una cosa importante es que dentro de la etiqueta form hay que usar el atributo:

enctype="multipart/form-data"

lo que nos va a servir para poder enviar archivos a través del método POST.

Lo demás es igual que crear cualquier otro formulario. Insertamos el token se seguridad y creamos los campos "campo_subir" y "enviar".

Ya solo nos queda el archivos de vistas. Solo tendrá una vista que será la vista inicial. (inicio.py)

Importamos las librerías que nos permiten crear la aplicación de Flask y renderizar la página html. Luego importamos el módulo form que creamos al principio del capítulo y que tiene que estar al mismo nivel que la aplicación principal, el archivo inicio.py. Una novedad es que la última librería que importamos es werkzeug.utils. De ella utilizamos secure_filename. Resumidamente lo que hace esta librería es que nosotros le pasamos un nombre de archivo y el nos devuelve una versión segura del mismo que luego podemos guardar en el sistema operativo que tengamos. 

Creamos la clave de seguridad, y definimos la vista a la que se podrá aceder con el método GET o POST.

Cuando acedamos por primera vez lo haremos con el método GET con lo que se renderizará el archivo formulario_post.html con un formulario con los campos en blanco. Cuando seleccionemos el archivo, este se valide y se envíe lo hará usando el método POST. Esto hará que form.validate_on_submit sea Verdadero y se ejecute lo que está en su interior.

Creamos un objeto llamado f, de fichero, que recogerá los datos que le hemos pasado en el formulario, vamos el archivo a subir.

Establecemos un nombre_fichero que sea compatible con el sistema de archivos (lo hacemos con la función secure_filename):

nombre_fichero = secure_filename(f.filename)

Y lo guardamos en el directorio adecuado:

f.save(app.root_path+"/static/img/"+nombre_fichero)

La aplicación da la ruta en el directorio para nuestra aplicación principal, luego le añadimos la ruta donde vamos a guardar la imagen (/static/img/) y finalmente le sumamos el nombre del fichero.

Si ejecutas el programa inicio.py obtendrás un formulario donde podrás seleccionar el archivo a subir. 

y una vez enviado quedará guardado en el directorio img de la carpeta static. y tendrás un mensaje de que la imagen se ha subido correctamente.

Código con los archivos del capitulo.

Próximo Episodio. Flask 14. Usando una base de datos en Flask, Flask-SQLAlchemy.