I am having trouble loading the Flask image

Question

I uploaded the Uploading Files document for photo albums in the project. İmage upload is not working.

Python Code :

UPLOAD_FOLDER = '/static/uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

#Album form
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route("/admin/fotografAlbumu", methods=["GET", "POST"])
@login_required
def upload():
    if request.method == 'POST':
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['photo']
        # if user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            import pdb;pdb.set_trace()
            return redirect(url_for('uploaded_file', filename=filename))
    return render_template('/admin/galeri.html')

HTML Code :

<form method="post" class="col-12" enctype="multipart/form-data">
                 <ul class="row">
                     <li class="col-xs-6 col-lg-12" style="border: none;">
                            <div class="form-group">
                                    <input id="input-id" type="file" name="photo" class="file form-control" multiple data-preview-file-type="text" data-allowed-file-extensions='["png", "jpg"]'>
                             </div>
                     </li>
                 </ul>
                 <button type="submit" class="btn form-control btn-default">Kaydet</button>
                </form>

Output : When I select images on the page and upload them, they redirect to the same page and the images are not loaded. What do I have to do? I'm working on 2 - 3 days, but I can not find a solution.

Can you confirm that the uploaded photos are showing up in `/static/uploads`? — Ben10, Sep 07 '18 at 20:42
Furthermore, where exactly in the html is the line that displays the images? — Ben10, Sep 07 '18 at 20:46
Display all images in directory : https://stackoverflow.com/questions/47877691/how-to-display-all-images-in-a-directory-with-flask — Ben10, Sep 07 '18 at 20:49

score 0 · Answer 1 · answered Sep 07 '18 at 20:52

I took a few minutes to get it working, and here you go:

python:

import os
from flask import Flask, request, render_template, send_from_directory, redirect, url_for
from werkzeug.utils import secure_filename

app = Flask(__name__)

UPLOAD_FOLDER = 'static/uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

#Album form
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route("/photo", methods=["GET", "POST"])
def upload():
    if request.method == 'POST':
        if 'photo' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['photo']
        # if user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('uploaded_file', filename=filename))
    return render_template('/add_photo.html')

@app.route('/uploaded_file/<path:filename>')
def uploaded_file(filename):
    print(filename)
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

html:

 <form method="post" class="col-12" enctype="multipart/form-data">
 <ul class="row">
   <li class="col-xs-6 col-lg-12" style="border: none;">
     <div class="form-group">
       <input id="input-id" type="file" name="photo" class="file form-control" multiple data-preview-file-type="text" data-allowed-file-extensions='["png", "jpg"]'>
     </div>
   </li>
 </ul>
 <button type="submit" class="btn form-control btn-default">Kaydet</button>
</form>

Main issue was the fact that you were trying to get file out of the form, but the form only had a field named photo.

When I select multiple images, only 1 is loaded. How do I record all of them when I select multiple pictures? — Berat Bozkurt, Sep 09 '18 at 13:55

I am having trouble loading the Flask image

1 Answers1