Trigger python code at server side from client in Angular4 - python

I am new to Angular, I am building a simple application which should do.
Accept couple of parameters from web page(client side)
Upon form submit, it should trigger a python code at server side
Get the output file(jpg image) generated by python and display below the submit form.
As part of this, I have just coded the app.component.html and a blank python refresh module in app.component.ts, but I'm unable to
A. Code to call python code at server side and retrieve the output
Also, upon searching across many places, I got answers to get data from web api call but not executing a python at server side and retrieving data.
Any reference or a code to this will be really very helpful !
My app.component.html looks like
<form (submit)="pytrigger(parm1.value,parm2.value)">
<div>
<label for="parm1">Parm1:</label>
<input type="text" #parm1>
</div>
<div>
<label for="parm2">Parm2:</label>
<input type="text" #parm2>
</div>
<div >
<input type="submit" class="button">
</div>
</form>
My app.component.ts has function(which needs to be extended)
pytrigger(parm1,parm2){
console.log('entered pytrigger');
}

Related

HTML, how to auto select the date time picker from sql database

I've a HTML form for editing existing data.
Let's say today is 10/06/2022 18:05 and i want to edit my course date time in my web app.
My course date on the data base is 21/08/2023 10:00. I want to change it to 22/08/2023 10:00. When I open my from on the web app all the inputs came with the existing data already selected. But date time picker comes as 10/06/2022 18:05. I've set the value as the date attribute of course object but it's not working. This works for the rest of the inputs but not for the datetime input.
I basically need the html date time picker comes with autoselected with the existing saved data <course.date> .
I'm writing this web app on python flask and using a postgresql for database. The other inputs comes with selected values but not datetime input.
Anyone has any ideas how to approach this one?
<form action="/courses/{{course.id}}" method="post">
<label for="course">Course Title</label>
<input type="text" name="title" value="{{course.title}}">
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date}}">
<label for="capacity">Capacity</label>
<input type="number" name="capacity" value="{{course.capacity}}">
<label for="active">Active</label>
<select name="active">
<option value="True">Active</option>
<option value="False" {% if course.active == False %} selected {%endif%}>Deactive</option>
</select>
<input type='submit' value="Update Course">
</form>
If I am understanding the issue right:
course_date in the database is: 21/08/2023 10:00
course_date in the app remains as the local-current time: 10/06/2022 18:05 (example)
GET request properly loads data from the database into the other fields except course-date
you've tried making a POST request to update course_date, but the field doesn't change
My suggestion to debug this is to look at the responses to your GET request. What do they come out as?
Inside your GET request's response,
if the course-date is 21/08/2023 10:00, that means your problem is in your javascript or the code that plugs in your field value inside the HTML. Your frontend field is simply ignoring the response from flask or the data is not being mapped/handled right
if the course-date is 10/06/2022 18:05 or is null. That means your flask backend is broken, double-check the flow of your data from the SQL select -> storing the data in a python variable -> sending the data out
Also remember to Hard-Reload.
Based on our exchange in comments, it looks like the issue is with the date format being passed in your template.
Changing:
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date}}">
To:
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date.isoformat()}}">
Should correct the problem for you.

Sending a POST request to python function via an HTML form

I am absolutely new to HTML and I was wondering if Someone could help me out. I tried looking for similar questions as mine but I didn't find anything quite like what I am looking for. Sorry if this question seems dumb or easy to you I am trying to learn! So basically I have an ID that I can access inside of my HTML file and I want to send it to my python function through a form, I have already managed to do this for buttons but never for a form. This is how I would send my ID to my function with a button:
<a href="{{url_for('validate_comment', item_id=msr.id)}}"> <--- the msr.id is my ID
<button type="button">
<div class="font-weight-bold">Ajouter un commentaire</div>
</button>
</a>
And this works perfectly but i was wondering if there was any way to do the same with a form as I am not calling a function but doing an action instead. This is how my form looks:
<form id="commentaire_form" method="post" action="/testement"> <--- here is where I give the route but how can i send the ID to the function linked to this route?
<textarea id='text' name="text"></textarea>
<input type="submit">
</form>
If anyone could help me I would greatly appreciate it, thanks in advance :-)
The below will make a POST request to the /testement route/URL. You can catch the id POST value in your python script.
<form id="commentaire_form" method="post" action="/testement">
<textarea id='text' name="text"></textarea>
<input type="hidden" name="id" value="{{ msr.id }}">
<input type="submit">
</form>

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

