I've been studying this example project. Very concise and to the point, and a pleasant surprise, too: a Save File Dialog (a standard desktop File Dialog, opened from Chrome).
The responsible code:
src/html.py:
#app.post('/download')
def form_post(request: Request, num: int = Form(...), multiply_by_2: bool = Form(False), action: str = Form(...)):
if action == 'convert':
result = spell_number(num, multiply_by_2)
return templates.TemplateResponse('download.html', context={'request': request, 'result': result, 'num': num})
elif action == 'download':
# Requires aiofiles
result = spell_number(num, multiply_by_2)
filepath = save_to_text(result, num)
return FileResponse(filepath, media_type='application/octet-stream', filename='{}.txt'.format(num))
templates/download.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Form</title>
</head>
<body>
<form method="post">
<input type="number" name="num" value="{{ num }}"/>
<input type="checkbox" id="multiply_by_2" name="multiply_by_2" value="True">
<label for="multiply_by_2">Multiply by 2 </label>
<input type="submit" name="action" value="convert">
<input type="submit" name="action" value="download">
</form>
<p>Result: {{ result }}</p>
</body>
</html>
I can't see any hint on a File Dialog in FileResponse, much less on the Save File Dialog, which pops up. I want the Open File Dialog too, by the way. I tried to research it, without success.
How does it work?
UPD, to make myself clearer.
I'm playing with something like this:
from tkinter import Tk
from tkinter.filedialog import askopenfilename
...
#app.post("/open")
def form_post(
request: Request,
action: str = Form("open"),
):
if action == "open":
root = Tk()
root.withdraw()
# ensure the file dialog pops to the top window
root.wm_attributes('-topmost', 1)
fname = askopenfilename(parent=root)
print(f"Chosen file: {fname}")
return templates.TemplateResponse("open.html", context={"request": request})
elif action == "save":
# Requires aiofiles
return FileResponse(
"templates/legacy/download.html",
media_type="text/html",
filename="download.html",
)
For now, button save makes use of the system Save File Dialog, while button open employs tkinter's Open Dialog. It will do, because the whole thing is merely an application with a Web UI. Still, it looks and feels a bit ridiculous.
Is there a way to make the browser serve the Open File Dialg?
The file dialog is what Chrome shows for that kind of response (application/octet-stream). The server side framework isn't responsible for creating the save file dialog; it just provides a response and the browser does what it usually does for the that kind of response.
You can use the Content-Disposition header in your response to indicate to the browser that it should show a download dialog instead of the content directly (if it supports the mime type natively). The Content-Disposition header also allows you to provide a default file name for the save dialog (but only a file name - not a path).
A open file dialog would be the responsibility of the HTML, by using <input type="file" name="name_matching_fastapi_parameter">. You can then tell FastAPI that you expect that a parameter is a file with the UploadFile type.
From the FastAPI reference:
from fastapi import FastAPI, File, UploadFile
app = FastAPI()
#app.post("/files/")
async def create_file(file: bytes = File(...)):
return {"file_size": len(file)}
#app.post("/uploadfile/")
async def create_upload_file(file: UploadFile = File(...)):
return {"filename": file.filename}
Related
For some reason, I can't seem to be able to perform both a multi-file upload with additional data on the same form.
Specs:
Python 3.10.4 (inside virtual environment)
blacksheep 1.2.5
Ubuntu 20.04
Here is my html code (simplified):
<form action='/upload_files_with_additional_data' method="post" enctype='multipart/form-data'>
<input type="file" name="files" multiple>
<label for="checkbox1" class="checkbox">Checkbox 1</label>
<input type="checkbox" name="checkbox1">
<label for="checkbox2" class="checkbox">Checkbox 2</label>
<input type="checkbox" name="checkbox2">
<label for="textfield">Text field</label>
<input type="text" id="textfield" name="textfield">
<input type="submit" value="Submit">
</form>
Here's what I've tried (but didn't work) and what I expect would work:
#post('/upload_files_with_additional_data')
async def upload_files_with_additional_data(self, files: FromFiles, form_data: FromForm):
for file in Files:
# do something with each file
# do something with additional form data
I've also tried using FromForm[FormData] with the following FormData:
class FormData:
checkbox1: bool
checkbo2: bool
files: list # also tried with type hint FromFIles (and without setting files alltogether
# def __init__(self, checkbox1: str, checkbox2: str, files): # also tried with files: FromFiles and without entire __init__ (but that didn't work at all)
# self.checkbox1 = bool(checkbox1)
# self.checkbox2 = bool(checkbox2)
# self.files = files # also tried with FromFiles(files)
Either I can upload files, without sending additional form data (using only files: FromFiles), or I can use the form data without the files (using only form: FromForm). Combining the two doesn't work.
When using async def upload_files_with_additional_data(self, request: Request): I can get also get the form data from there using form = await request.form(), but that only works for additional data, not the files. When I try to upload files I get:
form = await request.form()
File "blacksheep/messages.pyx", line 172, in form
File "blacksheep/contents.pyx", line 163, in blacksheep.contents.multiparts_to_dictionary
AttributeError: 'bytes' object has no attribute 'append'
I've also tried using async def upload_files_with_additional_data(self, bytes: FromBytes): which does seem to contain all the data, but as bytes, and I've tried a few ways to convert these to what I want, but no success there either.
Is there a way of uploading both multiple files, alongside other form data (I'm fairly confident there is, but I just haven't figured it out)? If so: how should this be achieved?
I am trying to display a timer of 5minutes (for example). I am using flask.
I know it could be good to use javascript but I really want to do it with python.
I have two issues:
First issue: display of the timer - issue to overwrite
I wrote a function for the timer in python which is supposed to display (for example for 50 seconds):
00:50 then remove 00:50 and have00:49, and so on...
But it is displaying:
00:50
00:49
00:48
...
Here is my code: screen.py
from flask import Flask, Response, request, render_template, render_template_string, stream_with_context
import time
app = Flask(__name__)
timing=0
#app.route('/content', methods=['POST', 'GET']) # render the content a url differnt from index. This will be streamed into the iframe
def content():
global timing
timing = 10
# if request.form.get("submit"):
# timing = request.form['timing']
# print(timing)
def countdown(t):
while t:
mins, secs = divmod(t, 60)
timer = '{:02d}:{:02d}'.format(mins, secs)
print(timer, end="\r")
yield timer
time.sleep(1)
t -= 1
# return timer
return app.response_class(countdown(timing)) #at the moment the time value is hardcoded in the function just for simplicity
# return render_template('display.html')
#app.route('/')
def index():
value = "Bonjour"
title_html = value
return render_template('display.html', message=title_html) # render a template at the index. The content will be embedded in this template
if __name__ == '__main__':
app.run(use_reloader=False)
I would like to find the equivalence of print(timer, end="\r") for yield in order to overwrite the value of timer and not see all the results when it's decreasing. I hope my explanation is clear.
Second issue: Input value of the timer
As you can see in my code screen.py, my value for timing is hardcoded timing=10. But I would like to allow the user to enter the value he wants in input like that:
if request.form.get("submit"):
timing = request.form['timing']
print(timing)
You can see these lines in screen.py, I commented them to leave timing=10 because when I write these lines I obtain the following error:
Method Not Allowed
The method is not allowed for the requested URL.
127.0.0.1 - - [02/Aug/2021 12:50:26] "POST / HTTP/1.1" 405 -
Here is the HTML Code linked to my python code display.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href='/static/main.css'/>
<title>your dish</title>
</head>
<body>
<h1>{{message}}! Here are some informations about your dish:</h1>
<h2> countdown </h2>
<!-- <p>{{message}}</p> -->
<form method="POST" action=".">
<p><input name="timing" value="{{timing}}" placeholder="Enter your time"></p>
<input type="submit" name="submit" value="submit">
</form>
<div>
<iframe frameborder="0" noresize="noresize"
style='background: transparent; width: 100%; height:100%;' src="{{ url_for('content')}}"></iframe>
</div>
</body>
</html>
How can I avoid this error and take into consideration the value entered by the user in the input field of my display.html?
I tryed to run your script locally but I am not sure where do you expect to see the timer; I assume you used the countdown func from here.
I would like to propose you a different approach: stream dynamically the counter to the web page using an iframe:
from flask import Flask, render_template, Response
import time
app = Flask(__name__)
#app.route('/content') # render the content a url differnt from index. This will be streamed into the iframe
def content():
def timer(t):
for i in range(t):
time.sleep(5) #put 60 here if you want to have seconds
yield str(i)
return Response(timer(10), mimetype='text/html') #at the moment the time value is hardcoded in the function just for simplicity
#app.route('/')
def index():
return render_template('test.html.jinja') # render a template at the index. The content will be embedded in this template
if __name__ == '__main__':
app.run(use_reloader=False)
then add an iframe where do you prefer in your html
<!doctype html>
<head>
<title>Title</title>
</head>
<body>
<h2> countdown </h2>
<div>
<iframe frameborder="0" noresize="noresize"
style='background: transparent; width: 100%; height:100%;' src="{{ url_for('content')}}"></iframe>
</div>
</body>
The result will be a dynamic countdown on your web-page
countdown
0123456789
you can see it done quick and dirty here on my repl
While it's not tuned around your application yet, (and not particularly beautiful graphically) you can modify the function to accept an input from the user with a form (I see you actually did already in your app), or also tune the countdown function directly.
t = request.form['t']
and adding to your html the form
<form method="post" action=".">
<p><input name="t" placeholder="your time"/></p>
<p><input type="submit" value="Submit"/></p>
</form>
You have the same route #app.route("/") appearing 3 times. The system will pick the first one which simply displays display.html. And I suspect even that will currently not work because your page is expecting values for message, timing but those attributes don't exist in your first route.
You should try something like
#app.route("/", methods=['POST', 'GET'])
def display():
page = 'display.html'
params = {"message":"", "timing":0} # initialize values for both message and timing. These will be returned when user loads the page (a GET call)
if request.method == 'POST':
timing = request.values.get("timing")
# do whatever processing you want
params["timing"] = <your computed value>
params["message"] = <your message>
params["message_2"] = <your other message>
return render_template(page, **params)
Delete all the other routes you have for #app.route("/")
I would like to build a simple web application that able to display the results of parsing YAML files using python and Flask. I've been written the code and it works, but the results not the same as expected.
Here's my code:
import yaml
from flask import Flask, request, render_template, redirect, url_for
#from pathlib import Path
app = Flask(__name__)
#app.route('/', methods=['GET','POST'])
def my_form_post():
#path=Path('/Users/Devie Andriyani/EditFlask/categories.yaml') # set the path to your file here
#if not path.exists():path.touch()
if request.method == 'POST':
#with open(path, 'w') as f:
#f.write(request.form.get('Text Area',None))
return redirect(url_for('my_form_post'))
#with open(r'C:\Users\Devie Andriyani/EditFlask/categories.yaml') as f:
#my_dict = yaml.safe_load(f)
a_yaml_file = open("categories.yaml")
parsed_yaml_file = yaml.load(a_yaml_file, Loader=yaml.FullLoader)
print(parsed_yaml_file["countries"])
print(parsed_yaml_file["sports"])
return render_template('index.html')
if __name__ == '__main__':
app.debug = True
app.run()
And here's my HTML code:
<!DOCTYPE html>
<head>
<title>Hello</title>
</head>
<body>
<form action="" method="POST">
<p>Text Area</p>
<p><textarea name="Text Area" rows="20" cols="50" value={{categories}}></textarea>
</p>
<input type="submit">
</form>
</body>
</html>
And here's my YAML file:
sports:
- soccer
- football
- basketball
- cricket
- hockey
- table tennis
countries:
- Pakistan
- USA
- India
- China
- Germany
- France
- Spain
And here's the result:
I want the results of parsing show on the text area
You opened the file, saved it in a variable, but you didn't pass that to the front-end. You just print it, that why it is printing in the console. You have to pass this to the frontend.
parsed_yaml_file = yaml.load(a_yaml_file, Loader=yaml.FullLoader)
# print(parsed_yaml_file["countries"]) # this will print in console not in frontend
# print(parsed_yaml_file["sports"]) # this too
return render_template('index.html', yml = parsed_yaml_file)
Here I passed the file content parsed_yaml_file to the frontend with the name yml. So we can access this in the frontend now. But one problem we have. yaml.load will return a dictionary. And if you want to display as a dictionary, then no worries. But if you want to display as YAML format itself, then you should not convert it into yaml. You directly pass the file a_yaml_file.
Suppose if you want yaml output, (hope you passed yml = a_yaml_file) then in frontend you have to use pre tag.
<pre>{{ yml }}</pre>
If you want a dictionary, (pass yml = parsed_yaml_file) then just use this in frontend
{{ yml }}
This is my sample HTML file
<html>
<head>
<title>
</title>
</head>
<body>
<form action="">
Value a:<br>
<input type="text" name="Va">
<br>
Value b:<br>
<input type="text" name="Vb">
<br><br>
<input type="submit">
</form>
<textarea rows="4" cols="10">
</textarea>
<p>
</p>
</body>
</html>
And a given template Tornado server code:(I also need help on the explanation of each section of the following code)
import tornado.ioloop
import tornado.web
import tornado.httpserver
import tornado.gen
import tornado.options
tornado.options.parse_command_line()
class APIHandler(tornado.web.RequestHandler):
#tornado.web.asynchronous
def get(self):
self.render('template.html')
#tornado.gen.engine
def post(self):
try:
num = int(self.get_argument('num'))
except:
num = 5
self.render('template.html')
app = tornado.web.Application([(r"/next_rec",APIHandler),])
if __name__ == "__main__":
server = tornado.httpserver.HTTPServer(app)
server.bind(48763)
server.start(5)
tornado.ioloop.IOLoop.current().start()
and finally my python code:
if __name__ == '__main__':
a = int(raw_input())
b = int(raw_input())
print a+b
I am using a simple 'a+b' function to test out this feature. But my problem is I can't figure out a way to link them together. So my ultimate goal is to click on the "Submit" button on the HTML, pass on two values to the Tornado server, use it as input in my python script and finally show the output in the text area of the HTML or on another page. I'm know there are tons of information on the web, but I'm completely new to Tornado (near 0 knowledge) and most of them I can't really understand. Help on methods or keywords for search is much appreciated, thank you very much. (please keep answers as basic as possible, it will help a lot, thanks!)
First of all you should check the official documentation. It is quite simple and it targets the newcomers.
Also in this short guide, the sections of a similar code as your is being explained with simplicity.
Now for your code:
On your template you need to specify that the form should send a post request on submit by adding <form method="post" id="sum_form">
Also you need to make sure that you will be submit the data added in the form on an event: $("#sum_form").submit();
On your post method you need to read the passed numbers from your client's form, add them and then send them back to the template as a parameter.
For example:
def post(self):
numA = int(self.get_argument('Va'))
numB = int(self.get_argument('VB'))
sumAB = numA + numB
self.render('template.html',sumAB=sumAB)
In you template.html you need to add a field where you will display the passed sum as a jinja variable : {{sumAB}}
I have exactly the same problem as this post
Python submitting webform using requests
but your answers do not solve it. When I execute this HTML file called api.htm in the browser, then for a second or so I see its page.
Then the browser shows the data I want with the URL https://api.someserver.com/api/ as as per the action below. But I want the data written to a file so I try the Python 2.7 script below.
But all I get is the source code of api.htm Please put me on the right track!
<html>
<body>
<form id="ID" method="post" action="https://api.someserver.com/api/ ">
<input type="hidden" name="key" value="passkey">
<input type="text" name="start" value ="2015-05-01">
<input type="text" name="end" value ="2015-05-31">
<input type="submit" value ="Submit">
</form>
<script type="text/javascript">
document.getElementById("ID").submit();
</script>
</body>
</html>
The code:
import urllib
import requests
def main():
try:
values = {'start' : '2015-05-01',
'end' : '2015-05-31'}
req=requests.post("http://my-api-page.com/api.htm",
data=urllib.urlencode(values))
filename = "datafile.csv"
output = open(filename,'wb')
output.write(req.text)
output.close()
return
main()
I can see several problems:
Your post target URL is incorrect. The form action attribute tells you where to post to:
<form id="ID" method="post" action="https://api.someserver.com/api/ ">
You are not including all the fields; type=hidden fields need to be posted too, but you are ignoring this one:
<input type="hidden" name="key" value="passkey">
Do not URL-encode your POST variables yourself; leave this to requests to do for you. By encoding yourself requests won't recognise that you are using an application/x-www-form-urlencoded content type as the body. Just pass in the dictionary as the data parameters and it'll be encoded for you and the header will be set.
You can also stream the response straight to a file object; this is helpful when the response is large. Switch on response streaming, make sure the underlying raw urllib3 file-like object decodes from transfer encoding and use shutil.copyfileobj to write to disk:
import requests
import shutil
def main():
values = {
'start': '2015-05-01',
'end': '2015-05-31',
'key': 'passkey',
}
req = requests.post("http://my-api-page.com/api.htm",
data=values, stream=True)
if req.status_code == 200:
with open("datafile.csv", 'wb') as output:
req.raw.decode_content = True
shutil.copyfileobj(req.raw, output)
There may still be issues with that key value however; perhaps the server sets a new value for each session, coupled with a cookie, for example. In that case you'd have to use a Session() object to preserve cookies, first do a GET request to the api.htm page, parse out the key hidden field value and only then post. If that is the case then using a tool like robobrowser might just be easier.