Just getting started with Python Flask App and working with HTML.
I am trying to build a simple image upload page that will display the uploaded image. I have been able to successfully upload and save the file just not display it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Face with ID</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Upload Face (filename = face's name (i.e. John_Smith.jpg)</h1>
<hr>
<form action="/upload-image" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label>Select image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" name="image"
id="image">
<label class="custom-file-label" for="image">Select image...</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
</div>
<img src="{{ uploaded_image }}">
</body>
</html>
FLASK APP
import os
from flask import Flask, redirect, jsonify, request, url_for, render_template, flash
app = Flask(__name__)
app.config["IMAGE_UPLOADS"] = "C:/Flask/Upload/"
#app.route("/")
def home():
return render_template("index.html")
# Route to upload image
#app.route('/upload-image', methods=['GET', 'POST'])
def upload_image():
if request.method == "POST":
if request.files:
image = request.files["image"]
# print(image + "Uploaded to Faces")
# flash('Image successfully Uploaded to Faces.')
image.save(os.path.join(app.config["IMAGE_UPLOADS"], image.filename))
filename = os.path.join(app.config["IMAGE_UPLOADS"], image.filename)
print("stored as:" + filename)
return render_template("upload_image.html", uploaded_image=filename)
return render_template("upload_image.html")
if __name__ == "__main__":
app.run()
I have tried to create a separate html for just displaying the image by returning the render_template and passing the uploaded_image=filename.
Ideally I would just like to display the uploaded image at the top of the page or below the submit button once uploaded.
Any help would be much appreciated.
You are not matching your uploads directory to the view. Try this:
#app.route('/upload-image', methods=['GET', 'POST'])
def upload_image():
if request.method == "POST":
if request.files:
image = request.files["image"]
image.save(os.path.join(app.config["IMAGE_UPLOADS"], image.filename))
return render_template("upload_image.html", uploaded_image=image.filename)
return render_template("upload_image.html")
#app.route('/uploads/<filename>')
def send_uploaded_file(filename=''):
from flask import send_from_directory
return send_from_directory(app.config["IMAGE_UPLOADS"], filename)
In your template:
<img src="{{ url_for('send_uploaded_file', filename=uploaded_image) }}" />
In case you just want to upload, analyze, and display the image without saving it to storage, i.e. api and edged image analysis, this example might be a guide for you. Flaskimio
#app.route("/",methods=['GET', 'POST'])
def index():
if request.method == 'POST':
if 'file' not in request.files:
print('No file attached in request')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
print('No file selected')
return redirect(request.url)
if file and check_allowed_file(file.filename):
filename = secure_filename(file.filename)
print(filename)
img = Image.open(file.stream)
with BytesIO() as buf:
img.save(buf, 'jpeg')
image_bytes = buf.getvalue()
encoded_string = base64.b64encode(image_bytes).decode()
return render_template('index.html', img_data=encoded_string), 200
else:
return render_template('index.html', img_data=""), 200
<form method="post" enctype="multipart/form-data">
<p><input type="file" id="file" name="file"><input type=submit value=Upload></p>
<img src="data:image/jpeg;base64,{{ img_data }}" id="img-upload" alt="img_data" class="img-upload"/>
</form>
Related
started playing with Flask and am looking to convert a few easy python scripts to be able to run through a web interface. Mostly data tweaking tools.
So, most of the tools that I have running through the command line use 2 spreadsheets and then perform operations between them using pandas (look for differences, update information, etc).
However, I can't seem to figure out how to create the interface needed to allow for users viewing the site to have 2 upload buttons (1 for each file) and then underneath that have a process button where the magic happens.
All of the documentation I have encountered either deals with uploading a single file (and then run whatever process) or allow for multiple file uploads with a single upload button.
So, a basic template would be something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h2>Upload Current File Here</h2>
<form method=post enctype=multipart/form-data>
<input type=file name=curfile>
<input type=submit value=Upload>
</form>
</div>
<div>
<h2>Upload New File Here</h2>
<form method=post enctype=multipart/form-data>
<input type=file name=newfile>
<input type=submit value=Upload>
</form>
</div>
</body>
</html>
Now for the app.py, this is the version that will load a single file and process.
from flask import Flask, request, render_template
import pandas as pd
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config["ALLOWED_FILE_EXTENSIONS"] = ["xlsx"]
app.config["MAX_IMAGE_FILESIZE"] = 16 * 1024 * 1024
#app.route('/', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
dfcur = pd.read_excel(request.files.get('curfile'))
return render_template('upload.html')
if __name__ == '__main__':
app.run(debug=True)
Hope what I posted makes sense, been looking through a lot of notes online and haven't found anything that addresses the workflow yet. I know the issue is that the file is uploaded and then the template is rendered, whereas I want to allow for both to be uploaded before doing anything.
After doing some research and going over the code I managed to make it work by adding an additional request.files for the additional file name.
I still have to incorporate what to do with the files, as this code is basically from the flask upload tutorial - but here is what is working now.
py file
import os
from flask import Flask, flash, request, redirect, url_for, send_from_directory
from flask.templating import render_template
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = 'uploads/'
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
app.config['MAX_CONTENT_LENGTH'] = 16 * 1000 * 1000
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
#app.route('/uploads/<name>')
def download_file(name):
return send_from_directory(app.config["UPLOAD_FOLDER"], name)
#app.route('/', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'curfile' not in request.files or 'newfile' not in request.files:
flash("Sorry, the upload didn't send all of the data!")
return redirect(request.url)
curfile = request.files["curfile"]
newfile = request.files["newfile"]
# If the user does not select a file, the browser submits an
# empty file without a filename.
if curfile.filename == "" or newfile.filename == "":
flash('You need to upload 2 files!')
return redirect(request.url)
if curfile and allowed_file(curfile.filename):
filename = secure_filename(curfile.filename)
curfile.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return redirect(url_for('download_file', name=filename))
return render_template("app2.html")
template file
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<html>
<body>
<form method="post" enctype="multipart/form-data">
<h2>Upload Current File</h2>
<input type="file" name="curfile">
<h2>Upload New File</h2>
<input type="file" name="newfile">
<p></p>
<input type="submit" value="Upload">
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<div class="message_flash">{{ message }}</div>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</body>
</html>
I am currently trying to upload a picture and later on process it. But I am getting an 405 error and I don't know how to fix it.
#app.route('/upload')
def upload():
return render_template('upload.html')
#app.route('/uploader', methods = ['GET', 'POST'])
def upload_f():
if request.method == 'POST':
f = request.files['file']
f.save(f.filename)
return 'file uploaded successfully'
The html form
<html>
<body>
<form action = "http://localhost:5000/uploader" method = "POST"
enctype = "multipart/form-data">
<input type = "file" name = "file" />
<input type = "submit"/>
</form>
</body>
</html>
From Miguel Grinberg's Handling File Uploads With Flask tutorial:
import imghdr
import os
from flask import Flask, render_template, request, redirect, url_for, abort, \
send_from_directory
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024
app.config['UPLOAD_EXTENSIONS'] = ['.jpg', '.png', '.gif']
app.config['UPLOAD_PATH'] = 'uploads'
def validate_image(stream):
header = stream.read(512) # 512 bytes should be enough for a header check
stream.seek(0) # reset stream pointer
format = imghdr.what(None, header)
if not format:
return None
return '.' + (format if format != 'jpeg' else 'jpg')
#app.route('/')
def index():
files = os.listdir(app.config['UPLOAD_PATH'])
return render_template('index.html', files=files)
#app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
file_ext = os.path.splitext(filename)[1]
if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
file_ext != validate_image(uploaded_file.stream):
abort(400)
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('index'))
#app.route('/uploads/<filename>')
def upload(filename):
return send_from_directory(app.config['UPLOAD_PATH'], filename)
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>File Upload</h1>
<form method="POST" action="" enctype="multipart/form-data">
<p><input type="file" name="file"></p>
<p><input type="submit" value="Submit"></p>
</form>
<hr>
{% for file in files %}
<img src="{{ url_for('upload', filename=file) }}" style="width: 64px">
{% endfor %}
</body>
</html>
#app.route('/parse', methods=['POST'])
def parse():
response = request.files['file']
file_name = response.filename
Wanted to save this as doc, docx, pdf or txt file. Any help appreciated.
There is a nice post that explains this in details: https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask
Here is the core.
index.html:
<body>
<h1>File Upload</h1>
<form method="POST" action="" enctype="multipart/form-data">
<p><input type="file" name="doc_file" accept=".doc,.docx"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
app.py:
#app.route('/', methods=['POST'])
def upload_file():
uploaded_file = request.files['doc_file']
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
return redirect(url_for('index'))
# A welcome message to test our server
#app.route('/')
def index():
"""Return the main page."""
# stedin_map = get_map()
return render_template('index.html', **locals())
This question already has answers here:
Post values from an HTML form and access them in a Flask view
(2 answers)
Closed 5 years ago.
I'm attempting to create a page that takes in a user-submitted image, and automatically redirects them to a new page where the image is rendered. Much of my code is borrowed from here: How to pass uploaded image to template.html in Flask. But I can't seem to get it to work; I run into a 400: Bad Request. It seems to me that the image is not saving under /static/images, but I am not sure why.
Here is the submission form in index.html:
<form method="POST" action="{{ url_for('predict') }}" enctype="multipart/form-data">
<label for="file-input" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input name="image-input" id="file-input" type="file" align="center" onchange="this.form.submit();">
</form>
Here is my app.py code:
from flask import Flask, render_template, request, url_for, send_from_directory, redirect
from werkzeug import secure_filename
import os
UPLOAD_FOLDER = '/static/images/'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'tiff'])
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
#app.route('/')
def index():
return render_template("index.html")
#app.route('/predict/', methods=['POST', 'GET'])
def predict():
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/<filename>')
def uploaded_file(filename):
return render_template('classify.html', filename=filename)
#app.route('/uploads/<filename>')
def send_file(filename):
return send_from_directory(UPLOAD_FOLDER, filename)
if __name__ == '__main__':
app.run(debug=True)
And finally, I try to render it in classify.html, with the following code:
{% if filename %}
<h1>some text<img src="{{ url_for('send_file', filename=filename) }}"> more text!</h1>
{% else %}
<h1>no image for whatever reason</h1>
{% endif %}
Where am I going wrong here?
Looks like I was missing an argument in my input: name=file in index.html. Adding that fixed the error. Altogether, the input line looks like this:
<input id="file-input" name=file type="file" align="center" onchange="this.form.submit();">
I am new to Flask and web applications in general. I have images that could be located in different locations:
-directory1
-image1
-directory2
-subdirectory
-image2
-directory3
-flask_app
-app.py
-static
The purpose of the app is to dynamically provide access to the content in other directories which is not static and subject to change for each user. The content cannot be moved or modified.
How do I display images from other directories within the app without moving or modifying them based on input values from the user?
I have the following so far but the image link is broken:
from flask import Flask, render_template, request, send_from_directory
current_filepath = /directory2/image{}.png
app = Flask(__name__, static_url_path='')
#app.route('/js/<path:filename>')
def download_file(filename):
return send_from_directory('js', filename)
#app.route('/', methods=['GET','POST'])
def print_form():
if request.method == 'POST':
test = current_filepath.format(request.form['image_num'])
return render_template('form.html', result=test)
if request.method == 'GET':
return render_template('form.html')
if __name__ == '__main__':
app.run(debug=True)
With the following form.html file:
<!DOCTYPE html>
<html lang="en">
<body>
<form method="POST" action=".">
<input id="post_form_id" name="image_num" value="" />
<input type="submit">
</form>
{% if result %}
{{ url_for('download_file', filename= result) }}
<img src={{ url_for('download_file', filename= result) }}>
{% endif %}
</body>
</html>
app/
app.py
...
uploads/
dir1/
img1.png
...
...
app.config['UPLOAD_FOLDER'] = 'path/to/uploads/dir1'
#app.route('/file/<path:filename>')
def img_file(filename):
filename = filename + '.png'
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
#app.route('/', methods=['GET', 'POST'])
def index():
filename = None
if request.method == 'POST':
filename = request.form['img_num']
return render_template('form.html', filename=filename)
<form method="post" action="" >
<input type="text" id="form_id" name="img_num">
<input type="submit" value="submit">
</form>
{% if filename %}
<img src=" {{ url_for('img_file', filename=filename) }}">
{% endif %}