I've been trying without success to make an update a form that contains multiple inputs for multiple images with Multer.
I managed to make the Create form, I used an upload.files({name: "image1", name: "image2}), etc. The thing is when I created the Update form and when I want to Edit a text field only I get an undefined error since no images files are found.
So I came up with an approach to save the previous (or current image) in and oldImage and assign this in case there is no imagen update.
Here is my code from the controller:
update: (req,res)=>{
let data_games3 = JSON.parse(fs.readFileSync(path.join(__dirname, '../baseDeDatos/data_games3.json')))
req.body.id = req.params.id
req.body.img_1 = req.files ? req.files.img_1[0].filename : req.body.oldImage1
req.body.img_2 = req.files ? req.files.img_2[0].filename : req.body.oldImage2
req.body.img_3 = req.files ? req.files.img_3[0].filename : req.body.oldImage3
req.body.img_4 = req.files ? req.files.img_4[0].filename : req.body.oldImage4
req.body.img_5 = req.files ? req.files.img_5[0].filename : req.body.oldImage5
let gamesUpdate = data_games3.map( games => {
if(games.id == req.body.id){
return games = req.body
}
return games
})
let gameActualizar = JSON.stringify(gamesUpdate, null, 2)
fs.writeFileSync(path.join(__dirname,'../baseDeDatos/data_games3.json'), gameActualizar);
res.redirect('/admin')
}
I can update an image only if the input receives an image. Here is my Edit View trying to store in the input name "oldImage1" a value with current img.
<form action="/admin/edit/<%= gameToEdit.id%>?_method=PUT" method="POST" enctype="multipart/form-data">
<input type="hidden" name="oldImage1" value="<%= gameToEdit.img_1%>" >
<input type="hidden" name="oldImage2" value="<%= gameToEdit.img_2%>" >
<input type="hidden" name="oldImage3" value="<%= gameToEdit.img_3%>" >
<input type="hidden" name="oldImage4" value="<%= gameToEdit.img_4%>" >
<input type="hidden" name="oldImage5" value="<%= gameToEdit.img_5%>" >
Im working with a JSON file as a DB.
The update works great but only if I update all the fields for images too.
Related
I'm trying to test a POST method in a Nodejs/express application. I've connected to the firebase database.
My question is mainly related to the error. What am I doing wrong and how can I fix this please?
This is the error report:
PS C:\Users\WorkoutApp_v1> node app.js
Server started on port: 3000
Error: Reference.set failed: First argument contains undefined in property 'workouts.-Lqkqtcf6e2RED2F_1av.name'
This is the workout.js file with POST method.
const express = require('express');
const router = express.Router();
const firebase = require('firebase');
router.get('/add', function(req,res,next) {
res.render('workouts/add');
});
router.post('/add', function(req,res,next) {
var workout = {
name: req.body.name,
discription: req.body.discription,
set: req.body.set,
repsTime: req.body.repsTime
}
// console.log(workout);
// return;
// const fbRef = firebase.database().ref();
// var dbRef = fbRef.child('workouts');
// dbRef.push().set(workout);
// alternative implementation of the above 3-lines
firebase.database().ref().child('workouts').push().set(workout);
req.flash('success_msg', 'Workout saved');
res.redirect('/workouts');
});
module.exports = router;
This is the add.ejs file.
<form method="post" action="/workouts/add">
<div class="form-group">
<label>Exercise</label>
<input type="text" class="form-control" name="name" placeholder="Workout Name">
<label>Description</label>
<input type="text" class="form-control" name="description" placeholder="Description">
<label>Set</label>
<input type="text" class="form-control" name="sets" placeholder="Number of sets">
<label>RepsTime</label>
<input type="text" class="form-control" name="repsTime" placeholder="Number of repsTime">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<a class="btn btn-danger" href="/workouts">Close</a>
</form>
The value undefined can't be written in RTDB.
The value undefined is what you get when you access object properties that don't exist.
Your req.body.name is undefined because req.body doesn't have a name property.
What does your commented-out console.log(workout) print?
When you write code that might lead to writing undefined in RTDB, you should replace it with something else. In this scenario, you could use req.body.name || '', to replace a missing name property with an empty string.
In general, using || can cause trouble, because values like 0 and '' are equivalent to false, so they would be replaced by your default value.
A safer thing to do is value === undefined ? defaultValue : value.
Simple issue - I have a node express app that I want to perform a post request - using request passing the value of a string variable.
I don't want to transfer the name of the variable but its value.
If I just add the name to the query it will pass the actual name.
Looking forward for a solution.
Here is how your html file will look:
<form method='POST' action="/signup">
<b>USERNAME:</b> <input type="text" name="userName" placeholder="yourname">
<br>
<br>
<b>PASSWORD:</b> <input type="password" name="userPass" placeholder="***"><br>
<br>
<b>CONF. PASS.:</b> <input type="password" name="cnfPass" placeholder="***"><br>
<br>
<input type="submit" class = 'btn btn-primary' value="Signup">
</form>
Here is how your js file will look:
app.post('/signup',urlencodedparser,function(req,res){
var uPass=req.body.userPass;
var uName=req.body.userName;
var cnfPass = req.body.cnfPass;
if(uPass!=cnfPass)
res.end('Passwords dont match!')
else
{
con.query("INSERT INTO USERS(name,password) values (?,?)",[uName,uPass])
res.sendfile('user.html')
}
}
)
You can fetch the values of the variables by assigning name to them in the html file.
In this case,
I obtain the input name value with help of 'userName' and 'userPass' fields.
I'm trying to display the info of the user when I get the id using $routeParams.id, I already displayed the user's info using texts only but how can I display the user's image using img src?
In my controller I did this to get the selected user.
.controller('editbloodrequestCtrl', function($scope,$routeParams, Bloodrequest) {
var app = this;
Bloodrequest.getBloodrequest($routeParams.id).then(function(data) {
if (data.data.success) {
$scope.newLastname = data.data.bloodrequest.lastname;
$scope.newFirstname = data.data.bloodrequest.firstname;
$scope.newImg = data.data.bloodrequest.img;
app.currentUser = data.data.bloodrequest._id;
} else {
app.errorMsg = data.data.message;
}
});
});
Now that I get the users info, I displayed this in my frontend
<label>Lastname:</label>
<input class="form-control" type="text" name="lastname" ng-model="newLastname">
<label>Firstname:</label>
<input class="form-control" type="text" name="firstname" ng-model="newFirstname">
<label>Image:</label>
<img src ="" name="img" ng-model="newImg"> //how can I display the image here?
Sample Documents:
{firstname:"James",lastname:"Reid",img:"random.jpg"}
My output:
No need to bind ng-model to your image, just use the src with the absolute path of the image
<img src ="{{newImg}}" name="img">
No need to bind ng-model to your image, just use the src with the absolute path of the image..ng-model using only input tags.
<img ng-src ="newImg" name="newimg" />
I have an html/handlebars form set up with a Node/Express backend. the form offers options populated from a database. I am able to get the form to return a single user selected value and save it to my mongodb, but I really need the whole object.
{{#each proxyObj}}
<p>
<label>
<input type="radio" name="proxyTitle" value="{{title}}"/>
<span>{{title}}</span>
</label>
</p>
{{/each}}
and this is the express:
router.post("/proxies/:id", ensureAuthenticated, (req, res) => {
Project.findOne({
_id: req.params.id
}).then(project => {
const newProxy = {
proxyTitle: req.body.proxyTitle
// I need the other object values to go here, or to be able to retrieve them later
};
// Add to proxy array on the Project object in the collection
project.proxies.push(newProxy);
project.save().then(project => {
res.redirect(`/projects/stakeholders/${project.id}`);
});
});
});
Is it more sensible to try to load in the entire object as a value in the input field, or to return the id of the object, and look it up in the db? I need to display some of the returned object information on the same page, and also to use it later. Which is more efficient, and what is the best way to achieve it?
If I'm getting it right, the problem is that you're trying to put multiple inputs with the same name on one form in <input type="radio" name="proxyTitle" value="{{title}}"/>, which gives you something like
<input type="radio" name="proxyTitle" value="Title 1"/>
<input type="radio" name="proxyTitle" value="Title 2"/>
<input type="radio" name="proxyTitle" value="Title 3"/>
As explained here, the browsers will chew it, but the server-side handling may require some adjustments.
In your case, the easiest fix would be to add index to the names of parameters. So, your form would be looking like this:
{{#each proxyObj}}
<p>
<label>
<input type="radio" name="proxies[{{#key}}]" value="{{this}}"/>
<span>{{this}}</span>
</label>
</p>
{{/each}}
(note that if proxyObj is an array, you would have to use #index instead of #key; also, depending on the proxyObj fields' structure, you may have to use this.title as the values to display and whatnot).
As for your server-side handling, you'll have to loop through the proxies you receive and handle them one by one, e.g.
router.post("/proxies/:id", ensureAuthenticated, (req, res) => {
Project.findOne({
_id: req.params.id
}).then(project => {
project.proxies = []; // this is only in case you wanna remove the old ones first
const proxies = req.body.proxies;
for(let i = 0; i < proxies.length; i++) {
// Add to proxy array on the Project object in the collection
project.proxies.push({ proxyTitle: proxies[i].title });
}
project.save().then(project => {
res.redirect(`/projects/stakeholders/${project.id}`);
});
});
});
I got stuck while uploading updating user avatar on my website. I'm using angular and need to upload image using form and get base64 encoding of this image to pass as a parameter into my backend.
onUploadFinished(event){
const avatar ={
avatar:event.file
}
console.log(avatar)
//validate avatar
if(!this.validateService.validateAvatarUpdate(avatar.avatar)){
this.flashMessage.show('Please, select a new avatar', {cssClass: 'alert-danger', timeout:3000});
return false;
}
this.updateService.updateAvatar(avatar).subscribe(data=>{
console.log()
if(data/*.success*/){ //commented cause response doesnt have property success but still registering user without displaying the flash message
this.flashMessage.show('You successfuly changed your avatar', {cssClass: 'alert-success', timeout:3000});
this.router.navigate(['/profile'])
this.authService.getProfile().subscribe(profile=>{
this.user = profile.user;
},
err=>{
console.log(err);
return false;
});
}else{
this.flashMessage.show('Something went wrong', {cssClass: 'alert-danger', timeout:3000});
this.router.navigate(['/profile'])
}
});
}
I was trying to use ng2-image-upload here is html
<h6>Upload new photo...</h6>
<!-- <form (submit)="onUserAvatarSubmit()" enctype="multipart/form-data">
<input type="file" name="avatar" class="text-center center-block well well-sm">
<p></p>
<input class="btn btn-primary" value="Upload" type="submit">
</form> -->
<image-upload name="avatar" [class]="'customClass'"
[headers]="{Authorization: this.authToken}"
[buttonCaption]="'Choose an Image'"
[dropBoxMessage]="'or just drop them here'"
(uploadFinished)="onUploadFinished($event)"
[url]="''">
</image-upload>
Maybe anyone had such experience with uploading images, so give me some tips how to deal with it. Thanks here is a screenshot So you see when displaying this image we can see its base64 but I cant take it.