I've deployed my node js app to Heroku, and everything seems to work perfect except static image files.
I've tested locally with
heroku local web
and the images are working correctly, but not when I check in heroku.
I'm working with node.js, express and handlebars for templates. This is the project structure.
Images are located in public/imagenes/
and my views in views/
And this is the code of the login.hbs file that it's not showing the images.
<div class="login-page">
<div class="form">
<form class="register-form" name="register" method="POST" action="/register_success">
<input type="text" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<input type="text" name="nombre" placeholder="nombre"/>
<input type="submit" value="Crear cuenta" name="register_success"></input>
<p class="message">Ya registrado? Entrar</p>
<img src="../public/imagenes/YupiLogo.png" alt="Logo Yupi" width="15%" id="cabecera"/>
</form>
<form class="login-form" name="login" method="POST" action="/login">
<input type="text" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<input type="submit" value="Login" name="login"/>
<p class="message">No registrado? Crea una cuenta</p>
<img src="imagenes/YupiLogo.png" alt="Logo Yupi" width="15%" id="cabecera"/>
</form>
</div>
</div>
<script>
$(document).ready(function(){
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
});
</script>
You can check the app in heroku at heroku node app
Attached network request for images.
I had look at Heroku app, it throws error of 404 for images as it is not possible for it to find path of images.
To make application able to find path, please add following statement into your main .js file
app.use(express.static('public/imagenes'));
and provide image name into src as following,
<img src="YupiLogo.png" alt="Logo Yupi" width="15%" id="cabecera"/>
Related
Same code works fine with other application but for some reason won't work in this one
HTML:
<form action="/employees/add" method="POST" enctype="multipart/form-data" >
<div class="form-group">
<label for="first_name">First Name</label>
<input name="first_name" type="text" class="form-control" id="first_name" value="first_name"placeholder="Please enter your first name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input name="last_name" type="text" class="form-control" id="last_name" value="last_name" placeholder="Please enter your last name">
</div>
</form>
Server.js
app.post('/employees/add', (req, res) => {
data.addEmployee(req.body).then(() =>{
console.log(req.body);
res.redirect('/employees')
});
Output:
Server running 8080
undefined
Of course, when I call addEmployee since req.body is undefined it won't do anything
I tried different app.use(express.static... ) but no luck and here how my folder looks like
I have a form in a NodeJs project where I am using:
app.use(bodyParser.urlencoded({extended: true}));
I want to make it where if a user enters <h1>hello</h1> into the form that it will show up as "hello" formatted as an h1 instead of <h1>hello</h1>
<form action="/blogs" method="POST">
<div class="form-group">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
<div class="form-group">
<input class="form-control" type="text" name="image" placeholder="image url">
</div>
<div class="form-group">
<input class="form-control" type="text" name="description" placeholder="description">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">
Submit
</button>
</div>
</form>
I found a solution to my problem.
In Node.js if you want to display information as HTML, in the index.ejs file
you need to do a
<%- blog.description %>
, where that dash is the key.
Before i had
<%= blog.description %>.
i have using ejs engine to get and post method.When i use http://localhost:8080/signup, i will get a sigup form where i can input my values. The problem is after submitting the form,i am unable console the value of "req.body". Help me?
app.post('/signup',urlencodedParser,function(req,res){
//console.log(req)
var names = req.body;
console.log(names);
res.end("sigup submitted");
});
app.get('/signup', function(req, res) {///////////signup ejs loading
res.render('signup')
});
<form id="signupForm" enctype="multipart/form-data" method="post" action="">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>Company Name</b></label>
<input type="text" placeholder="Company Name" name="name" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label for="psw-repeat"><b>Address</b></label>
<input type="text" placeholder="Address" name="address" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
Express does come with some body parsers, but if you are using multipart/form-data then answer would be https://github.com/expressjs/multer not
You can even read that https://www.npmjs.com/package/body-parser (aka body-parser) also do not read multipart/form-data as they can be complicated and should be used only when files are sent.
I am getting error you need to enable javascript to run this app. when I run using nom start.
I have tried to change browser settings. but didn't work please see screenshots that I have attached.
class AuthPage extends Component {
render() {
return (
<form className="auth-form">
<div className="form-control">
<label htmlFor="email">E-Main</label>
<input type="email" id="email" />
</div>
<div className="form-control">
<label htmlFor="password">Password</label>
<input type="password" id="password" />
</div>
<div className="form-actions">
<button type="button">Switch To SIGN UP</button>
<button type="submit">Submit</button>
</div>
</form>
);
}
}
is there a way I can send an image file from the front end to the backend? I need to upload the image selected in the form to the cloudinary cloud platform.
Accessing the file input with req.body does not help and gives me an error saying no such file or directory open.
If I add enctype="multipart/form-data", and then on my backend do a req.on('data', (data)=> {console.log(data.toString)}) and then perform an upload to cloudinary, it fails and gives me the following error: Error: Path must be a string without null bytes
This is my form:
<form method="post" action="/submitArticle" enctype="multipart/form-data">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
<div class="field">
<label class="title is-4">Title</label>
<div class="control">
<input class="input" name="title" type="text" placeholder="Give your story a title...">
</div>
</div>
<div class="field">
<label class="title is-4">Story</label>
<div class="control">
<textarea class="textarea" name="story" rows="7" placeholder="Tell your story here..."></textarea>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<input class="button is-primary" type="submit">
</input>
</p>
</div>
</form>
Is there another way to send image data from the front end to the backend? Thanks in advance!!
If you want to upload to Cloudinary, maybe you should consider using Cloudinary Upload Widget.
The widget supports uploading images directly from the browser to Cloudinary storage, without involving your servers in the process.
You can use third party library like Dropzone to upload image in the frontend and send it to the backend. Simple that's it