Différences

Ci-dessous, les différences entre deux révisions de la page.

--- python:flask:upload [2020/12/05 08:56]
marclebrun [Utilisation du fichier]
+++ python:flask:upload [2021/10/08 07:39] (Version actuelle)
marclebrun [Javascript]
@@ Ligne 3: / Ligne 3: @@
 Tutoriel: [[https://pythonise.com/series/learning-flask/flask-uploading-files]]
-===== Template formulaire =====
+===== 1. Upload traditionnel =====
-//Cet exemple utilise **Bootstrap** pour styler le formulaire.//
+==== Template formulaire ====
 <code html upload.html>
-<div class="container">
+<h1>Uploader un fichier</h1>
-    <div class="row">
-        <div class="col">
-            <h1>Uploader un fichier</h1>
+<form method="POST" enctype="multipart/form-data">
+    <input type="file" name="fichier" id="fichier">
-            <form method="POST" enctype="multipart/form-data">
+    <label for="fichier">Sélectionnez un fichier...</label>
+    <button type="submit">Envoyer</button>
-                <div class="form-group">
+</form>
-                    <div class="custom-file">
-                        <input type="file"
-                               class="custom-file-input"
-                               name="fichier" id="fichier">
-                        <label for="fichier"
-                               class="custom-file-label">Sélectionnez un fichier...</label>
-                    </div>
-                    <button type="submit" class="btn btn-primary mt-3">Uploader</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 </code>
-===== Vue =====
+==== 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:
@@ Ligne 49: / Ligne 32: @@
             return redirect(request.url)
+    # Sinon afficher le formulaire
     return render_template("upload.html")
 </code>
-===== Utilisation du fichier =====
+==== Utilisation du fichier ====
 Pour utiliser le fichier uploadé il faut l'enregistrer quelque part.
@@ Ligne 80: / Ligne 64: @@
 ^ 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>

Cramnurbel

Outils pour utilisateurs

Outils du site

Différences

Outils de la page