====== Upload ======

Tutoriel: [[https://pythonise.com/series/learning-flask/flask-uploading-files]]

===== 1. Upload traditionnel =====

==== Template formulaire ====

<code html upload.html>
<h1>Uploader un fichier</h1>

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="fichier" id="fichier">
    <label for="fichier">Sélectionnez un fichier...</label>
    <button type="submit">Envoyer</button>
</form>
</code>

==== Vue ====

<code python app.py>
@app.route("/test_upload", methods=["GET", "POST"])
def test_upload():

    # Si le formulaire a été posté
    if request.method == "POST":
        if request.files:
            fichier = request.files["fichier"]
            
            # ... faire quelque chose avec le fichier ...
            
            return redirect(request.url)
                
    # Sinon afficher le formulaire
    return render_template("upload.html")
</code>

==== Utilisation du fichier ====

Pour utiliser le fichier uploadé il faut l'enregistrer quelque part.

Définir une valeur dans la configuration. Le chemin doit être absolu. Il peut
être en dehors de l'application.

Par exemple :

<code python>
app.config['UPLOAD_PATH'] = "/home/marc/website/uploads"
</code>

Ensuite :

<code python>
import os
from werkzeug.utils import secure_filename

filename = secure_filename(fichier.filename)

fichier.save(os.path.join(app.config["UPLOAD_PATH"], filename))
</code>

^ fichier.filename   | Nom original du fichier uploadé |
^ fichier.save(path) | Enregistre le fichier           |
^ secure_filename    | "nettoyage" du nom du fichier   |

==== Sécurité ====

Vérifier qu'il y a bien eu un fichier sélectionné :

<code python>
fichier = request.files["fichier"]
if fichier.filename:
    ...
else:
    flash(u"Veuillez sélectionner un fichier !", "danger")
    return redirect(request.url)
</code>

Vérifier que le type fichier est autorisé :

<code python>
ext = filename.rsplit(".", 1)[1]
if ext.upper() in ["JPEG", "JPG", "PNG", "GIF"]:
    ...
else:
    flash(u"Ce type de fichier n'est pas autorisé !", "danger")
    return redirect(request.url)
</code>

===== 2. Upload via Ajax =====

==== Formulaire ====

<code html upload.html>
<h1>Ajax File Upload</h1>
     
<form id="frmUpload" method="POST" enctype="multipart/form-data">
    <label for="edtFile">Sélectionnez un fichier à uploader</label><br/>
    <input type="file" name="edtFile" id="edtFile"><br/>
    <button id="btnUpload">Envoyer</button>
</form>
</code>

==== Javascript ====

<code javascript upload.js>
let frmUpload = document.getElementById('frmUpload');
let btnUpload = document.getElementById('btnUpload');

btnUpload.addEventListener('click', event => { btnUploadClick(event) });

function btnUploadClick(event) {

    event.preventDefault();
    
    fetch('/upload', {
        method: 'POST',
        body  : new FormData(frmUpload)
    }).then(
        //...
    )
}
</code>

==== Vue ====

<code python app.py>
@app.route("/upload", methods=["POST"])
def upload():
    result = {}
    
    if 'edtFile' in request.files:
        if request.files['edtFile'].filename:
            
            fichier = request.files['edtFile']
            fichier.save('/home/marc/...')
            
            # ...
            
        else:
        
            result['error'] = "Erreur, il n'y a pas de fichier."
            
    return jsonify(result)
</code>