I have a registration page that will submit all the registration values into MS SQL database. I am trying to control the size of the image that is updated to the database to be width=125 height=125. Is there a way to control that before it is submitted into the database?
Also is this the most recent way to submit it into the database?(The most recent I could find was 2011)
FORM
<form class="m-t" role="form" action="cfm/register_process.cfm" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="text" name="employee_number" class="form-control" placeholder="Employee Number" required="">
</div>
<div class="form-group">
<input type="text" name="firstname" class="form-control" placeholder="First Name" required="">
</div>
<div class="form-group">
<input type="text" name="lastname" class="form-control" placeholder="Last Name" required="">
</div>
<div class="form-group">
<input type="text" name="department" class="form-control" placeholder="Department" required="">
</div>
<div class="form-group">
<input type="text" name="position" class="form-control" placeholder="Position" required="">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<input type="text" name="phone_extension" class="form-control" placeholder="Extension" required="">
</div>
<div class="form-group">
<input type="text" name="user_name" class="form-control" placeholder="User ID" required="">
</div>
<div class="form-group">
<input type="password" name="user_pass" class="form-control" placeholder="Password" required="">
</div>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Select image
<input type="file" name="filefieldname" id="filefieldname" multiple />
</span>
</span>
<input id="filename" class="form-control" type="text"/>
<span class="input-group-btn">
<span class="btn btn-primary cleared">Reset</span>
</span>
</div>
<div class="form-group">
<div class="checkbox i-checks"><label> <input type="checkbox"><i></i> Agree the terms and policy </label></div>
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Register</button>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>
</form>
Then the form calls register_process.cfm and submits to database
<cffile action="readbinary" file="#form.filefieldname#" variable="bin_filedata">
<cfquery datasource="test" name="UserRegistration">
INSERT INTO dbo.Users (employee_number, user_name, user_pass, firstname, lastname, position, email, phone_extension, department, picture)
VALUES (
, <cfqueryparam value='#form.employee_number#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.user_name#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.user_pass#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.firstname#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.lastname#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.position#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.email#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.phone_extension#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#form.department#' cfsqltype='cf_sql_varchar' />
, <cfqueryparam value='#bin_filedata#' cfsqltype='cf_sql_blob' />
)
</cfquery>
<script>
self.location="../login.html";
</script>
Unfortunately when I try to submit this I just get an all white screen and it does not update the database. I am assuming I am doing something wrong with the picture.
Related
i am trying to create edit profile form, in which i am trying to data from edit profile form. i am getting all data in request.POST but i am getting empty {} using request.Files
view.py
class EditProfile(View):
template_name="todo_app/edit_profile.html"
def get(self,request,pk):
if request.user.is_authenticated:
user_id=pk
profile=UserProfile.objects.get(user=user_id)
content={
'profile':profile,
}
return render(request,self.template_name,content)
else:
return redirect('todo_app:login')
def post(self,request,pk):
request_data=request.POST
first_name=request_data.get('first_name')
last_name=request_data.get('last_name')
mob_no=request_data.get('mob_no')
address_1=request_data.get('address_1')
address_2=request_data.get('address_2')
gender=request_data.get('gender')
age=request_data.get('age')
state=request_data.get('state')
city=request_data.get('city')
country=request_data.get('country')
bio=request_data.get('bio')
# profile_pic=request.FILES['profile_pic']
print(request_data)
print("_"*123)
print(request.FILES)
return redirect('todo_app:edit_profile',pk)
and print result on console is
<QueryDict: {'csrfmiddlewaretoken': ['mkfuwR6Uc99svosQvsVpho11JOXOdESSmp2sm1ULDFrFu3UHRrkASTWeSyRwXyzH'], 'first_name': ['upasana'], 'last_name': ['kulshresths'], 'address_1': ['9 Purushottam Nagar'], 'address_2': ['Dayal Bagh'], 'mob_no': ['9087654321'], 'gender': ['Male'], 'age': ['12'], 'state': ['Uttar Pradesh'], 'city': ['Agra'], 'country': ['India'], 'bio': ['Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professo'], 'profile_pic': ['Screenshot from 2021-07-14 16-44-31.png']}>
___________________________________________________________________________________________________________________________
<MultiValueDict: {}>
edit_profile.html
<form method="POST" action="{% url 'todo_app:edit_profile' profile.user.id %}" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="first_name">First name</label>
<input type="text" class="form-control" id="first_name" value="{{profile.user.first_name}}" name="first_name" required>
</div>
<div class="col-md-6 mb-3">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" value="{{profile.user.last_name}}" name="last_name" required>
</div>
<div class="col-md-6 mb-3">
<label for="address_1">Address line 1</label>
<input type="text" class="form-control" id="address_1" value="{{profile.address_line_1}}" name="address_1" required>
</div>
<div class="col-md-6 mb-3">
<label for="address_2">Address line 2</label>
<input type="text" class="form-control" id="address_2" value="{{profile.address_line_2}}" name="address_2" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="mobile_no">Mobile No</label>
<input type="number" min="6000000000" max="9999999999" value="{{profile.user.mob_no}}" class="form-control" id="mobile_no" name="mob_no" required>
</div>
<div class="col-md-3 mb-3">
<label for="gender">Gender</label>
<select class="custom-select" id="gender" name="gender" required>
<option>Male</option>
<option>Female</option>
<option>🏳️🌈</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="age">Age</label>
<input type="number" min="0" max="120" value="{{profile.age}}" class="form-control" id="age" name="age" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="State" class="form-label">State</label>
<input type="text" class="form-control" id="State" name="state" value="{{profile.state}}">
</div>
<div class="col-md-3 mb-3">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" name="city" value="{{profile.city}}">
</div>
<div class="col-md-3 mb-3">
<label for="country" class="form-label">Country</label>
<input type="text" class="form-control" id="country" name="country" value="{{profile.country}}" >
</div>
</div>
<div class="form-row">
<div class="col-md-10 mb-3">
<label for="bio">Bio</label>
<textarea class="form-control" placeholder="Leave a comment here" id="bio" style="height: 100px" name="bio">{{profile.bio}}</textarea>
</div>
<div class="col-md-2 mb-3 ml-auto mt-4">
<img src="{{profile.profile_pic.url}}" class="rounded-circle" width="100px" alt="...">
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="profile_pc_spam">Profile Pic</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="profile_pic" name='profile_pic' >
<label class="custom-file-label" for="profile_pic">Choose file</label>
</div>
</div>
<div class="text-center">
<button class="btn my_button_delete mb-4 ustify-content-center" type="submit" >Submit form</button>
</div>
</form>
what am I doing wrong? i don't want to use django forms.
i try to search old question related this problem on stack overflow but i found that every one suggest using django form. if i missed any answer please tag me
Im trying to use the code I have found and its not working properly it is always saying that I am a robot do you have any idea why this will not work?
The Application.cfc has the site and secret key in it.
<script src="https://www.google.com/recaptcha/api.js?render=<cfoutput>#application.SiteKey#</cfoutput>"></script>
<cfif ISDEFINED('FORM.FirstName')> <!--- check if form was submitted and if so run code below --->
<cfhttp url="https://www.google.com/recaptcha/api/siteverify?secret=#application.SecretKey#&response=#FORM['g-recaptcha-response']#" result="Response" />
<cfset Return = deserializeJSON(Response.FileContent) />
<cfif Return.success IS 'true' AND Return.score GT 0.0> <!--- check if true and if score is greater than 0.5. Run code below if all good. --->
<cfoutput>Human: #FORM.FirstName# #FORM.LastName#</cfoutput>
<!--- you can do database entry and/or email results here --->
<cfelse> <!--- if not a human, do this. I usually remove the else part completely, but if you need to do something with the robot, do it here. --->
Most likely a robot.
</cfif>
<cfelse> <!--- show form --->
<form method="post" action="/contact.cfm"> <!--- submit form back to itself --->
First Name: <input name="FirstName" type="text"><br>
Last Name: <input name="LastName" type="text"><br>
<input name="submit" type="submit">
<input name="g-recaptcha-response" id="g-recaptcha-response" type="hidden" /> <!--- javascript below gives this a value from google. --->
</form>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<cfoutput>#application.SiteKey#</cfoutput>', {action: 'homepage'})
.then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
});
});
</script>
</cfif>
This is how I was able to get the form working properly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://www.google.com/recaptcha/api.js?render=YOUR SITE KEY"></script>
<!-- contact form demo container -->
<cfif ISDEFINED('FORM.name')> <!--- check if form was submitted and if so run code below --->
<cfhttp url="https://www.google.com/recaptcha/api/siteverify?secret=#application.SecretKey#&response=#FORM['token']#" result="Response" />
<cfset Return = deserializeJSON(Response.FileContent) />
<cfif Return.success IS 'true' AND Return.score GT 0.5> <!--- check if true and if score is greater than 0.5. Run code below if all good. --->
<cfelse> <!--- if not a human, do this. I usually remove the else part completely, but if you need to do something with the robot, do it here. --->
</cfif>
<cfelse>
<section style="margin: 50px 20px;">
<div style="max-width: 768px; margin: auto;">
<!-- contact form -->
<div class="card">
<h2 class="card-header">Contact Form</h2>
<div class="card-body">
<form class="contact_form" method="post" action="contact.cfm">
<!-- form fields -->
<div class="row">
<div class="col-md-6 form-group">
<input name="name" type="text" class="form-control" placeholder="Name" required>
</div>
<div class="col-md-6 form-group">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
<div class="col-md-6 form-group">
<input name="phone" type="text" class="form-control" placeholder="Phone" required>
</div>
<div class="col-md-6 form-group">
<input name="subject" type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="col-12 form-group">
<textarea name="message" class="form-control" rows="5" placeholder="Message" required></textarea>
</div>
<!-- form message prompt -->
<div class="row">
<div class="col-12">
<div class="contact_msg" style="display: none">
<p>Your message was sent.</p>
</div>
</div>
</div>
<div class="col-12">
<input type="submit" value="Submit Form" class="btn btn-success" name="post">
</div>
<!-- hidden reCaptcha token input -->
<input type="hidden" id="token" name="token">
</div>
</form>
</div>
</div>
</div>
</section>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('YOUR SITE KEY', {action: 'homepage'}).then(function(token) {
// console.log(token);
document.getElementById("token").value = token;
});
// refresh token every minute to prevent expiration
setInterval(function(){
grecaptcha.execute('YOUR SITE KEY', {action: 'homepage'}).then(function(token) {
console.log( 'refreshed token:', token );
document.getElementById("token").value = token;
});
}, 60000);
});
</script>
</cfif>
<!-- References for the optional jQuery function to enhance end-user prompts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
This is how I passed the values to the API. Again, just passing along code that worked, not saying this is the only way
<cfhttp method="post" url="https://www.google.com/recaptcha/api/siteverify" result="Response">
<cfhttpparam name="secret" type="formField" value="#application.SecretKey#">
<cfhttpparam name="response" type="formField" value="#form["g-recaptcha-response"]#">
</cfhttp>
I have a CustomUser Model with following fields
class CustomUser(AbstractUser):
image = models.ImageField(upload_to='images/',blank=True,null=True)
email = models.EmailField(_('email address'), unique=True)
fullname = models.CharField(null=True,max_length=40)
dob = models.DateField(default=date.today)
phonenumber = models.CharField(max_length=10, blank=True)
passportnumber = models.CharField(max_length=10, blank=True)
I am trying to have a progress bar for the image upload so I have two forms in single page as follows
<body>
<div class='row'>
<div class='col-sm-3'></div>
<div class="col-sm-6 ">
<h4>Register</h4>
<form id="uploadform" method=POST enctype=multipart/form-data action="/upload/">
{% csrf_token %}
<input type=file id="media" name=media ;>
<input type="submit" onclick='copy_url(document.getElementById("media").files[0].name)'>
</form>
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<form id="registerform"method="post" enctype="multipart/form-data">
{% csrf_token %}
<!-- <div class="form-group ">
<label>Image</label>
<input name="image" type="file" value="">
</div> -->
<div class="form-group ">
<input id="image" name="image" type="hidden" value="">
</div>
<div class="form-group ">
<label>Email address</label>
<input name="email" class="form-control" type="email" value="">
</div>
<div class="form-group ">
<label>Fullname</label>
<input name="fullname" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Dob</label>
<input name="dob" class="form-control" type="date" value="">
</div>
<div class="form-group ">
<label>Phonenumber</label>
<input name="phonenumber" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Passportnumber</label>
<input name="passportnumber" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Username</label>
<input name="username" class="form-control" type="text" value="">
<span class="help-block">Required. 150 characters or fewer. Letters, digits and #/./+/-/_
only.</span>
</div>
<div class="form-group ">
<label>Password</label>
<input name="password" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Confirm password</label>
<input name="confirm_password" class="form-control" type="text" value="">
</div>
<!-- <label for="{{ serializer.fullname.id_for_label }}">Fullname:</label>
<input type="text" id ="{{ serializer.fullname }}"><br/>
<label for="{{ serializer.dob.id_for_label }}">Dob:</label>
<input type="date" id ="{{ serializer.dob }}"><br/> -->
<!-- {% render_form serializer %} -->
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</body>
After uploading the image. I want that image to be stored in my model for the corresponding user.How do I do that?
I am using ajax for the progress bar
$(document).ready(function(){
$('#uploadform').on('click', function(event){
event.preventDefault();
var formData = new FormData($('#uploadform')[0]);
$.ajax({
xhr: function(){
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
console.log('Bytes Loaded :' + e.loaded)
console.log('Total Size:' + e.total)
console.log('Percentage Uploaded:' + e.loaded/e.total)
var percent = Math.round(e.loaded / e.total * 100);
$('#progress-bar').attr('aria-valuenow',percent).css('width',percent+'%').text(percent+'%')
}
})
return xhr;
},
type : 'POST',
url : '/upload/',
data : formData,
processData : false,
contentType : false,
success : function(response){
var fs = response
alert('File uploaded!');
}
})
});
});
I tried to pass the location of the image uploaded in form1 say /images/photo.jpeg to the imagefield but it throws error. How do I pass that to the imagefield ???
I'm using Django 1.8 and Crispy-Forms with Twitter Bootstrap 3
Here's what I have at the moment:
self.helper.layout = Layout(
...
'address',
StrictButton('Find address', id='find_address', css_class='btn-primary'),
)
This outputs:
<div id="div_id_address" class="form-group">
<label for="id_address" class="control-label">Address</label>
<div class="controls">
<input class="textinput textInput form-control" id="id_address" maxlength="100" name="address" type="text" value="" />
</div>
</div>
<button id="find_address" class="btn btn-primary" type="button">Find address</button>
What I'd like to output (class form-inline and button find_address added to the controls div):
<div id="div_id_address" class="form-group">
<label for="id_address" class="control-label">Address</label>
<div class="controls form-inline">
<input class="textinput textInput form-control" id="id_address" maxlength="100" name="address" type="text" value="" />
<button id="find_address" class="btn btn-primary" type="button">Find address</button>
</div>
</div>
This aligns the button with the input field. Is it possible to achieve this with crispy-forms? I can't figure it out. Thanks!
Perhaps
FieldWithButtons(
'address',
StrictButton('Find address', id='find_address', css_class='btn-primary')
)
Could be solution.
See http://django-crispy-forms.readthedocs.org/en/latest/layouts.html#bootstrap-layout-objects
Now I need the following search structure in the theme:
<div class="sideCol">
<aside class="siteSearch">
<form name="searchform" action="search" class="searchPage searchform" id="searchform">
<fieldset>
<legend>Website durchsuchen</legend>
<input class="searchPage text lang-de" name="SearchableText" type="text" size="25" title="Website durchsuchen" value="" placeholder="Suchbegriff..." />
<button type="submit"><i class="icon-search"></i></button>
</fieldset>
</form>
</aside>
</div>
All I need to get from Plones sunburst theme is the action link for the form element.
So I tried this:
<replace css:content-children="#portal-searchbox">
<xsl:variable name="action_link" select="form/#action" />
<form name="searchform" action="search" class="searchPage searchform" id="searchform">
<xsl:attribute name="action">${action_link}</xsl:attribute>
<fieldset>
<legend>Website durchsuchen</legend>
<input class="searchPage text lang-de" name="SearchableText" type="text" size="25" title="Website durchsuchen" value="" placeholder="Suchbegriff..." />
<button type="submit"><i class="icon-search"></i></button>
</fieldset>
</form>
</replace>
<replace css:content-children="#portal-searchbox" css:theme-children=".siteSearch" />
The problem ist that all I get in the theme is the structure of Plones Sunburst Search.
<div class="sideCol">
<aside class="siteSearch">
<form id="livesearch0" action="http://localhost:8080/mamuz/de/##search">
<div class="LSBox">
<label class="hiddenStructure" for="searchGadget">Website durchsuchen</label>
<input name="SearchableText" type="text" size="18" title="Website durchsuchen" placeholder="Website durchsuchen" accesskey="4" class="searchField" id="searchGadget" autocomplete="off">
<input class="searchButton" type="submit" value="Suche">
<div class="searchSection">
<input id="searchbox_currentfolder_only" class="noborder" type="checkbox" name="path" value="/mamuz/de/impressum">
<label for="searchbox_currentfolder_only" style="cursor: pointer">nur im aktuellen Bereich</label>
</div>
<div class="LSResult" id="LSResult">
<div class="LSShadow" id="LSShadow"></div>
</div>
</div>
</form>
<div id="portal-advanced-search" class="hiddenStructure">
Erweiterte Suche…
</div>
</aside>
</div>
I'm familiar with diazo but pretty new to xslt. What is wrong? I tired several types of placements like import before it gets modified. Nothing helps.
Using the replace directive on attribute itself should work:
<replace attributes="action"
css:content="#portal-searchbox form"
css:theme="#searchform" />