Why images are not being uploaded from my template form to django admin and then to the media folder - django-models

I have a template containing a form . Whenever i am using the form to submit an image, the image is not being added to my admin table and neither being added to my media folder. What should I do ?
I was expecting that the image would be uploaded to my django admin's table's record and also added to my media folder
but Whenever the image is being submitted along with other fields the other data is being uploaded to admin except image.
This is the section of template containing form
<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label for="Name" class="form-label">Name</label>
<input type="text" class="form-control" id="seller_name" name="seller_name">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone No.</label>
<input type="text" class="form-control" id="seller_phone" name="seller_phone">
</div>
<div class="mb-3">
<label for="Rawmaterialname" class="form-label">Raw Material Name</label>
<input type="text" class="form-control" id="seller_raw" name="seller_raw">
</div>
<div class="mb-3">
<label for="priceperstd" class="form-label">Price Per Std.</label>
<input type="text" class="form-control" id="seller_price"
placeholder="Your Expected Price Per std." name="seller_price">
</div>
<div class="mb-3">
<label for="textarea" class="form-label">Description</label>
<textarea class="form-control" name="desc" id="desc" cols="30" rows="10"
placeholder="Enter your text here"></textarea>
</div>
<div class="mb-3">
<label for="formFile" class="form-label">Enter Image</label>
<input class="form-control" type="file" id="formFile" name="img">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="seller_agree" checked>
<label class="form-check-label" for="agree">Agree <a data-bs-toggle="modal"
data-bs-target="#terms" class="link-primary">Terms And
Conditions</a></label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
this is the section of my views.py
def index(request):
if request.method=="POST":
# form = Seller_table(request.POST, request.FILES)
name=request.POST.get('seller_name')
phone=request.POST.get('seller_phone')
raw=request.POST.get('seller_raw')
price=request.POST.get('seller_price')
discription=request.POST.get('desc')
image=request.POST.get('img')
Seller=Seller_table(seller_name=name,seller_phone=phone,seller_raw=raw,seller_price=price,desc=discription,img=image)
Seller.save()
messages.success(request,'Successfully Made A Registration')
return render(request,"seller.html")
this is my models.py
from django.db import models
# Create your models here.
class Seller_table(models.Model):
seller_name=models.CharField(max_length=100)
seller_phone=models.CharField(max_length=100)
seller_raw=models.CharField(max_length=50)
seller_price=models.CharField(max_length=10)
desc=models.CharField(max_length=500,default="")
img=models.ImageField( upload_to='images/',default="")
def __str__(self):
return self.seller_raw
this the section of my urls.py of base directory
from django.contrib import admin
from django.urls import path,include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('',include("Home.urls")),
path('seller/',include("Seller.urls")),
path('buyer/',include("Buyer.urls")),
]+ static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
this is my settings regarding media
# Base url to serve media files
MEDIA_URL = '/media/'
# Path where media is stored
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
Is something else needed?

plz try with this correction
image=request.FILES.get('img')
--------- OR ----------
image=request.FILES['img']

Related

Get div data from Get request

i have a little question, i made a Get request using axios to my React app to a website and i get the html response : responseData.data .
But now i want to get the content of a specific div inside of the responseData.data.
For example this one :
<!DOCTYPE html>
<html class="devise-layout-html">
<head prefix="og: http://ogp.me/ns#">
</head>
<body class="ui_charcoal login-page application navless" data-page="sessions:new">
<div class="tab-content">
<div class="active login-box tab-pane" id="ldapmain" role="tabpanel">
<div class="login-body">
<form id="new_ldap_user" class="gl-show-field-errors" action="/users/auth/ldapmain/callback" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="V8qeuk9QAYk51gorLAobEYGvCMMuyPpuUKXAwtBm2Zw1b1/7BVibiPhRWI7aVrQBa2p+CkKLGCEbQV/UIxZmkA==" /><div class="form-group">
<label for="username">LDAP Username</label>
<input type="text" name="username" id="username" class="form-control top" title="This field is required." autofocus="autofocus" required="required" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control bottom" title="This field is required." required="required" />
</div>
<div class="remember-me checkbox">
<label for="remember_me">
<input type="checkbox" name="remember_me" id="remember_me" value="1" />
<span>Remember me</span>
</label>
</div>
<input type="submit" name="commit" value="Sign in" class="btn-save btn" />
</form>
</div>
</div>
</div>
</body>
</html>
And i want to acess to this data : <input type="hidden" name="authenticity_token" value="V8qeuk9QAYk51gorLAobEYGvCMMuyPpuUKXAwtBm2Zw1b1/7BVibiPhRWI7aVrQBa2p+CkKLGCEbQV/UIxZmkA==" />(the value). Is it possible ? Thanks
You can also try to parse it as an XML. using for example this xml parser
EDIT:
In your case the fastest way to get the value from specific tag attribute is to use regex expression: For example
/(<input type="hidden" name="authenticity_token")((.|\s|\v)*?)(\/>)/
will allow you to extract the value attribute from input
const htmlDocumentString = '...<input type="hidden" name="authenticity_token" value="V8qeuk9QAYk51gorLAobEYGvCMMuyPpuUKXAwtBm2Zw1b1/7BVibiPhRWI7aVrQBa2p+CkKLGCEbQV/UIxZmkA==" />...'
const reg = /(<input type="hidden" name="authenticity_token")((.|\s|\v)*?)(\/>)/
// The second group of regex match should contain value="..."
const vAttr = reg.exec(htmlDocumentString)[2]
// Time to extract content of the value attribute.
// The fastest way by using substring and character indexes like so
const value = vAttr.substring(vAttr.indexOf('"') + 1, vAttr.lastIndexOf('"'))
console.log(value) // [string] "V8qeuk9QAYk51gorLAob..."
Try Cheerio. Like jQuery but designed for the server.

