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>
Related
I have a python flask app with login module implemented using extension python flask. In my login method.
The Error Message
app.py
# import the Flask class from the flask module
from flask import Flask, render_template, redirect, url_for, request, session
# create the application object
app = Flask(__name__)
app.secret_key = "hello"
# use decorators to link the function to a url
##app.route('/')
#def home():
# return "Hello, World!" # return a string
#app.route('/index', methods=['GET'])
def index():
if session.get ('username'):
return render_template('index.html')
else:
return render_template('login.html') # render a template
# route for handling the login page logic
#app.route('/', methods=['GET', 'POST'])
def login():
error = None
if request.method == 'POST':
if request.form['username'] != 'admin' or request.form['password'] != 'admin':
error = 'Invalid Credentials. Please try again.'
else:
session['username'] = True
return redirect(url_for('index'))
return render_template('login.html', error=error)
# start the server with the 'run()' method
if __name__ == '__main__':
app.run(debug=True)
login page
login.html
<html>
<head>
<title>Flask Intro - login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<h1>Please login</h1>
<br>
<form action="" method="post">
<input type="text" placeholder="Username" name="username" value="{{
request.form.username }}">
<input type="password" placeholder="Password" name="password" value="{{
request.form.password }}">
<input class="btn btn-default" type="submit" value="Login">
</form>
{% if error %}
<p class="error"><strong>Error:</strong> {{ error }}</p>
{% endif %}
</div>
</body>
</html>
index.html
<DOCTYPE Html>
<html>
<head>
<tile>Addressing a Site</tile>
</head>
<body>
<address>welcome.</address>
</body>
</html>
i am trying to create a session between login and index page,just getting started with python flask framework, login session not working well.
It seems like you are actually having an issue with the methods rather than the session not working.
The Method Not Allowed error means that you are sending a GET/POST request to a page that does not accept that type of request.
Try changing the start of your login form to this
<form action="{{ url_for('login') }}" method="POST">
I just got it running on my computer and this works, the reason it did not work before was because the form was sending the post request to the /index route, which only accepts GET request.
Also, I noticed something else you may want to change.
You currently have this on your index route
if session.get ('username'):
return render_template('index.html')
else:
return render_template('login.html')
But it would be better to change that to this
if session.get ('username'):
return render_template('index.html')
else:
return redirect(url_for('login'))
That way the user is sent back to the login page rather than just being shown the login template from the index page.
I hope all of that helps.
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>
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 %}
As we all know the simplest way to upload a file in php is with this code :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>
I want a method to upload a file with python the simplest as possible, a file from the current directory like this:
import anyuploadmodule
upload(file)
Is there a such module can do this ?
There isn't anything quite that simple out there, but micro-frameworks like Flask can be lightweight and simple starting points. You'll want to checkout the documentation. Here's a snippet to get you started:
# -*- coding: utf-8 -*-
import os
from flask import Flask, request, redirect, url_for
from werkzeug import secure_filename
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = '/some/path/'
#app.route('/', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
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>'''
if __name__ == '__main__':
app.run()