my problem is that whenever a new client is created, all the values are null in the database except the id, the name, responsable and the logo. i dont think i did a programmation mistake, so i think it is a case of callbacks race but i cant found the solution.
P.S : the problem occure only if i select and send an image file to be uploaded, in the other case, the client values are stored correctly.
P.S 2 : the problem occure in my remote server only, in local environnement all is ok !
Than you very much !
UPDATE : i included the code for my create.ejs view
This is the code of the store method in my ClientService :
store: function(req, done) {
var name = req.param('name'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
comments = req.param('comments');
Client.create({
name: name,
town: town,
adress: adress,
postalCode: postalCode,
telephone: telephone,
fax: fax,
responsable: responsable,
website: website,
activity: activity,
email: email,
comments: comments
}).exec(function(err, client) {
if (err) console.log(err);
req.file('logo').upload(
{
dirname: sails.config.appPath + sails.config.params.logos
},
function(err, logo) {
if (err) return done(err, null);
if (logo.length !== 0) {
client.logo = require('path').basename(logo[0].fd);
} else {
client.logo = 'default.png';
}
client.save(function(err) {
return done(null, client);
});
}
);
});
}
And this is the code for the EJS view :
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form action="store" method="POST" class="form-horizontal" enctype="multipart/form-data">
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="name">
<label for="form_control_1">Nom du Client</label>
<i class="fa fa-institution"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="activity">
<label for="form_control_1">Activité</label>
<i class="icon-star"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="responsable">
<label for="form_control_1">Responsable</label>
<i class="icon-user"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" style="margin-left:15px;">
<div class="form-photo-label-form" >
<i class="icon-picture icon-create"></i>
<label for="form_control_1" class="form-photo-create" >Photo </label>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="logo"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="email">
<label for="form_control_1">Email</label>
<i class="fa fa-inbox"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="adress">
<label for="form_control_1">Adresse</label>
<i class="icon-home"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="postalCode">
<label for="form_control_1">Code postale</label>
<i class="fa fa-send"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="town">
<label for="form_control_1">Ville</label>
<i class=" fa fa-map"></i>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<textarea class="form-control" rows="3" style="height: 192px; resize:none " name="comments"></textarea>
<label for="form_control_1">Commentaire</label>
<i class=" fa fa-edit"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="telephone">
<label for="form_control_1">Telephone</label>
<i class="icon-screen-smartphone"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="fax">
<label for="form_control_1">Fax</label>
<i class="fa fa-fax"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-md-line-input has-success form-md-floating-label form-create">
<div class="input-icon">
<input type="text" class="form-control" name="website">
<label for="form_control_1">Site Internet</label>
<i class=" fa fa-internet-explorer"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Annuler</button>
<button type="submit" class="btn green"><i class="fa fa-check"></i> Enregistrer</button>
</div>
</form>
Nothing mysterious (:
Your problem is that You use req.param instead of req.body
And Your code is simply should look like this:
const path = require('path'); // somewhere in same module at the top
store: (req, done) => {
Client
.create(req.body)
.exec((err, client) => {
if(err) {
// no need to go further
// if You cannot create database record
return done(err);
}
const dirname = path.join(sails.config.appPath, sails.config.params.logos); // safely concatenates paths based on OS
req
.file('logo')
.upload({dirname}, (err, logo) => {
if (err) {
// we created record (client)
// but could not save the file
// it should not be a stopper
console.error(err);
}
client.logo = (logo) ? path.basename(logo[0].fd) : 'default.png';
client.save((err) => {
if(err) {
// just log the error and continue
console.error(err);
}
done(null, client);
});
});
});
}
P.S. When You pass req.body (or any other) object to Client.create don't worry about object contents, just define field constrains in You model file, ODM (or ORM) will just handle validation automatically based on constraints and will prevent from creating null valued fields
Example:
module.exports = {
attributes: {
name: {
// it requires field name:
// to be defined (required: true),
// to be string (type),
// to have at least 2 symbols,
// to not exceed 100 symbols
type: 'string',
required: true,
minLength: 2,
maxLength: 100
},
email: {
// it requires field email:
// to be defined (required: true),
// to be email (type),
// to be unique among documents, records, rows
type: 'email',
required: true,
unique: true
},
... and so on ...
}
}
More about validation here
Thanks everybody. I solved the problem by putting the file input at the end the form. Like you suggested, the values after the file input were reset after the upload of the file
Related
The actual challenge that I am facing now is how to load the comment properly. My Ajax is creating the comment but I am struggling to load the comment properly in line with other comments.
what happening now is that the comment loads but it doesn't load properly, I am struggling to load it with the right ID in the right place. when it loads, it shows my title and descriptions together and it doesn't load the date.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST" >
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists" >
<div class="col-sm-10" >
<h3 id="comments-count" ><%= program.programcomments.length%> </h3>
<% program.programcomments.forEach(comments=> { %>
<div class="media" >
<div class="media-body" >
<h4 class="media-heading" id="lists" ><%= comments.name %></h4>
<p id="lists" ><%=comments.description %></p>
<ul class="list-unstyled list-inline media-detail pull-left" id="lists">
<li id="lists"><i class="fa fa-calendar" ></i><%= moment(comments.createdAt).format('llll') %></li>
</ul>
</div>
</div>
<% });%>
</div>
</div>
</section>
$('#post-comment').on('click', function(event) {
event.preventDefault();
$.ajax({
url : "/programs/<%= program._id %>/createComment",
method : 'POST',
data : {
name : $('#username').val(),
description : $('#descriptioncomment').val()
},
success : function(result ) {
$('.form-control').each(function () {
let comments = this.value;
$('#comment-lists').append($('#lists').text(comments))
document.getElementById('comments-count').innerHTML++
});
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
}
});
})
You are using same ids for mutliple elements so first remove them and use class. Then , you can generate entire media div inside success function of ajax with the value of inputs and then append them inside your comment-lists div.
Demo Code :
$('#post-comment').on('click', function(event) {
event.preventDefault();
/*$.ajax({
url: "/programs/<%= program._id %>/createComment",
method: 'POST',
data: {
name: $('#username').val(),
description: $('#descriptioncomment').val()
},
success: function(result) {*/
//append new div .. with username & desc
$('#comment-lists').append(`<div class="media">
<div class="media-body">
<h4 class="media-heading">${$('#username').val()}</h4>
<p class="lists">${$('#descriptioncomment').val()}</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>${moment(new Date()).format('llll') }</li>
</ul>
</div>
</div>`)
$("#comments-count").text(parseInt($("#comments-count").text()) + 1) //updated total
//then emtpy
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
/*}
});*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST">
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists">
<div class="col-sm-10">
<h3 id="comments-count">2</h3>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading lists">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
</div>
</div>
</section>
So I have a post method in my nodejs application and I want to send a form from my ejs file to an array in one of my models. In the ejs file, I have a select option for the user to enter a list of subjects. Once submitted, I cannot get the values from the select option. I tried to store it in an array but it shows undefined. I have an instructor model where it stores the subjects fields in a list of string array. I am not sure what to do. Here is what I have:
admin.js
router.get('/newInstructor', isLoggedIn, function(req, res) {
res.render('newInstructor.ejs');
});
router.post('/newInstructor', isLoggedIn, function(req, res) {
var lisOfSubjects = [req.body.listOfSubjects];
console.log('Subjects -> ' + lisOfSubjects);
var newInstructor = new Instructor ({
firstName: req.body.firstName,
lastName: req.body.lastName,
email: req.body.email,
officeNumber: req.body.officeNum,
cellNumber: req.body.cellNum,
address: {
address1: req.body.address,
address2: req.body.address2,
city: req.body.city,
state: req.body.state,
zipCode: req.body.zip
},
subjects: lisOfSubjects,
officeLocation: req.body.officeLocation
});
console.log(newInstructor);
});
ejs view file
<!-- js function to insert and remove from the select option-->
<script>
function insertTeachingSelect() {
var text = document.getElementById("subject").value;
console.log(text);
var select = document.getElementById("listOfSubjects");
select.options[select.options.length] = new Option(text, 'Value1');
}
function removeTeachingSelect() {
var removeSelect = document.getElementById("listOfSubjects");
removeSelect.remove(removeSelect.selectedIndex);
}
</script>
......
<div class="form-group">
<div class="form-row">
<div class="col-md-4">
<div class="form-label-group">
<input type="text" id="subject" name="subject" class="form-control">
<label for="Enter subject">Enter subject</label>
</div>
</div>
<div class="col-md-2">
<div class="form-label-group">
<input type="button" onclick="insertTeachingSelect()" class="btn btn-primary btn-block" value="Add more">
<input type="button" onclick="removeTeachingSelect()" class="btn btn-primary btn-block" value="Remove">
</div>
</div>
<div class="col-md-6">
<div class="form-label-group">
<input type="text" id="officeLocation" name="officeLocation" class="form-control" placeholder="Office location" required="required">
<label for="officeLocation">Office location</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-4">
<div class="form-label-group">
<select id="listOfSubjects" name="listOfSubjects"size="5"></select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<div class="form-row">
<div class="col-md-6 mx-auto">
<div class="form-label-group">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
I'm pretty new to Angular and have been tasked to complete a "Contact Us" form to allow customers to send emails through the web form.
The HTML:
<div class="content-section">
<div class="container">
<div class="row">
<div class="">
<h2 class="intro-title">Contact Us</h2>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<div class="col-lg-6 spacer">
<div class="fadeIn-1">
<p>
<strong>Contact us</strong>
<br />
111.222.3333
<br />
information#mysite.com
</p>
</div>
<br />
<div class="fadeIn-2">
<p>
<strong>Office 1</strong>
<br />
Our street address
<br />
City, state, zip
</p>
</div>
<br />
<div class="fadeIn-3">
<p>
<strong>Office 2</strong>
<br />
street address
<br />
City, state, zip
</p>
</div>
</div>
<fieldset>
<!-- Form Name -->
<legend>Send us a message</legend>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">First Name</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-1">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">E-Mail</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-2">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">Phone #</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-3">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(801)222-3333" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Subject</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Message</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-5">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="9" class="form-control" name="comment" placeholder="Message">
</textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Send
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
This is this the component:
import { Component } from '#angular/core';
import { trigger, state, style, transition, animate } from '#angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';
#Component({
selector: 'contact-page',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
]),
],
host: {
'(window:scroll)': 'updateHeader($event)',
'[#slideInOutAnimation]': '',
'[#fadeInAnimation]': ''
}
})
export class ContactComponent {
title = 'app';
isScrolled = false;
currPos: Number = 0;
startPos: Number = 0;
changePos: Number = 0;
menuState = 'out';
constructor() { }
updateHeader(evt) {
this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
if (this.currPos >= this.changePos) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
}
}
I've looked at options such as "nodemailer" and I just can't seem to figure out how it all works.
I need the email to be sent to our email address when a customer clicks the submit button. Any suggestions?
Also, I'm not really sure what else is needed to get help, so if you need anything else, I am happy to post it up.
I am begginer in nodejs and I am using express-validator library to validate form.
I want to display error message seprately to each input type field,
not group wise.
Currently my code shows the error in group like
Name is required!
Email is required!
Email is wrong!
Mobile is required!
========================================================================
Controller Code
employeeController.saveEmployee = function(req,res){
var employeeData = req.body;
// Start Validation
req.checkBody('employeeName','Name is required!').notEmpty();
req.checkBody('employeeEmail','Email is required!').notEmpty();
req.checkBody('employeeEmail','Email is wrong!').isEmail();
req.checkBody('employeeMobile','Mobile is required!').notEmpty();
req.sanitize('employeeName').trim();
req.sanitize('employeeName').escape();
// End Validation
var errors = req.validationErrors();
console.log(errors);
if(!errors){
var employee = new Employee({
name : req.body.employeeName,
email : req.body.employeeEmail,
mobile : req.body.employeemobile,
});
employee.save(function(err){
if(err){
throw err;
}
console.log('User inserted successfully');
res.redirect('/employee-list');
});
}else{
console.log(employeeData.employeeName);
res.render('employee/add-employee',{
errors : errors,
employeeData : employeeData
});
}
};
View template
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Add Employee Profile</h3>
<h5 class='text-aqua pull-right' style='margin-top: 0px;'>
<i class="fa fa-backward"></i> Back
</h5>
</div>
<p>
<% if(errors){ %>
<ul>
<% for(var i = 0; i < errors.length; i++){ %>
<li> <%= errors[i].msg %> </li>
<% } %>
</ul>
<% } %>
</p>
<!-- form start -->
<form method = 'post' action = '/save-employee'>
<div class="box-body">
<div class="form-group col-md-4">
<label>Name</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
</div>
</div>
<div class="form-group col-md-4">
<label>Email</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
</div>
</div>
<div class="form-group col-md-4">
<label>Mobile</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
</div>
</div>
</div>
<div class="callout" id='message-container' style='display:none;'></div>
<div class="box-footer">
<button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
</div>
</form>
</div>
</div>
Ok, so what you have to do - is separate errors.
Your controller file:
employeeController.saveEmployee = function(req,res){
const nameRequired = 'Name is required!';
const emailRequired = 'Email is required!';
const emailNotValid = 'Email is wrong!';
const mobileRequired = 'Mobile is required!';
const employeeData = req.body;
// Start Validation
req.checkBody('employeeName', nameRequired).notEmpty();
req.checkBody('employeeEmail', emailRequired).notEmpty();
req.checkBody('employeeEmail', emailNotValid).isEmail();
req.checkBody('employeeMobile', mobileRequired).notEmpty();
req.sanitize('employeeName').trim();
req.sanitize('employeeName').escape();
// End Validation
const errors = req.validationErrors();
console.log(errors);
if(!errors){
const employee = new Employee({
name : req.body.employeeName,
email : req.body.employeeEmail,
mobile : req.body.employeemobile,
});
employee.save(function(err){
if(err){
throw err;
}
console.log('User inserted successfully');
res.redirect('/employee-list');
});
}else{
console.log(employeeData.employeeName);
const employeeNameRequired = errors.find(el => el === nameRequired );
const employeeEmailRequired = errors.find(el => el === emailRequired);
const employeeEmailNotValid = errors.find(el => el === emailNotValid);
const employeeMobileRequired = errors.find(el => el === mobileRequired);
res.render('employee/add-employee',{
employeeData,
employeeNameRequired,
employeeEmailRequired,
employeeEmailNotValid,
employeeMobileRequired
});
}
};
And you View file will look something like this:
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Add Employee Profile</h3>
<h5 class='text-aqua pull-right' style='margin-top: 0px;'>
<i class="fa fa-backward"></i> Back
</h5>
</div>
<!-- form start -->
<form method = 'post' action = '/save-employee'>
<div class="box-body">
<div class="form-group col-md-4">
<label>Name</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
<p><%= employeeNameRequired %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagType"></span>
</div>
</div>
<div class="form-group col-md-4">
<label>Email</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
<p><%= employeeEmailRequired %></p>
<p><%= employeeEmailNotValid %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagName"></span>
</div>
</div>
<div class="form-group col-md-4">
<label>Mobile</label>
<div class='input-group'>
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
<p><%= employeeMobileRequired %></p>
</div>
<div class="form-group has-error">
<span class="help-block" style="text-align:center" id="error_tagDescription"></span>
</div>
</div>
</div>
<div class="callout" id='message-container' style='display:none;'></div>
<div class="box-footer">
<button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
</div>
</form>
</div>
</div>
Update:
For me personally, using jsonSchema validation fits best. It's very configurable and results in more readable code. For example module tv4 can be used with jsonSchema to validate req.body.
I am using Stormpath API and building a web app on top of its React/Express boilerplate. How do I implement without the multipart/form-data option? I've tried using multer but it doesn't work without first specifying the option.
Here's the code snippet for the update profile page. The UserProfilePage component will become a form tag in HTML.
export default class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.state = {resume: 'No Resume Selected'};
this.changeResume = this.changeResume.bind(this);
}
changeResume(e) {
var str = e.target.value;
var n = str.lastIndexOf('\\');
var result = str.substring(n + 1);
this.setState({resume: result});
}
render() {
return (
<DocumentTitle title="Update Profile">
<div className="container">
<div className="row">
<div className="col-xs-12">
<h3>Update Profile</h3>
<hr />
</div>
</div>
<div className="row">
<div className="col-xs-12">
<UserProfileForm>
<div className='sp-update-profile-form'>
<div className="row">
<div className="col-xs-12">
<div className="form-horizontal">
<div className="form-group">
<label htmlFor="givenName"
className="col-xs-12 col-sm-4 control-label">Name</label>
<div className="col-xs-12 col-sm-4">
<input className="form-control" id="givenName" name="givenName" placeholder="Name"
required="true"/>
<input className="form-control" id="surname" name="surname"
style={{display: 'none'}}/>
</div>
</div>
<div className="form-group">
<label htmlFor="email" className="col-xs-12 col-sm-4 control-label">Email</label>
<div className="col-xs-12 col-sm-4">
<input className="form-control" id="email" name="email" placeholder="Email"
required="true"/>
</div>
</div>
<div className="form-group">
<label htmlFor="resume"
className="col-xs-12 col-sm-4 control-label">Resume</label>
<div className="col-xs-12 col-sm-4">
<label className="btn btn-default btn-file">
Browse<input key="resume" id="resume" name="resume"
type="file" style={{display: 'none'}}
onChange={this.changeResume}/>
</label>
<span id="resume_filename"
className="control-label pull-right">{this.state.resume}</span>
</div>
</div>
<div className="form-group">
<label htmlFor="coverletter"
className="col-xs-12 col-sm-4 control-label">Cover
Letter</label>
<div className="col-xs-12 col-sm-4">
<textarea className="form-control" id="coverletter"
name="coverletter" rows="10"/>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-4 col-sm-4">
<p className="alert alert-danger" spIf="form.error"><span
spBind="form.errorMessage"/></p>
<p className="alert alert-success" spIf="form.successful">
Profile Updated.</p>
<button type="submit" className="btn btn-primary">
Update
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</UserProfileForm>
</div>
</div>
</div>
</DocumentTitle>
);
}
You can try encoding the image using base64 and send it to API as a string.
You can achieve that by using eg. this https://www.npmjs.com/package/base64-img