El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com permetre als usuaris carregar fitxers a la nostra aplicació Flask. La càrrega de fitxers és una funcionalitat comuna en moltes aplicacions web, com ara formularis de contacte, aplicacions de gestió de documents, etc. Utilitzarem la biblioteca Flask-WTF per gestionar els formularis i Flask-Uploads per gestionar les càrregues de fitxers.

Configuració del Projecte

Instal·lació de les Dependències

Primer, hem d'assegurar-nos que tenim instal·lades les biblioteques necessàries. Pots instal·lar-les utilitzant pip:

pip install Flask-WTF Flask-Uploads

Configuració de l'Aplicació

Afegim la configuració necessària al nostre fitxer principal de l'aplicació Flask:

from flask import Flask
from flask_wtf import FlaskForm
from flask_uploads import UploadSet, configure_uploads, IMAGES
from flask_wtf.file import FileField, FileAllowed, FileRequired
from wtforms import SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'
app.config['UPLOADED_PHOTOS_DEST'] = 'uploads/photos'

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)

Creació del Formulari de Càrrega

Utilitzarem Flask-WTF per crear un formulari que permeti als usuaris carregar fitxers:

class UploadForm(FlaskForm):
    photo = FileField('Photo', validators=[
        FileRequired(),
        FileAllowed(photos, 'Only images are allowed!')
    ])
    submit = SubmitField('Upload')

Creació de la Ruta per a la Càrrega de Fitxers

Ara, crearem una ruta que renderitzi el formulari i gestioni la càrrega de fitxers:

from flask import render_template, request, redirect, url_for

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        filename = photos.save(form.photo.data)
        return f'File uploaded successfully: {filename}'
    return render_template('upload.html', form=form)

Creació de la Plantilla HTML

Creem una plantilla HTML per al formulari de càrrega de fitxers:

<!-- templates/upload.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload File</title>
</head>
<body>
    <h1>Upload a Photo</h1>
    <form method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        {{ form.photo.label }} {{ form.photo() }}
        {{ form.submit() }}
    </form>
</body>
</html>

Prova de la Funcionalitat

Ara, podem executar la nostra aplicació Flask i visitar la ruta /upload per veure el formulari de càrrega de fitxers en acció. Quan carreguem un fitxer, aquest es desarà a la carpeta uploads/photos.

Exercici Pràctic

Exercici

Modifica l'aplicació per permetre la càrrega de múltiples tipus de fitxers (no només imatges).
Afegeix una funcionalitat que mostri una llista de fitxers carregats a la pàgina principal.

Solució

Per permetre la càrrega de múltiples tipus de fitxers, podem modificar la configuració de UploadSet:

files = UploadSet('files', ('txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'))
app.config['UPLOADED_FILES_DEST'] = 'uploads/files'
configure_uploads(app, files)

I el formulari:

class UploadForm(FlaskForm):
    file = FileField('File', validators=[
        FileRequired(),
        FileAllowed(files, 'Only specific file types are allowed!')
    ])
    submit = SubmitField('Upload')

Per mostrar una llista de fitxers carregats, podem modificar la ruta principal:

import os

@app.route('/')
def index():
    files_list = os.listdir(app.config['UPLOADED_FILES_DEST'])
    return render_template('index.html', files=files_list)

I la plantilla HTML:

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Uploaded Files</title>
</head>
<body>
    <h1>Uploaded Files</h1>
    <ul>
        {% for file in files %}
            <li>{{ file }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Conclusió

En aquesta secció, hem après com permetre als usuaris carregar fitxers a la nostra aplicació Flask utilitzant Flask-WTF i Flask-Uploads. Hem configurat l'aplicació, creat un formulari de càrrega, gestionat la càrrega de fitxers i mostrat els fitxers carregats. Aquesta funcionalitat és essencial per a moltes aplicacions web i proporciona una base sòlida per a futures millores i personalitzacions.

Càrrega de Fitxers

Configuració del Projecte

Instal·lació de les Dependències

Configuració de l'Aplicació

Creació del Formulari de Càrrega

Creació de la Ruta per a la Càrrega de Fitxers

Creació de la Plantilla HTML

Prova de la Funcionalitat

Exercici Pràctic

Exercici

Solució

Conclusió

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask