We Keep Coding

Flask is not recognizing my form from HTML [duplicate]

This question already has answers here:
Sending data from HTML form to a Python script in Flask
(2 answers)
Get the data received in a Flask request
(23 answers)
Closed 2 months ago.
I'm working on an upload file function for my web tool and I'm facing an issue. The problem is that Flask is not receiving the files from the HTML form. I have already set the route, and created the form tag accordingly to what is required like the method POST and still not working. Am I doing anything wrong?
HTML
<form action="/" method="POST" enctype="multipart/form-data" class="form-horizontal">
<div class="row form-group">
<div class="col-12 col-md-12">
<div class="control-group" id="fields">
<label class="control-label" for="field1">
Requests
</label>
<div class="controls">
<div class="entry input-group upload-input-group">
<input class="form-control" name="fields[]" type="file">
<button class="btn btn-upload btn-success btn-add" type="button">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<button class="btn btn-primary" type="submit" value="Submit">Upload</button>
</div>
</div>
</div>
</form>
Python/Flask
import os
from flask import Flask, flash, request, redirect, render_template
from werkzeug.utils import secure_filename
app=Flask(__name__)
app.secret_key = "secret key"
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
path = os.getcwd()
# file Upload
UPLOAD_FOLDER = os.path.join(path, 'uploads')
if not os.path.isdir(UPLOAD_FOLDER):
os.mkdir(UPLOAD_FOLDER)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
ALLOWED_EXTENSIONS = set(['xlsx', 'xls'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
#app.route('/')
def upload_form():
return render_template('index.html')
#app.route('/', methods=['POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No file selected for uploading')
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))
flash('File successfully uploaded')
return redirect('/')
else:
flash('Allowed file types are xlsx and xls')
return redirect(request.url)
if __name__ == "__main__":
app.run(host = '127.0.0.1',port = 5000, debug = False)

Try changing the input name to file instead fields[]
<input class="form-control" name="file" type="file">

Display values of json returned by python file in html webpage seperately

I am making a webapp for OCR on document with layoutlm using flask, website has upload system that accepts images and documents which are later processed by a python file for OCR which returns a JSON containing 'key' as field name like 'Name', 'DOB' and value as corresponding answer to the field as 'Akshit', '17/02/2002'. I have got the upload system working but am not able to figure out how I display these values into my HTML webpage. Can you please help?
app.py:-
from flask import Flask
UPLOAD_FOLDER = r'path\to\upload\folder'
app = Flask(__name__)
app.secret_key = "secret key"
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
main.py :-
#import magic
import urllib.request
from invoice_docquery import ret_scores
from app import app
from flask import Flask, flash, request, redirect, render_template
from werkzeug.utils import secure_filename
ALLOWED_EXTENSIONS = set(['pdf', 'png', 'jpg', 'jpeg'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
#app.route('/')
def upload_form():
return render_template('index.html')
#app.route('/', methods=['POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No file selected for uploading')
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))
json_ans = ret_scores(filename) # Performs OCR and returns json containing key as field names and value as its corresponding answers
flash('File successfully uploaded')
return redirect('/')
else:
flash('Allowed file types are pdf, png, jpg, jpeg')
return redirect(request.url)
if __name__ == "__main__":
app.run()
HTML code so far (index.html):-
<!doctype html>
<title>Python Flask File Upload Example</title>
<h2>Select a file to upload</h2>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="file" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit">
</p>
</form>
function 'ret_scores' in main.py returns the required json for which I want to display its values in the HTML webpage
Do let me know if any additional information is required

It's difficult to diagnose exactly what your issue is as you didn't explain what output you're getting (error message? no content showing?), but the issue appears to be in the way you're trying to use the jinja template, in particular in the line:
{% with messages = get_flashed_messages() %}
What is get_flashed_messages() and how does the template know where to find it?
You pass information to templates as parameters in render_template, so your #app.route('/') will need to contain a line like:
return render_template('index.html', messages)
Passing variables between routes gets messy and confusing, so I recommend using session variables to store the information that you will pass to the template.
I've rewritten your code to demonstrate the basic flow, but please don't expect it to run first time as I haven't run it to test. There may still be some debugging to do but hopefully it should demonstrate the general idea and get you moving in the right direction.
app.py looks fine as-is.
main.py:
#import magic
import urllib.request
from invoice_docquery import ret_scores
from app import app
from flask import Flask, flash, request, redirect, render_template
from werkzeug.utils import secure_filename
ALLOWED_EXTENSIONS = set(['pdf', 'png', 'jpg', 'jpeg'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
#app.route('/')
def upload_form():
if session['messages']:
return render_template('index.html', messages=session['messages'])
else:
return render_template('index.html', messages={})
#app.route('/', methods=['POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No file selected for uploading')
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))
session['messages'] = ret_scores(filename) # Performs OCR and returns json containing key as field names and value as its corresponding answers
flash('File successfully uploaded')
return redirect('/')
else:
flash('Allowed file types are pdf, png, jpg, jpeg')
return redirect(request.url)
if __name__ == "__main__":
app.run()
index.html:
<!doctype html>
<title>Python Flask File Upload Example</title>
<h2>Select a file to upload</h2>
<p>
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
</p>
<form method="post" action="/" enctype="multipart/form-data">
<dl>
<p>
<input type="file" name="file" autocomplete="off" required>
</p>
</dl>
<p>
<input type="submit" value="Submit">
</p>
</form>
Feel free to ask any question is in the comments and I'll do my best to help when I can.

Flask / Python: Modify uploaded file data before saving

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">

How to read single file in my data using Flask

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)

Flask: Ignore if one file is not uploaded in form (containing multiple file upload options)

I have a multi-upload form in flask.
<form class="form-group" action="{{ url_for('load') }}" method="POST" enctype="multipart/form-data">
<input id="file-picker" type="file" name="file1"><br>
<input id="file-picker" type="file" name="file2"><br>
<input id="file-picker" type="file" name="file3"><br>
<input id="file-picker" type="file" name="file4"><br>
</form>
This is how i handle data from it:
#app.route("/load", methods=['GET', 'POST'])
def load():
if request.method == 'POST':
file = request.files.get("file1")
file_name = secure_filename(file.filename)
im = Image.open(file)
im.save(file_name)
upload(photo=file_name)
The upload() uploads the image from the form to s3.I dont want to use request.getlist('files'), because this way, retrieving them later on is easier.
I save the uploaded files in a static folder before uploading them to amazon s3. If I wanted to upload only 3 out of these 4 files, I get IOError: [Errno 22].
Is there any way to ignore this error? i.e Can I make it such that I can upload only one/two/three instead of compulsorily uploading all 4 files every time?

All right, so here is what I did..turned out to be pretty simple. Thanks for the tip #furas
#app.route("/load", methods=['GET', 'POST'])
def load():
if request.method == 'POST':
files = request.files.getlist("file")
for file in files:
file.seek(0, os.SEEK_END)
if file.tell() == 0:
pass
else:
file_name = secure_filename(file.filename)
upload(p=file_name)