Best way to include a contact form in Lektor?

I am using the CMS Lektor. I need to include a contact form.
What is the best method to include it?
It might not be the best method, but using 3rd party services is easy and fast.
Examples:
Mailchimp
Formspree
Google
I have used Formspree and it works very well. Below is code for the Lektor content.lr file I used for my contact form:
_model: page
---
title: Contact
---
body:
<form method="POST" action="https://formspree.io/whatever.email.you.want.to.use#gmail.com">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="email" name="email" placeholder="Your email">
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link" type="submit">Send</button>
</div>
</div>
My live contact form is here
Formspree have some nice samples too: https://formspree.io/library

Posting to a Google Spreadsheet with AngularJs

Following on from this post Load JSON in AngularJS App (loading google spreadsheet) how do i go about posting data from my Angular app to a spreadsheet? Is it even possible to do?
I've created a version of my app that updates an array of data locally but now want to switch to pulling in data from an external source (a google spreadsheet - this works at the moment) and posting to this external source as well.
PS only using Google Spreadsheet for quick prototyping.
HTML form, the ng-submit was then being used to update a local array within my controller.
<form name="reviewsForm" class="form-horizontal" ng-controller="newReviewController as newReviewCtrl" ng-submit="reviewsForm.$valid && newReviewCtrl.addScore(reviews)" novalidate>
<div class="form-group">
<label for="type" class="col-xs-4 control-label hide">Review type</label>
<div class="col-xs-6 select-menu">
<select tabindex="" name="type" id="type" class="validate" ng-model="newReviewCtrl.reviews.type" class="validate" required>
<option value="" disabled selected>Review type</option>
<option ng-repeat="type in types">{{type.name}}</option>
</select>
</div>
<label for="reviewTitle" class="col-xs-4 control-label hide">Review title</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="reviewTitle" ng-model="newReviewCtrl.reviews.name" class="validate" placeholder="Review title" required>
</div>
</div>
<div class="form-group">
<label for="Description" class="col-xs-4 control-label hide">Description</label>
<div class="col-xs-12">
<input tabindex="" type="text" name="Description" ng-model="newReviewCtrl.reviews.desc" class="validate" placeholder="Description" required >
</div>
</div>
<div class="form-group">
<label for="Image" class="col-xs-4 control-label hide">Image url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="Image" ng-model="newReviewCtrl.reviews.imgUrl" class="validate" placeholder="Image url" required >
</div>
<label for="info" class="col-xs-4 control-label hide">More info url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="info" ng-model="newReviewCtrl.reviews.infoUrl" class="validate" placeholder="More info url" required >
</div>
</div>
<div class="form-group">
<label for="date" class="col-xs-4 control-label hide">Date</label>
<div class="col-xs-6">
<input tabindex="" type="date" max="2020-01-01" min="2015-01-01" name="date" ng-model="newReviewCtrl.reviews.date" class="validate" placeholder="YYYY-MM-DD" required>
</div>
<div class="col-xs-6 text-right">
<button tabindex="" type="submit" class="btn btn-block waves-effect waves-light green btn-add white-text" ng-show="reviewsForm.$valid" ng-click="newReviewCtrl.reviews.type='0'" id="add-submit" style="margin:0px;" data-toggle="collapse" data-target="#addReviewCollapse" aria-expanded="false" aria-controls="addReviewCollapse">
Add
</button>
</div>
</div>
Example of part of the existing array of data
$scope.reviews = [
{
name: "The Force Awakens",
imgUrl: 'img/theforceawakens.jpg',
type:'Movie',
desc: 'Amazeballs',
infoUrl: '???',
date: new Date(2016, 02, 16, 16)
},
I've put all the same information in to a google spreadsheet and am using this post to pull that data in to my page Load JSON in AngularJS App (loading google spreadsheet) , i now want to post to that spreadhseet as well using the above form but dont know where to start.

Need help: getting a Bootstrap email contact form to work from HTML/PHP code

I am setting up a blog and have a contact form page (standard bootstrap blog template)
I have everything uploaded onto my host - hostgator, but I can't manage to get the contact form to send an email out properly.
I have tried both an external email account and an account on the same domain name with no luck.
Here is the original html source for the contact page from bootstrap: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/contact.html
and the original source for the contact_me.php: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/mail/contact_me.php
Is there a setting I need to change from the hostgator cpanel or something in the code I'm missing?
Edit: Here is my domain if you want to view the source I have in place:
www.decentralizeblog.com
I have made bit changes to the form
you have not used certain attributes in your form
link method, action and name attribute in text field
<form name="sentMessage" id="contactForm" action="mailer.php" method="post" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
This may not be a problem with your code, have you checked that your hostgator plan supports the php mail() function? Some plans (I know from experience) have this disabled as an incentive for you to upgrade.
Hope this helps.

Using angular submit button causes redirect instead of calling function in SharePoint

I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.

Resources