I want to render an image from gridfs on my html pyge using flask.
I store the image in my mongodb using gridfs with one button and also store the ObjectId of the image in a serverside session using Flask-Session.
When I click on another button, I get the correct ObjectId of the image stored before via my session and then want to render this image from gridfs in my html page, but I don't know how to do it.
My app.py file:
from flask import Flask, render_template, request, redirect, session
from werkzeug.utils import secure_filename
from pymongo import MongoClient
from gridfs import GridFS
from flask_session import Session
DB = 'test-grid'
COLLECT = 'test-session'
client = MongoClient('mongodb://127.0.0.1:27017')
db = client[DB]
fs = GridFS(db)
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 16*1024*1024
app.config['SESSION_TYPE'] = 'mongodb'
app.config['SESSION_MONGODB'] = client
app.config['SESSION_MONGODB_DB'] = DB
app.config['SESSION_MONGODB_COLLECT'] = COLLECT
Session(app)
#app.route("/")
def home():
return render_template("index.html")
#app.route('/upload', methods=['POST'])
def upload_file():
if request.method == 'POST':
f = request.files['file']
filename = secure_filename(f.filename)
f_id = fs.put(f, filename=filename)
session['f_id'] = f_id
session['filename'] = filename
return redirect('/')
#app.route('/display', methods=['GET'])
def display_file():
if request.method == 'GET':
f = fs.get(session['f_id'])
image = f.read()
return render_template("index.html", user_image=image)
if __name__ == "__main__":
app.run(debug=True)
My index.html file:
<html lang='en'>
<head>
<meta charset='UTF-8'/>
</head>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" onchange="this.form.submit()" name="file" autocomplete="off" required>
</form>
<form method="get" action="/display">
<input type="submit" value="Display">
</form>
<img src="{{ user_image }}" alt="Show image here"/>
</body>
</html>
My requirements.txt file:
Flask
Flask-Session
pymongo
But this doesn't work and I get the following output:
Output
Can someone please help me fix this? Maybe with examples I can look up.
Related
I would like to be able to upload a csv file, then have a script in python do some modifications to the file, and finally save the file after changes to a specific folder. I have something like this, but I don't know why it doesn't work:
import os
from flask import Flask, render_template, request, redirect, url_for, send_from_directory
from werkzeug.utils import secure_filename
app = Flask(__name__)
UPLOAD_FOLDER = 'C:/Users/tkp/Desktop/uploads_files'
app.config['UPLOAD_EXTENSIONS'] = ['.csv']
app.config['UPLOAD_PATH'] = UPLOAD_FOLDER
#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 != '':
uploaded_file.stream.seek(0)
f = uploaded_file.read()
#some change in the file
f.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('index'))
#app.route('/Users/tkp/Desktop/uploads_files/<filename>')
def upload(filename):
return send_from_directory(app.config['UPLOAD_PATH'], filename)
And HTML file:
<!doctype html>
<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="Convert"></p>
</form>
<hr>
</body>
</html>
Is it possible to perform such an operation on the fly or do you have to save the uploaded file first?
You are doing everything correctly, except the f.save(...) definition.
When you do f = uploaded_file.read(), the f is the result of the .read() operation, which is bytes, not a file.
You have to open another file and save the contents to it.
Don't forget to .decode() the bytes, to make it a string.
Here's a working snippet:
#app.route('/', methods=['POST'])
def upload_files():
uploaded_file = request.files['file']
filename = secure_filename(uploaded_file.filename)
if filename != '':
uploaded_file.stream.seek(0)
f = uploaded_file.read().decode()
# WE don't want any failures
f = f.replace("FAIL", "SUCCESS")
filename_to_save = os.path.join(app.config['UPLOAD_PATH'], filename)
with open(filename_to_save, "w") as file_to_save:
file_to_save.write(f)
return {"status": "OK"}
It could probably be a typo in your action attribute. Change this line:
<form method="POST" action="" enctype="multipart/form-data">
to this:
<form method="POST" action="/" enctype="multipart/form-data">
I'm new to Flask. This is the content of my login.html file:
<html>
<body>
<form action="localhost:5000/login" method="POST">
<p>Enter name : </p>
<p><input type = "text" name="nm"/></p>
<p><input type = "submit" value="submit"/></p>
</form>
</body>
</html>
This is app.py file:
from flask import Flask, redirect, url_for, request
app = Flask(__name__)
#app.route('/success/<name>')
def success(name):
return "Welcome %s" % name
#app.route('/login', methods = ['POST', 'GET'])
def login():
if request.method == 'POST' :
user = request.form['nm']
return redirect(url_for('success', name = user))
else :
user = request.args.get('nm')
return redirect(url_for('success', name = user))
if __name__ == "__main__":
app.run(debug = True)
When I entered a text in my HTML login form and click the submit it should have redirected to the desired URL but nothing happened.
Edit
After trying with changes suggested by Rogan Josh, i got this error:
File not found
Firefox can’t find the file at /home/hp/flask_practice/{{ url_for('login') }}.
Check the file name for capitalization or other typing errors.
Check to see if the file was moved, renamed or deleted.
Your code can't do anything because you haven't actually served the html from your flask application. You've just double-clicked it and opened the HTML in a browser.
Your html file needs to go in a subdirectory from app.py called "templates". Then change your code to:
from flask import Flask, redirect, url_for, request, render_template
app = Flask(__name__)
#app.route('/success/<name>')
def success(name):
return "Welcome %s" % name
#app.route('/login', methods = ['POST', 'GET'])
def login():
if request.method == 'POST' :
user = request.form['nm']
return redirect(url_for('success', name = user))
else :
user = request.args.get('nm') # THIS DOES NOTHING
return render_template('login.html') # CHANGED HERE
if __name__ == "__main__":
app.run(debug = True)
You should also update your HTML to:
<html>
<body>
<form action="{{ url_for('login') }}" method="POST">
<p>Enter name : </p>
<p><input type = "text" name="nm"/></p>
<p><input type = "submit" value="submit"/></p>
</form>
</body>
</html>
Now open the browser and go to 127.0.0.1:5000/login
I'm new in Flask, I want to take single file that have been uploaded in my upload path. Then i want to read and send it to my html after hr tag. How can i do that?
This is My Code:
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['UPLOAD_EXTENSIONS'] = ['.txt', '.doc']
app.config['UPLOAD_PATH'] = 'uploads'
#app.route('/')
def home():
files = os.listdir(app.config['UPLOAD_PATH'])
return render_template('home.html', content=files)
#app.route('/', methods=['POST'])
def upload_file():
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']:
abort(400)
uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], filename))
return redirect(url_for('home'))
if __name__ == "__main__":
app.run()
And This one is my HTML Page:
<!doctype html>
<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>
{{ content }}
</body>
</html>
It saves the data, but I can't access the data since I use this codefiles = os.listdir(app.config['UPLOAD_PATH'])
You need a variable route that will accept the a filename like #app.route('/<filename:filename>').
You then need to get the file with that name from your upload directory like file_path = os.path.join('UPLOAD_PATH', filename).
Then you need to read the contents of that file and pass it into your view.
with open(file_path) as file:
content = file.read()
Then you can access it in your HTML file and display it.
<p>{{ content }}</p>
Here is a complete example of the route I described:
#app.route('/<filename:filename>')
def display_file(filename):
file_path = os.path.join('UPLOAD_PATH', filename)
with open(file_path) as file:
content = file.read()
return render_template('display_file.html', content=content)
I'm actually trying to link my ml model(inception) with flask . The
output is binary (0 or 1). The image format is jpg or jpeg (both). I have tried with .stream while asking for input. Actually the model doesnt take image when file = Image.open(request.files['file'].stream).
flask code :
import os
from try1 import obj12
from flask import Flask, request, render_template,
send_from_directory,send_file
from PIL import Image
import io
import cv2
app = Flask(__name__)
#app.route("/")
def index():
return render_template('test.html')
#app.route("/upload", methods=['GET','POST'])
def upload():
file = request.files['file']
image = Image.open(file)
count = obj2(image)
print (count)
return (count)
if __name__ == "__main__":
#port = int(os.environ.get('PORT', 5000))
app.run(debug=True)
html code :
<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
</head>
<body>
<form id="upload-form" action="{{ url_for('upload') }}" method="POST"
enctype="multipart/form-data">
<strong>Files:</strong><br>
<input id="file-picker" type="file" name="file" accept="image/*"
multiple>
<div id="msg"></div>
<input type="submit" value="Upload!" id="upload-button">
</form>
</body>
</html>
Just want to pass my image in that model.
import os
from flask import Flask, request, redirect, url_for
from werkzeug import secure_filename
UPLOAD_FOLDER = '/home/ubuntu/shared/'
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
#app.route("/", methods=['GET', 'POST'])
def index():
if request.method == 'POST':
file = request.files['file']
if file:
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return redirect(url_for('index'))
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" multiple="" name="file">
<input type="submit" value="Upload">
</form>
<p>%s</p>
""" % "<br>".join(os.listdir(app.config['UPLOAD_FOLDER'],))
if __name__ == "__main__":
app.run(host='0.0.0.0', port=8000, debug=False)
If I launch the server and select 2 files through the form, it only uploads one of them. I tried for serveral hours and read about 15 topics on it, including the documentation.
Nada :c
Edit:
I also tried changing:
file = request.files['file']
into:
file = request.files.getlist('file')
would not work either. The type of quotes have no effect either. Wasn't that a python3 thing?
import os, ssl
from flask import Flask, request, redirect, url_for
from werkzeug import secure_filename
UPLOAD_FOLDER = '/home/ubuntu/shared/'
certfile = "/home/ubuntu/keys/fullchain.pem"
keyfile = "/home/ubuntu/keys/privkey.pem"
ecdh_curve = "secp384r1"
cipherlist = "ECDHE-ECDSA-AES256-GCM-SHA384 ECDHE-ECDSA-CHACHA20-POLY1305"
sslcontext = ssl.create_default_context(purpose=ssl.Purpose.CLIENT_AUTH)
sslcontext.options |= ssl.OP_NO_TLSv1
sslcontext.options |= ssl.OP_NO_TLSv1_1
sslcontext.protocol = ssl.PROTOCOL_TLSv1_2
sslcontext.set_ciphers(cipherlist)
sslcontext.set_ecdh_curve(ecdh_curve)
sslcontext.load_cert_chain(certfile, keyfile)
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
#app.route("/", methods=['GET', 'POST'])
def index():
if request.method == 'POST':
my_data = request.files.getlist('file')
my_pass = request.form['password']
if my_data and my_pass == 'yakumo':
for file in my_data:
my_handler(file)
return redirect(url_for('index'))
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 multiple name=file>
<input type="password" name="password" value="">
<input type=submit value=Upload>
</form>
<p>%s</p>
""" % "<br>".join(os.listdir(app.config['UPLOAD_FOLDER'],))
def my_handler(f):
filename = secure_filename(f.filename)
f.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
if __name__ == "__main__":
app.run(host='0.0.0.0', port=8000, ssl_context=sslcontext, threaded=True, debug=False)
I made a very rookie mistake and didn't for-loop over the multiple files being uploaded. The code here was tested without issues with 4 simultaneous file uploads. I hope it will be useful to someone.
Edit: Code updated with some sweet TLS_1.2 and a password field. Enjoy a reasonably secure upload server. Password is transferred over HTTPS.