We Keep Coding

bootstrap tags input tag value is not submitting with form

Can someone explain what is going on here? I don't understand why the values that I submit in the tag input field are not being submitted with the form. I've tried this with both examples
and neither will send the values correctly.
I am using bootstrap4-tagsinput
HTML CODE:
<form class="needs-validation" action="/archive" enctype="multipart/form-data" method="POST">
<div class="form-group">
<label>Solution Name</label>
<input name="solution_name" type="text" class="form-control" required>
<label>Vendor Name</label>
<input name="vendor_name" type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Attachment</label>
<input name="file" type="file" class="form-control-file" required>
</div>
<div class="form-group">
<label>Tags</label>
<input class="form-select" name="tags" data-role="tagsinput">
</input>
</div>
<button type="submit" value="upload" class="btn btn-primary">Submit</button>
</form>
Server
#review_archive_host.route('/archive', methods=["GET", "POST"])
#login_required
def archives():
if "review_archive" not in session['u']['flags']:
flash("You do not have permissions to access that feature/page")
return redirect(get_redirect_url())
#archive search page
if request.method == "POST":
#create a new archive record
d = request.form.to_dict(flat=True) or {}
return d
Example form and response:
response:
{
"solution_name": "asdfs",
"tags": "",
"vendor_name": "asfsd"
}

In the documentation of the link you provided informs that this puglin was designed for Bootstrap 2.3.2 and 3. By the tag of your question, I saw that you are using 4.
And others people having issues using it on Bootstrap 4.
I uploaded a small example based on your form and method for Github, but using version 3 of Bootstrap and it worked as expected.
An alternative could be this. They fix the compatibility problem with bootstrap 4 based on the plugin you used initially
EDIT:
After your answer's update using Nodws/bootstrap4-tagsinput I made a small test using this plugin and I was able to reproduce the problem.
When analyzing the request.form sent, I noticed that with this version of the plugin the key tags are coming in duplicate.
ImmutableMultiDict([('vendor_name', u'vendor'), ('solution_name', u'solution'), ('tags', u''), ('tags', u'tag1,tag2')])
Because of that you dont get any value when your route parser the form to dict.
I replicate your code with this another version of plugin and now is working as expected.
The complete example continues on my Github.

The plugin in the documentation is for bootstrap 2.3.2 or 3 and would not work for bootstrap 4.
In order to use that plugin, you could downgrade your bootstrap to version 3.
An alternative would be the Bootstrap 4 Tag Input Plugin With jQuery - https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

multiple inputs of the same name in an html form

I have some html code that contains a form. When submitted it sends a post request to a server. The form has various inputs, each with a name and a value, however there are some inputs with the same name.
Here is an example of what I mean:
<form action="http://example.com" method="post">
<input name="name" value="val">
<input name="name" value="val">
<input type="submit">
</form>
First, I am confused as to how there can be two values of the same name. Please note that I have tried removing one of the instances of <input name="name" value="val"> however this returns an error so it seems that both instances are needed.
Second, I am trying to convert this to a python request using the request library.
I have the following request:
requests.get(url = URL, params = PARAMS).json()
Where PARAMS is a dictionary of the various inputs. For example:
PARAMS = {'name':"val"}
However, being a dictionary, I can't have multiple instances of the same value. How do I make this work? Thanks

If there are duplicated names then the values will be in an array with the name. The demo below sends to a live test server and the response is directed to an <iframe>
<form action="https://httpbin.org/post" method="post" target="response">
<input name="name" value="val">
<input name="name" value="val">
<input type="submit">
</form>
<iframe name='response'></iframe>

What you are looking for is to use input arrays. With them, you can have many inputs sharing the same name, and in the server side, the data will be treated as an array. So the HTML would be:
<form action="http://example.com" method="post">
<input name="name[]" value="val1">
<input name="name[]" value="val2">
<input type="submit">
</form>

django - how to post array of images to views

i am stuck on this issue since yesterday. i have a form where user can select more image files and submit. now i am not able to catch those POSTED image files in my views.py.
my html:
<input type="file" name="images[]" />
<input type="file" name="images[]" />
and in my views.py i did this:
images = request.POST.getlist('images[]')
but once i print images, i am getting [], empty array. what am i doing wrong? i want to get all selected image files and save them into db in my view.
EDIT:
this is my html:
<form action="/save/" method="post" enctype="multipart/form-data">
<input type="file" name="images[]" />
<input type="file" name="images[]" />
<input type="submit" value="send" />
</form>
this is my views.py
fotos = request.POST.getlist('images[]')
for i in range(len(fotos)):
print fotos[i]
here it is printing [], and not the names of each images. why is this array empty?
thanks for help.

