Is there a way to pull all the images from a local directory using python on flask framework & display the images on a html image gallery webpage?
Question
Actually i have a image gallery web page and there are two steps that i wanna perform ie (1) - I want to upload images from the web page to a local directory on my computer (2) - I want to display all the images that i have on the directory to another webpage that i have made as a image gallery
I have accomplished the first part of my problem successfully but the second part is bothering me and i am not able to achieve it and i have used many different techniques but none of them is working.
so, can someone please advice something, the upload function and the display function that i used is below
import os
from flask import Flask, request, redirect, url_for,
send_from_directory,render_template
from werkzeug import secure_filename
UPLOAD_FOLDER = 'E:/os/uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
@app.route('/', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
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 '''
<!doctype html>
<title>Upload new File</title>
<h1>Upload new File</h1>
<form action="" method=post enctype=multipart/form-data>
<p><input type=file name=file>
<input type=submit value=Upload>
</form>
'''
@app.route('/show')
def uploaded_file(filename):
return render_template('template.html', filename=filename)
@app.route('/uploads')
def send_file(filename):
return send_from_directory(UPLOAD_FOLDER, filename)
if __name__ == '__main__':
app.run()
the problem is it is only displaying the image that i am upload at that instance, but i want to pull multiple images and save them in some sort of data structure like a list and then iterate through it on the html page and display the images one by one
2 answers
solution1
0 2019-09-13 11:18:00
Have a look at the Flask - Jinja Templating . You can easily send multiple files to an HTML template and you can use for loop easily in the template only to iterate your list of image files and render multiple images on the same page.
Jinja templating - for loop example here: https://www.geeksforgeeks.org/python-using-for-loop-in-flask/
solution2
0 2019-09-13 11:52:38
Here is a possible approach:
python's side
import glob
# OTHERS IMPORTS
@app.route('/show')
def uploaded_file():
# this function returns as a list all the files that are in the directory
gallery_images = glob.glob('/path/to/your/directory/*')
print(gallery_images)
"""
the print will return for example: ['a.png', 'lion.jpg', 'python_logo.jpeg']
"""
return render_template('template.html', filename=galery_images)
HTML's side
...
<div class="row">
{% for f in filename %}
<div class="col-md-4">
<div class="card">
<img class="img-responsive" src="{{url_for('static',filename='images/gallery/')}}{{ f }}" width="100px" height="100px">
</div>
</div>
{% endfor %}
</div>
...
Notice how I specified the path to the directory and how I mixed it with the names of the files obtained during the iteration
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.