i am trying to create a Python/Flask app where the user saves an image to a local folder . It creates the folder , i get the "has been uploaded" success page but the image was not saved in the folder
this is my .py code
import os
from flask import Flask, render_template, request
app = Flask(__name__)
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
#app.route("/")
def index():
return render_template("upload.html")
#app.route("/upload", methods=['GET','POST'])
def upload():
target = os.path.join(APP_ROOT, 'images/')
print(target)
if not os.path.isdir(target):
os.mkdir(target)
for file in request.files.getlist("file"):
print(file)
filename = file.filename
destination = "/".join([target, filename])
print(destination)
file.save(destination)
return render_template("complete.html")
if __name__ == "__main__":
app.run(port=4555, debug=True)
this is my .html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Upload here</h1>
<form id="upload-form" action="{{url_for('upload')}}" methods="POST" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" multiple>
<input type="submit" value="send">
</form>
</body>
</html>
You have a typo in your html markup where you define the form. It should say:
<form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
As in method="POST" instead of methods="POST"
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>
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>
''' upload.html'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 style="color:DodgerBlue;">File Uploader</h2>
<form id = "upload-form" action = "{{ url_for('upload') }}" method="POST"
enctype="multipart/form-data">
<input type = "file" name = "file" accept = "files/*" multiple>
<input type = "submit" value = "submit">
</form>
</body>
</html>
''' app.py'''
import os
from flask import Flask, request, render_template, send_from_directory
app = Flask(__name__)
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
#app.route("/")
def index():
return render_template("upload.html")
#app.route("/upload", methods=["POST"])
def upload():
target = os.path.join(APP_ROOT, 'Athena_XML_files/')
print(target)
if not os.path.isdir(target):
os.mkdir(target)
for file in request.files.getlist("file"):
print(file)
filename = file.filename
destination = "/".join([target, filename])
print(destination)
file.save(destination)
return render_template("complete.html")
#app.route('/run_script')
def run_script():
app.config.from_pyfile("main.py")
return render_template('result.html')
if __name__ == "__main__":
app.run(port=4555, debug=True)
'''complete.html'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>XML files Uploaded</h1>
<ul><br><br>
<h2><strong>Please click to obtain the result</strong></h2><br><br>
<ul class="nav nav-stacked">
<li role="presentation"><a href="{{ url_for('run_script') }}">CLICK
HERE</a></li>
</ul>
</ul>
</body>
</html>
As the XML files are uploaded and the CLICK HERE button is clicked, main.py file should run in the background for which i have made a function in app.py file to run the main.py file.
Uploading works well, but on click of button the main.py file is not running in the background.
I'm not sure if your idea is a good one. I posted some small solutions, but you should read this article for a better practice.
1) If you want to run an external script from inside flask, you could use subprocess to run a script from the command line.
#app.route('/run-script')
def run_script():
result = subprocess.check_output("python main.py", shell=True)
return render_template('results.html', **locals())
2) If you want to run Python code in background without any return, you could create a thread.
from threading import Thread
#app.route('/run-in-background')
def run_in_background():
run_func()
return redirect(url_for('.index'))
def run_func():
data = { 'some': 'data', 'any': 'data' }
thr = Thread(target=run_async_func, args=[app, data])
thr.start()
return thr
def run_async_func(app, data):
with app.app_context():
# Your working code here!
example_module.do_somthing_with(data)
Not sure if it helps. Both solutions could make a lot mess.
You should read the flask docs.
The app.config.from_pyfile function evaluates configuration data from Python code. This is very different than your question.
I'm a beginner in front end development, and have to do a small web app in Flask for a project.
I have written a Flask app that lets you upload an image using HTML Forms and then displays the image back to the user when you hit Upload. I need to modify this such that the image does not get saved to a folder in the project directory everytime a user uploads it. Basically, the app should send the uploaded image back in the body of the response.
Here is my code so far:
UploadTest.py
import os
from uuid import uuid4
from flask import Flask, request, render_template, send_from_directory
app = Flask(__name__)
# app = Flask(__name__, static_folder="images")
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
#app.route("/")
def index():
return render_template("upload.html")
#app.route("/upload", methods=["POST"])
def upload():
target = os.path.join(APP_ROOT, 'images/')
print(target)
if not os.path.isdir(target):
os.mkdir(target)
else:
print("Couldn't create upload directory: {}".format(target))
print(request.files.getlist("file"))
for upload in request.files.getlist("file"):
print(upload)
print("{} is the file name".format(upload.filename))
filename = upload.filename
destination = "/".join([target, filename])
print ("Accept incoming file:", filename)
print ("Save it to:", destination)
upload.save(destination)
return render_template("complete.html", image_name=filename)
#app.route('/upload/<filename>')
def send_image(filename):
return send_from_directory("images", filename)
if __name__ == "__main__":
app.run(port=8080, debug=True)
upload.html - creates an upload form
<!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>
<script>
$("#file-picker").change(function(){
var input = document.getElementById('file-picker');
for (var i=0; i<input.files.length; i++)
{
var ext= input.files[i].name.substring(input.files[i].name.lastIndexOf('.')+1).toLowerCase()
if ((ext == 'jpg') || (ext == 'png'))
{
$("#msg").text("Files are supported")
}
else
{
$("#msg").text("Files are NOT supported")
document.getElementById("file-picker").value ="";
}
}
} );
</script>
</html>
complete.html - displays the image from the folder in which it has been saved after a user hits "upload"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Uploaded
<img src=" {{url_for('send_image', filename=image_name)}}">
</body>
</html>
I have tried researching quite a bit but was unable to find anything other than deleting the folder after it has been displayed (which I didn't think is the right way of solving the question at hand). I'd really appreciate any help in this matter, and if there is a better solution than what my code currently does, I'd love to learn more!
Thank you! :)
Please check below code can help you.Copy the below code in upload.html in templates folder.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<script src="{{ url_for('static', filename='upload.js') }}"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<form action = "http://127.0.0.1:5000/uploader" method = "POST"
enctype = "multipart/form-data">
<input type='file' name = 'file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
<input type = "submit"/>
</form>
</body>
</html>
Copy the below code in upload.js file in static folder
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Now copy the below code in a python file
from flask import Flask, render_template, request
from werkzeug import secure_filename
import os
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'D:/Projects/flask/image_upload/images/'
#app.route('/')
def upload_f():
return render_template('upload.html')
#app.route('/uploader', methods = ['GET', 'POST'])
def upload_file():
if request.method == 'POST':
f = request.files['file']
f.save(os.path.join(app.config['UPLOAD_FOLDER'],secure_filename(f.filename)))
return 'file uploaded successfully'
# if __name__ == '__main__':
app.run(debug = True)
Above piece of code will help you to browse and display the image on html page and as well save the image on your disk at desired location.
If you want to send back image to client there's 2 approach,
You can send image to client as an file url
You need to convert an image as blob or base64 image and show image
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 %}