I am using Flask to develop a web application. I want to put a form in the main page that allows the user to upload a file and submit to the server.
This is working:
<div class="jumbotron">
<div class="container">
<h1>Automatic Guitar Music Transcription</h1>
</div>
</div>
<div class="container">
<p class="lead">Upload your audio file below:</p>
<form method="POST" action="/" enctype="multipart/form-data">
<input name="file" type="file"/>
<input type="submit"/>
</form>
</div>
(JSFiddle)
However, my real index.html is a Flask template, and also uses Bootstrap.
{%- extends "base.html" %}
{% import "bootstrap/utils.html" as utils %}
{% block content %}
{% if request == "GET": %}
<div class="jumbotron">
<div class="container">
<h1>Automatic Guitar Music Transcription</h1>
</div>
</div>
<div class="container">
<p class="lead">Upload your audio file below:</p>
<form method="POST" action="/" enctype="multipart/form-data">
<input name="file" type="file"/>
<input type="submit"/>
</form>
</div>
...more HTML...
{% endif %}
{% endblock %}
{% block scripts %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
<script src="{{url_for('static', filename='js/record.js')}}"></script>
{% endblock %}
Unfortunately, this way, I don't get the input buttons side by side like in the JSFiddle, but I get the submit button under the file upload button:
Why is this happening? Thanks.
Use a simple table to achieve this:
<table>
<tr>
<td><input name="file" type="file"/></td>
<td><input type="submit"/></td>
</tr>
</table>
Related
I am currently using a page that has a list of in-line forms
However when the user enters submits each form (line) they are sent back to the top of the page. This becomes really tedious as the users need to enter data quickly and can't when they need to scroll for 2 minutes every time they add an entry.
Does anyone know how to implement a scroll lock to stock this from happening
Views.py: Function:
class AvonleaView( View):
def get(self,request):
created_nums= AvonleaClass.objects.all().values('unitNumber')
Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
# created_nums= AvonleaClass.objects.all()
print(created_nums )
created_nums =[int(i['unitNumber']) for i in created_nums]
print(created_nums )
form = AvonleaForm()
return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })
def post(self,request):
created_nums= AvonleaClass.objects.all().values_list('unitNumber')
print(created_nums)
form = AvonleaForm(request.POST)
if form.is_valid():
form.save()
return redirect('Avonlea')
messages.success(request , 'creates successfully ')
else:
return render(request, 'meter_readings/avonlea.html', {'form': form , created_nums:created_nums })
HTML page :
{% extends 'meter_readings/base.html' %}
{% block content %}
<!-- CSS only -->
<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
<meta name="viewport" content="width=device-width">
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>
<form class="form-group mt-4" method="post" {% if unit_number.data.value in created_nums %} style="background-color: rgb(231, 224, 224); " {% endif %} >
{% csrf_token %}
<div class="container">
<div class="row mb-3">
<div class="col">
<h5 style="font-size: 14px"> Unit number </h5>
{{ unit_number.data.value}}
</div>
<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">
<div class="col" id="prev{{unit_number.data.value}}" >
<h5 style="font-size: 14px"> Previous Reading </h5>
{{ previousReading }}
</div>
<div class="col" id="readings{{unit_number.data.value}}">
<h5 style="font-size: 14px"> Current Reading </h5>
{{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
<h5 style="font-size: 14px"> Units Used </h5>
{{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
{{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit" {% if unit_number.data.value in created_nums %} disabled {% endif %} > Save</button>
</div>
</div>
</div>
</form>
{% endfor %}
<br>
<br>
If I understand correctly, you can add #<some_id> to the action attribute of your forms and when the page loads the browser will automatically put the element with the id="some_id" in view.
Example:
<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>
If you submit #form1 when the page reloads the browser will scroll to #form2 even if it's at the bottom of the page.
Or if you only have one form, you can do:
<form id="form1" action="#form1" method='POST'>...</form>
EDIT:
<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post" {% if unit_number.data.value in created_nums %} style="background-color: rgb(231, 224, 224); " {% endif %} >
I'm trying to build a simple signup and login form but I'm getting below error. I've tried to fix it by going through the documentation but no luck. can you please help.
"werkzeug.routing.BuildError: Could not build url for endpoint 'auth.Esp_Index'. Did you mean 'auth.login' instead?"
code in init.py
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
db = SQLAlchemy()
def create_app():
app = Flask(__name__)
app.config['SECRET_KEY'] = '\xbd\xc5H\xe5\xd0rX\xcc\x11\x99'
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://support:support#rea-lnx-tdin01:5432/postgres'
db.init_app(app)
from .auth import auth as auth_blueprint
app.register_blueprint(auth_blueprint)
return app
Code in auth.py
from flask import Blueprint, render_template, redirect
auth = Blueprint('auth',__name__)
#auth.route('/login', methods=["GET", "POST"])
def login():
return render_template('Loginpage.html')
#auth.route('/Esp_Index', methods=["GET", "POST"])
def registration():
#return '<h1> welcome to Index page </h1>'
return render_template('Esp_Index.html')
Html Templates
Code in Base Template
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script >
<!-- Custom Theme files -->
<link href="{{url_for('static',filename='css/Styles.css')}}" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet"> <!-- //web font -->
{% endblock %}
</head>
<body>
<div id="content" >
<a href="{{url_for('auth.Esp_Index')}}" />
<a href="{{url_for('auth.login')}}" />
{% block content %}
{% endblock %}
</div>
<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Code in Esp_Index.html
{% extends "ESP_Base.html" %}
{% block title %}Web Console{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
{% block content %}
<h1>Web Console SignUp Portal Form</h1>
{% with errors = get_flashed_messages() %}
{% if errors %}
{% for error in errors %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>{{ error }}</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="main-w3layouts wrapper">
<div class="main-agileinfo">
<div class="agileits-top">
<form action="" method="POST">
<input type="text" name="Username" placeholder="Username" value="{{request.form.get.Username}}">
<input type="Email" name="Email" placeholder="Email" value="{{request.form.get.Email}}">
<input type="Password" name="Password" placeholder="Password" value="{{request.form.get.Password}}">
<input type="Password" name="RepeatPassword" placeholder="ConfirmPassword" value="{{request.form.get.RepeatPassword}}">
<input type="submit" value="SIGNUP">
</form>
<p>Don't have an Account? Login Now!</p>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
Code in Loginpage.html
{% extends "ESP_Base.html" %}
{% block title %}Web Console {% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
{% block content %}
<h1>Web Console SignUp Portal Form</h1>
{% with errors = get_flashed_messages() %}
{% if errors %}
{% for error in errors %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>{{ error }}</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="main-agileinfo">
<div class="agileits-top">
<form action="" method="POST">
<input type="text" name="Username" placeholder="Username" value="{{request.form.get.Username}}">
<input type="Password" name="Password" placeholder="Password" value="{{request.form.get.Password}}">
<p><input type = "submit" value = "Login"/></p>
</form>
</div>
</div>
{% endblock %}
{% endblock %}
When build a URL with url_for() in Flask, you should pass the endpoint of the view function, the default value of endpoint is the name of the view function, not the URL rule.
So you should write this in your template:
<a href="{{ url_for('auth.registration') }}" />
I am trying to create a web app and store links to other sites in my MongoDB database using flask. I can now store the links, also display them but instead of directing me to that site keeps me flask app. This is what I've done
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<center>
<form action="#" method="post">
<input type="text" name="url" placeholder="Enter URL">
<input type="text" name="name" placeholder="Enter name">
<input type="submit" value="Submit" class="btn btn-danger">
</form>
{% for item in data %}
<div class="card" style="width: 18rem;">
<h3 class="card-title">{{ item['name'] }}</h3>
Link
</div>
{% endfor %}
</center>
{% endblock %}
Let's say I want to go to https://example.com, it takes me to http://127.0.0.1:5000/https://example.com instead. I can provide more code if needed, just thought this should be enough.
You can have a route for this in flask:
#app.route('/go_outside_flask')
def go_outside_flask_method():
return redirect("http://www.example.com", code=302)
And then in the item['link'] you can store go_outside_flask or you can simply have {{ url_for('go_outside_flask_method') }}.
Note: if you have many such redirects, it will be difficult to maintain all these routes.
Another approach would be to build a dynamic URL:
#app.route('go_outside_flask/<variable>')
def go_outside_flask_method(variable):
redirect(variable, code=302)
You can call this like:
<a href = {{ url_for('go_outside_flask', varible=item['link']) }}>Link</a>
Hope this helps. Good luck.
I am trying to use Google reCAPTCHA for my login form to prevent spam. After following the necessary steps to get it all working, users can still login. They can fill out there details and login with out ticking the checkbox which isn't correct.
I think it might be the placement in the DOM so I tried moving it around and that didn't work.
CODE:
{% extends 'public/base.html' %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static "public/css/auth.css" %}" />
{% endblock %}
{% block content %}
<div class="container mt-5 mb-5 login-container">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group mt-4">
<legend class="border-bottom mb-4">Log In</legend>
{{ form|crispy }}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="################################
"></div>
</fieldset>
<div class="form-group">
<button class="btn btn-success" type="submit">Login</button>
<small class="text-muted ml-2">
Forgot Password?
</small>
</div>
</form>
<div class="border-top pt-3 mb-4">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock %}```
Thanks.
When you use the captcha, a textarea is added dynamically inside <div class="g-recaptcha">.
That textarea is not visible and by default has id="g-recaptcha-response".
You can get it with:
document.getElementById('g-recaptcha-response').value
In your login form you have to check if that textarea has a value or not. If it has a value then user has used successfully the captcha and can continue with the login process.
Something like this:
<form onsubmit="return check_form()">
...
</form>
<script>
function check_form()
{
return document.getElementById('g-recaptcha-response').value != '';
}
</script>
If check_form() returns FALSE, then the form is not submitted.
I'm new to django. I'm using django-bootstrap-toolkit for my contact page. It works fine when I test it locally. But I'm getting an error on my hosting server, while all other pages work just fine.
Exception Type: TemplateDoesNotExist
Exception Value: bootstrap_toolkit/form.html
Here is contact_us.html page
bootstrap_toolkit/form.html
{% extends 'base.html' %}
{% load bootstrap_toolkit %}
{% block content %}
<div id="wrap">
<div class="container">
<div class="page-header">
<h1 id="contact">Contact</h1>
</div>
<div class="form well" >
<h4 class="">Feedback</h4>
<p class="">Thank you for downloading BookxGeek. I look forward to hearing your feedback!</p>
<form action="." method="post" class="form" >
{% csrf_token %}
{% bootstrap_form form layout="vertical" %}
<br>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<hr class="soft">
</div>
{% endblock %}