When Django handles a file upload, it's a little different than a regular POST field. The data is place in request.FILES and needs to be accessed there. The documentation about handling file uploads is a great starting point.

Creation of StringToSign

I am reading the documentation of passing a querystring to Amazon's S3 for authentication, and can't seem to grok how exactly the StringToSign is created and used. I am looking for a concrete example to illustrate (1) how to construct the StringToSign, and (2) once I have the signature, how to call the form.
For example's sake, let's say the following is my information:
Content-type='image/jpeg'
Bucket='test-bucket'
Key = 'filename'
ACL = 'public-read'
Expiration = '(never expires)'
Access Key = '12345'
Secret Password = '1a2b3c'
File = <file the user uploads>
How would I get the StringToSign value from this? And once I have that, how would I create the following form:
<form action="??" method="post" enctype='multipart/form-data' class="upload-form">
<input name="file" type="file">
</form>
And for reference: http://docs.amazonwebservices.com/AmazonS3/latest/dev/index.html?RESTAuthentication.html#RESTAuthenticationQueryStringAuth. Thank you.

Based on what you described, it seems like you want to support browser-based uploads using POST. There is a section of the AWS documentation which talks about this.
As an overview keep in mind you'll either have to make your bucket publically writeable or include a policy document. I'll assume you'll be including a policy document (check the docs if you don't want to):
A policy document is just a fragment of JSON that is used to authenticate the request, and gives a bunch of conditions that must be met before data is uploaded. E.g:
"expiration": "2020-12-01T12:00:00.000Z",
"conditions": [
{"acl": "public-read" },
{"bucket": "test-bucket" },
["eq", "$key", "filename"],
]
}
This says the action to upload will be allowed until 2020, given that the bucket is only publically readable, the bucket name is 'test-bucket' and the key is exactly equal to 'filename'.
Now, to construct your signature you take the above JSON doc, UTF-8 encode it and then base64 that and then sign the whole thing using your secret access key (using hmac sha1) and finally base64 that whole thing
policy_data = ... # stuff above
enc_policy = base64.b64_encode(policy_data.encode('utf8'))
signed = base64.b64_encode(hmac.new(AWS_SECRET, enc_policy, hashlib.sha1))
Then finally, your form would look something like this:
<form action="http://test-bucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
Key to upload: <input type="input" name="key" value="filename" /><br />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="success_action_redirect" value="http://test-bucket.s3.amazonaws.com/successful_upload.html" />
Content-Type: <input type="input" name="Content-Type" value="image/jpeg" /><br />
<input type="hidden" name="AWSAccessKeyId" value="YOUR_ACCESS_KEY_ID" />
<input type="hidden" name="Policy" value="<enc_policy from above>" />
<input type="hidden" name="Signature" value="<signed from above>" />
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>

How to pass variables to a form before it is processed

I have the following template form, containing several variables.
<form action="https://me.s3.amazonaws.com/" method="post" enctype='multipart/form-data' class="upload-form">
<input type="hidden" name="key" value="videos/{{filename}}">
<input type="hidden" name="AWSAccessKeyId" value="{{access_key}}">
<input type="hidden" name="acl" value="public-read">
<input type="hidden" name="policy" value="{{policy}}">
<input type="hidden" name="signature" value="{{signature}}">
<input type="hidden" name="Content-Type" value="{{content_type}}">
<input name="file" type="file">
<input type="submit" value="Upload" name="upload">
</form>
However, as soon as the submit button is hit, the form is sent to amazon, and I'm not able to pass it variables. This is what I've been trying to do, unsuccessfully --
if 'upload' in request.POST:
policy = base64.b64encode(...)
signature = base64.b64encode(
hmac.new('secret_key', policy, sha).digest())
file = request.POST['files']
filename=file.name
content_type=mimetypes.guess_type(filename)[0]
What do I need to do to pass the variables to the form after the POST request but BEFORE amazon processes the form? Thank you.

You should change your form's action to your django view and in your view you can re-post to https://me.s3.amazonaws.com/:
In your template
<form action="http://mywebsite/upload" method="post" ...
In your view.py:
def upload(request):
# Your treatment here.
# Post the data to amazon S3.
urllib2.urlopen("https://me.s3.amazonaws.com/", your_data)
...

You could change the form to POST to one of your own views, then do your post-processing in your view, and then within your view code, issue a POST to Amazon with the correct values using, say, urllib2 or similar.