Serve a file based on request parameters in tornado

The problem looks simple but everywhere I search it I get results for uploading a file, whereas my use case is, that based on a few params, I in my Handler decide the relevant file and upload it as a link in my View. I am using tornado for this. e.g :
<div class="form-group"> <!-- Date input -->
<label for="actDateFrom" class="control-label">Date</label>
<input ng-model="data.actDateFrom" class="form-control" name="actDateFrom" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Date input -->
<label for="actDateTo" class="control-label">Date</label>
<input ng-model="data.actDateTo" class="form-control" name="actDateTo" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button type="submit" class="btn btn-default" data-ng-disabled="form.$invalid" data-ng-click="sendActRequest()" >Go Fetch !</button>
</div>
Based on the inputs above, I have a handler, that should basically filter a csv file and get that file showing up as a link .
All I am stuck at is the code for uploading that subset file as a link in my view, I can manage the rest. Please not that the file is lying somewhere on the server itself.
Thanks in Advance!
Lol that was so easy, I think the funda is that only a static file can be served, I just put it in my some web/static/files path which is visible to the server and posted a href link to it, something like below:
<div>
Activations Logs for the time period.
</div>
Please dont downvote, actually I am new to Web Dev :P Thanks !

Web2py: How to get items in FieldStorage?

I have a form that accepts image uploads:
<form name="upload" enctype="multipart/form-data" method="post" class="form-horizontal">
<div class="control-group">
<div class="span2">
<label for="image" class="control-label">Upload image:</label>
</div>
<div class="span10">
<input id="image" name="image" type="file" class="span7" accept="image/*"/>
</div>
</div>
<div class="form-group">
<div class="span2"></div>
<div class="span10">
<button class="btn btn-medium btn-primary" type="submit">Submit</button>
</div>
</div>
</form>
When I request.vars['image'], the following is returned:
FieldStorage('image', 'a.png', '\x89PNG\r\n\x1a\n\x00...')
How do I access these items? If I attempt to work with it as I would a dict, I receive an error that the object is not indexable. I've never worked with FieldStorage before, so I'm not exactly sure what I need to do to access this data.
If anyone else is interested, this worked:
request.vars['image'].filename
request.vars['image'].value
For the file name and binary data, respectively. Just needed a quick summary of the available attributes: http://python.about.com/od/cgiformswithpython/ss/pycgitut1_3.htm
This is extremely helpful if you are trying to check some aspects of a file before trying to process a form. I wanted to get the sha256 hash of an uploaded file and make sure it hadn't been uploaded before. The upload is in a field Field('file', 'upload').
Originally, I used the following, but this consumes the data in request.vars.file so that, after successful processing, the file written to disk is empty.
file_contents = request.vars.file.read()
form.vars.file_hash = hashlib.sha256(file_contents).hexdigest()
form.vars.file_length = len(file_contents)
However, in the updated code below datasci's answer allows you to access the data without consuming it from request.vars.file. Might be obvious, but it took a long time for me to figure out what was going on!
# Is there a file - the value will be None when the page first loads and
# can be 'str' if submit is pressed without a file selected.
if request.vars.file != None and not isinstance(request.vars.file, str):
form.vars.file_name = request.vars.file.filename
form.vars.file_hash = hashlib.sha256(request.vars.file.value).hexdigest()
form.vars.file_size= len(request.vars.file.value)
if form.process(onvalidation=validate_dataset_upload).accepted:
# notify upload has worked
response.flash = ('Upload successful. A validation check will be run and '
'you will get an email with the results when it finishes.')
All of this means that the validate_dataset_upload function can now check form.vars.file_hash does not already exist in the underlying table.

Categories