Intro: I can receive the values from input fields in Flask by
var = request.form['description']
and the following HTML:
<form method="post" enctype="multipart/form-data">
<div class="mb-3">
<label for="description">Beschreibung</label>
<textarea name="description" placeholder="Post description"
class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Question: Any idea how to handle a tag field, like e.g. Link , together with Flask Form? How to handle Flask Form and $.Ajax Post request simultaneously? Any hint would be highly appriciated. I did my research but found nothing online.
I found now an easy solution for me. Don´t know if it is very clean but what I did was basically create a hidden field and pass the var from JS to the hidden field inside <form so that i can grab it with request in Flask. I also did this the other way around, passing the variable from Flask to JS. In this way I can use the CSS,JS in the link above outside of <form, i.e. I can press Enter
HTML:
<!-- from JS to Flask -->
<input type="hidden" name="hidden_tags" id="hidden_tags" value="" />
<!-- from Flask to JS -->
<input type="hidden" name="hidden_tags2" id="hidden_tags2" value="{{ post['tags'] }}"/>
in JS:
tags = document.getElementById("hidden_tags2").value.split('/');
document.getElementById("hidden_tags").value = tags
in Flask:
request.form['hidden_tags']
So, last few days I was trying to build a website where you input the post data then hit submit and then boom your post appears on the home page/post page.
So, I have created the form but the problem is that I don't know how to send HTML form data to SQLite database so it can be viewed by multiple users anytime.
<form class="posts" action="." method="post">
<h2>Title</h2>
<input type="text" name="title" placeholder="Title">
<h2>Description</h2>
<textarea input class="des" name="description"type="text" placeholder="Description"></textarea>
<h2>Image(Optional)</h2>
<input type="file" name="inpFile" id="inpFile" class="img-btn">
<div class="img-prev" id="imgPrev">
<img src="" alt="Image Preview" class="img-prev__img">
<span class="img-prev__def-text">Image Preview</span>
</div>
<input type="submit" value="Submit">
</form>
I think that you should take a look at some Python's web-frameworks like Flask or Django first, so that you can understand this subject a little clearer.
I am using Froala editor in my Flask app. When I get the content of textarea in Python, the content is wrapped in <p></p> tags. Can anyone help as what needs to be done so that the content is not wrapped in <p></p> tags?
I tried using htmlDoNotWrapTags option as per the documentation during initializing of text area, but it didn't help.
https://www.froala.com/wysiwyg-editor/docs/options#htmlDoNotWrapTags
My code:
HTML:
<form action="/submit_form" method="POST">
<fieldset>
<label for="activities_completed">Activities completed</label>
<textarea id="activities_completed" name="activities_completed"></textarea>
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
Initializing Froala editor:
<script>
$(function() {
$('textarea#activities_completed').froalaEditor();
htmlDoNotWrapTags: ['p'] // it did not help
});
</script>
Getting value of textarea in Python:
if request.method == 'POST':
activities_completed = request.form['activities_completed']
print(activities_completed)
Figured it out.
Following code removed <p></p> tags.
<script>
$(function() {
var config = {
enter: $.FroalaEditor.ENTER_BR
};
$('textarea#activities_completed').froalaEditor(config);
});
</script>
I am building a web application that includes a file upload feature. My goal is to initiate upload from users directly to an S3 bucket. The strategy is to pre-sign a POST request that will get submitted as a form.
The roadblock is a SignatureDoesNotMatch error - as far as I can tell I've conformed to the documentation, and have explored a lot of options, but still unable to resolve. I am able to generate presigned download links.
Referencing:
AWS POST documentation
Example
boto3 generate_presigned_post reference
Generate signed request:
def s3_upload_creds(name, user):
s3 = boto3.client('s3')
key = '${filename}'
region = 'us-east-1'
date_short = datetime.datetime.utcnow().strftime('%Y%m%d')
date_long = datetime.datetime.utcnow().strftime('%Y%m%dT000000Z')
fields = {
'acl': 'private',
'date': date_short,
'region': region,
'x-amz-algorithm': 'AWS4-HMAC-SHA256',
'x-amz-date': date_long
}
return s3.generate_presigned_post(
Bucket = 'leasy',
Fields = fields,
Key = key,
Conditions = [
{'acl': 'private'},
{'x-amz-algorithm': 'AWS4-HMAC-SHA256'},
{'x-amz-credential': '/'.join(['AKI--snip--', date_short, region, 's3', 'aws4_request'])},
{'x-amz-date': date_long}
]
)
Upload form (populated with fields above):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
{{ creds }}
<form action="{{ creds.url }}" method="post" enctype="multipart/form-data">
Key to upload:
<input type="input" name="key" value="${filename}" /><br />
<input type="input" name="acl" value="{{ creds.fields.acl }}" />
<input type="hidden" name="Policy" value="{{ creds.fields.policy }}" />
<input type="text" name="X-Amz-Algorithm" value="{{ creds.fields['x-amz-algorithm'] }}" />
<input type="input" name="X-Amz-Credential" value="{{ creds.fields.AWSAccessKeyId }}/{{ creds.fields.date }}/us-east-1/s3/aws4_request" />
<input type="input" name="X-Amz-Date" value="{{ creds.fields['x-amz-date'] }}" />
<input type="input" name="X-Amz-Signature" value="{{ creds.fields.signature }}" />
File:
<input type="file" name="file" /> <br />
<!-- The elements after this will be ignored -->
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
</html>
Relevant portion of response:
<Error>
<Code>SignatureDoesNotMatch</Code>
<Message>
The request signature we calculated does not match the signature you provided. Check your key and signing method.
</Message>
<AWSAccessKeyId>AKI--snip--</AWSAccessKeyId>
<StringToSign>
eyJjb25kaXRpb25zIjogW3siYWNsIjogInByaXZhdGUifSwgeyJ4LWFtei1hbGdvcml0aG0iOiAiQVdTNC1ITUFDLVNIQTI1NiJ9LCB7IngtYW16LWNyZWRlbnRpYWwiOiAiQUtJQUlDVjRNVlBUUlFHU1lLV1EvMjAxNTEyMTgvdXMtZWFzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LCB7IngtYW16LWRhdGUiOiAiMjAxNTEyMThUMDAwMDAwWiJ9LCB7ImJ1Y2tldCI6ICJsZWFzeSJ9LCBbInN0YXJ0cy13aXRoIiwgIiRrZXkiLCAiIl1dLCAiZXhwaXJhdGlvbiI6ICIyMDE1LTEyLTE4VDA1OjEwOjU2WiJ9
</StringToSign>
<SignatureProvided>wDOjsBRc0iIW7JNtz/4GHgfvKaU=</SignatureProvided>
Base64 decode of StringToSign in above error:
{u'conditions': [{u'acl': u'private'},
{u'x-amz-algorithm': u'AWS4-HMAC-SHA256'},
{u'x-amz-credential': u'AKI--snip--/20151218/us-east-1/s3/aws4_request'},
{u'x-amz-date': u'20151218T000000Z'},
{u'bucket': u'leasy'},
[u'starts-with', u'$key', u'']],
u'expiration': u'2015-12-18T04:59:32Z'}
Found a solution: had to explicitly configure the s3 client to use Amazon's new signature v4. The error occurs since it defaults to an older version, causing the mismatch. Bit of a facepalm - at the time this wasn't written in boto3 docs, although folks at Amazon say it should be soon.
The method is simplified since it now returns exactly the fields required:
def s3_upload_creds(name):
BUCKET = 'mybucket'
REGION = 'us-west-1'
s3 = boto3.client('s3', region_name=REGION, config=Config(signature_version='s3v4'))
key = '${filename}'
return s3.generate_presigned_post(
Bucket = BUCKET,
Key = key
)
Which means the form can be easily generated:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
{{ creds }}
<form action="https://mybucket.s3.amazonaws.com" method="post" enctype="multipart/form-data">
{% for key, value in creds.fields.items() %}
<input type="hidden" name="{{ key }}" value="{{ value }}" />
{% endfor %}
File:
<input type="file" name="file" /> <br />
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
</html>
Cheers
Been a few years since the last response, but I've been stuck on this for the last day or two so I'll share my experience for anyone it may help.
I had been getting the error: "403: The AWS Access Key Id you provided does not exist in our records" when trying to upload to an s3 bucket via my presigned url.
I was able to successfully generate a presigned url similarly to above, using the server-side code:
signed_url_dict = self.s3_client.generate_presigned_post(
self.bucket_name,
object_name,
ExpiresIn=300
This returned a dictionary with the structure:
{
url: "https://___",
fields: {
key: "___",
AWSAccesKeyId: "___",
x-amz-security-token: "___",
policy: "___",
signature: "___"
}
}
This lead to the part where things were a little different now in 2019 with the browser-side javascript, where the required form inputs seem to have changed. Instead of setting up the form as OP did, I had to create my form as seen below:
<form action="https://pipeline-poc-ed.s3.amazonaws.com/" method="post" enctype="multipart/form-data" name="upload_form">
<!-- Copy ALL of the 'fields' key:values returned by S3Client.generate_presigned_post() -->
<input type="hidden" name="key" value="___" />
<input type="hidden" name="AWSAccessKeyId" value="___" />
<input type="hidden" name="policy" value="___"/>
<input type="hidden" name="signature" value="___" />
<input type="hidden" name="x-amz-security-token" value="___" />
File:
<input type="file" name="file" /> <br />
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
My error was that I followed an example in the boto3 1.9.138 docs and left out "x-amz-security-token" on the form, which turned out to be quite necessary. A thoughtless oversight on may part, but hopefully this will help someone else.
EDIT: My results above were based on a N. Virginia Lambda Function. When I ran generate_presigned_post(...) in Ohio (the region containing my bucket), I got results similar to OP:
{
"url": "https://__",
"fields": {
"key": "___",
"x-amz-algorithm": "___",
"x-amz-credential": "___",
"x-amz-date": "___",
"x-amz-security-token": "___",
"policy": "___",
"x-amz-signature": "___"
}
}
Perhaps the results of the function are region specific?
In my case, I was generating a form with Base64-encoded.
The problem was due to Firefox inherently encoding the Policy and Security token values into Base64-encoded on top of it.
Thus there was double encoding and therefore the signature did not match as required.
I'm trying to get an e-mail address from an OpenId request using the following form below and web.py. I get an OpenId hash back, but I don't see anything related to an e-mail in my apache environment--just a openid_identity_hash.
This is my html form using web.py.
<input type="text" name="openid" value="" style="background: url(http://openid.net/login-bg.gif) no-repeat; padding-left: 18px; background-position: 0 50%%;" />
<input type="hidden" name="return_to" value="${returnUrl}" />
<input type="hidden" name="openid.ns.ext1" value="http://openid.net/srv/ax/1.0" />
<input type="hidden" name="openid.ext1.mode" value="fetch_request" />
<input type="hidden" name="openid.ext1.type.email" value="http://axschema.org/contact/email" />
<input type="hidden" name="openid.ext1.required" value="email" />
Looking at the docs linked off of Google's dev site to OpenID, I've found these attributes to include, which I feel like I'm doing.
openid.ns.ax=http://openid.net/srv/ax/1.0
openid.ax.mode=fetch_request
openid.ax.type.fname=http://example.com/schema/fullname
openid.ax.type.gender=http://example.com/schema/gender
openid.ax.type.fav_dog=http://example.com/schema/favourite_dog
openid.ax.type.fav_movie=http://example.com/schema/favourite_movie
openid.ax.count.fav_movie=3
openid.ax.required=fname,gender
openid.ax.if_available=fav_dog,fav_movie
openid.ax.update_url=http://idconsumer.com/update?transaction_id=a6b5c4
But it never actually asks to approve the e-mail request and I don't see it in my environment. Does web.py just not support it? Can I use something else like authkit to query the e-mail afterwards?
#voodo , Try setting these values.
openid.ns=http://specs.openid.net/auth/2.0&
openid.ns.alias3=http://openid.net/srv/ax/1.0&
openid.alias3.if_available=alias1,alias2,alias3&
openid.alias3.required=alias4&
openid.alias3.mode=fetch_request&
openid.alias3.type.alias1=http://schema.openid.net/namePerson&
openid.alias3.count.alias1=1&
openid.alias3.type.alias2=http://schema.openid.net/contact/email&
openid.alias3.count.alias2=1&
openid.alias3.type.alias3=http://axschema.org/namePerson&
openid.alias3.count.alias3=1&
openid.alias3.type.alias4=http://axschema.org/contact/email&
openid.alias3.count.alias4=1
I am not sure why this works and pure AX schema does not, even though google's XRDS specifies supporting AX schema