How to create a file using user input in nodejs? - node.js

I have a text area, where the user type in their text. Once they click save the content in the text area is send to the server side. In the server side I want to use the content to create a file. I have a variable called "usercode" which holds the content of the text area. I create a file,
fs.wirteFile(name + "java", usercode, function(){})
Name the file name, given by user. This does create a file, however the only thing in the file is "[object Object]".
here is my client side I am using jade:
extends layout
block content
div(id="ineditortxt")
h1(name="headings") #{title}
a(href='/signout', class='text-center new-account') Sign Out
div(id="editor")
|public class #{title}{
| public static void main(String[] args) {
|
| }
|}
script(src="src/ace.js", type="text/javascript")
script(type="text/javascript").
//var myRequest = new XMLHttpRequest();
var editor=ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/java");
$(document).ready(function(){
$("#save").click(function(event){
var content = editor.getValue();
$.ajax({
url:'/getcode',
type:'POST',
data: content,
jsonpCallback: 'callback'
});
event.preventDefault();
return false;
});
});
form(name="Save", id = "save")
input(type="submit", value="Save")
div(id="result")
|
Here is the server side i didn't include all the code, just the one related to this question:
var express = require('express');
var router = express();
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var param = require('express-params');
var Parse = require('parse').Parse;
var http = require('http');
var fs = require('fs');
router.post('/editor', function(req, res){
name = req.body.newname;
res.render('Editor', {title: "" + name});
});
router.post('/getcode', function(req, res){
var usercode = req.body;
fs.writeFile(name + ".java", usercode, function(err){
if(err){
console.log(err);
} else{
console.log("The file is saved!");
}
})
res.send({code: "" + usercode});
console.log(usercode);
});
return router;
}

You are actually writing the req.body object to the file which is a JSON object to access the post data in your request.
You need to access the post data by form field name inside that object so if you have a form field named "myField", it's data will be available in req.body.myField
If you want to just write the whole object to the file, you need to first stringify the JSON object using JSON.stringify(req.body)
JSON.stringify is going to escape the string which you can fix by unescaping it using unescape(string)

On client side the code should be:
$(document).ready(function(){
$("#save").click(function(event){
var content = editor.getValue();
console.log("This is content: " + content);
$.ajax({
url:'/getcode',
type:'POST',
data: {'code': content},
processData: 'false',
});
event.preventDefault();
return false;
});
});
on the server side the code should be:
router.post('/getcode', function(req, res){
var usercode = req.body.code;
newname = name+".java";

Related

NodeJS: Use a pug template to display results

I have a method in a NodeJS app that handles scraping a URL, and when successful, saving that data in a Mongo database, and showing the results.
Main method:
//url parameter
app.get('/urls/', function(req, res) {
var client = new MetaInspector(req.query.url, {
timeout: 5000
});
client.on("fetch", function() {
var imagesArray = [];
var keywordsArray = [];
var now = new Date();
var dateVal = dateFormat(now, "mm/dd/yyyy h:MM:ss");
for (var i = 0; i < client.images.length; i++) {
// we only want jpgs. nothing else.
if (client.images[i].indexOf('.jpg') > -1) {
imagesArray.push({
"image": client.images[i]
})
}
}
for (var i = 0; i < client.keywords.length; i++) {
keywordsArray.push({
"keyword": client.keywords[i]
})
}
var newUrls = Urls({
url: client.url,
date_added: dateVal,
keywords: req.body.keywords,
author: client.author,
description: client.description,
ogTitle: client.ogTitle,
ogDescription: client.ogDescription,
image: client.image,
images: imagesArray,
keywords: keywordsArray
});
newUrls.save(function(err) {
if (err) throw err;
res.send('Success' + newUrls);
});
});
client.on("error", function(err) {
console.log(err);
});
client.fetch();
});
This all works well and good. But I'm using Pug and Express and have specific routes setup. I'd like instead of sending the newUrls obj to the res.send, have it go to a particular route and pass it to a particular pug template I already have setup:
// Route.js
var express = require('express');
var router = express.Router();
var Urls = require('../models/urlModel');
var Footer = require('../models/footerModel');
/* URL Saved Success Page */
router.get('/saved', function (req, res) {});
});
module.exports = router;
My view lives in a pug file located at:
/views/saved.pug
div#body
include nav.pug
div.container.item-container
div.row
div.col-md-8
h1 Item successfully saved.
h5 {item}
h6 {description}
I've tried using the res.send method, but that doesn't work. Any suggestions on how to handle this?
For my understanding, you want the request redirected to /saved with payload after urls saved to database, in this scenario, you could user res.redirect with query string
newUrls.save(function(err){
var payload = JSON.stringify({
url: client.url,
date_added: dateVal,
keywords: req.body.keywords,
author: client.author,
description: client.description,
ogTitle: client.ogTitle,
ogDescription: client.ogDescription,
image: client.image,
images: imagesArray,
keywords: keywordsArray
})
//append the payload as a query string
res.redirect(`/saved?payload=${payload}`)
})
and in /saved route, you could parse the query and use res.render
router.get('/saved', function (req, res) {});
let payload = JSON.parse(req.query.payload);
if(payload){
res.render('saved', payload)
}
});

Store an Image from registration page using NodeJS

I am using ExpressJS and NodeJS .
I build a registration page which require from the user to upload his image.
the code in Jade
.form-container
h1 Create a User
form(name="adduser",method="post",action="/adduser")
.col-xs-13
p Username
input.form-control(type="text", name="username")
.col-xs-13
p Email
input.form-control(type="text", name="useremail")
.col-xs-13
p Upload an Image
input.form-control(type='file', name ="pic", accept='image/*')
.col-xs-13
p Password
input#password.form-control(type='text', name='pass', required='')
.col-xs-13
p Confirm Password
input#confirm_password.form-control(type='text', required='' , onkeyup='checkPass(); return false;')
span#confirmMessage.confirmMessage
br
.form-group
button#myBtn.btn.btn-primary(type="submit") submit
i also have a script down there but its doesnt matter right now.
the thing is i want to save the image in my Express Project directory but i am not sure how to do that. here is the code which store the other information in Mongodb DB , i just need to save the image now.
/* POST to Add User Service */
router.post('/adduser', function(req, res) {
// Set our internal DB variable
var db = req.db;
// Get our form values. These rely on the "name" attributes
var userName = req.body.username;
var userEmail = req.body.useremail;
var userPass = req.body.pass;
var collection = db.get('users');
// Submit to the DB
collection.insert({
"username" : userName,
"email" : userEmail,
"password" : userPass
}, function (err, doc) {
if (err) {
res.send("There was a problem adding the information to the database.");
}
else {
res.redirect("userlist");
}
});
});
This might help you:
var express = require('express'),
app = express(),
formidable = require('formidable'),
util = require('util'),
fs = require('fs-extra'),
bodyparser=require('body-parser'),
qt = require('quickthumb'),
path = require('path');
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/db');
var Images = require('./model.js');
app.use(qt.static(__dirname + '/'));
app.use(bodyparser());
app.set('view engine','ejs');
app.post('/upload',function (req, res){
var form = new formidable.IncomingForm();
var userObj = [];
form.parse(req, function(err, fields, files) {
});
form.on('field',function(name,value){
// you will get the all the input field values here...
console.log(name,value);//name gives input field name and value gives input value
userObj.push({name:value});
});
form.on('end', function(fields, files) {
//You can save the data into collection from the array
//Images is my model
var img = new Images();
var temp_path = this.openedFiles[x].path;
/* The file name of the uploaded file */
var file_name = this.openedFiles[x].name;
//console.log('file '+file_name);
img.size = this.openedFiles[x].size;
img.type = this.openedFiles[x].type;
/* Location where we want to copy the uploaded file */
var new_location = 'uploads/';
//to copy the file into a folder
fs.copy(temp_path, new_location + file_name, function(err) {
if (err) {
console.log(err);
}
});//fscopy
});//form end
res.send('Done!!');
});//post
app.listen(3000);
console.log('started server');
For express use this.
var formidable = require('formidable');
npm i formidable
router.post("/one", (req, res) => {
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
console.log(fields);
console.log(files);
res.send(files);
});
});

How can I pipe external html content in jade?

I'm trying to get some html from a page online and place inside my jade template so I can style without copying and pasting every time a need it.
var request = require("request");
var cheerio = require("cheerio");
var loadContent = function() {
request({
uri: "http://www.mywebsite.com.br/test"
}, function(error, response, body) {
var $ = cheerio.load(body);
var result;
$('.content').each(function(){
result={"content":$(this).html()};
});
placeContent(result);
return true;
});
};
var placeContent = function(content) {
return content;
};
module.exports = loadContent;
Inside my gulpfile.js, besides the right requirements, I have:
gulp.task('jadeBuild', function() {
var options = {
pretty: true
};
return gulp.src(src+'/*.jade')
.pipe(data(function(){
return loadContent();
}))
.pipe(jade(options))
.pipe(gulp.dest(build))
.pipe(connect.reload());
});
And my jade file:
.mycontent
#{content}
What am I missing?
Try changing #{content} to !{content} in your jade file. This will tell jade not to escape any of the characters(which can be dangerous depending on where the input is coming from!).
See http://jade-lang.com/reference/interpolation/
Also, when you loop over each .content you are overwriting result every time. You need to append to result if you want to aggregate all the content together. Something like:
var result = {content: ''};
$('.content').each(function(){
result.content += $(this).html();
});

How to include an html email template in a node js application

I have an html template that we use to send to new website registrations. It is a simple html file that I would like to load into a variable so that I can replace certain parts before sending out using nodemailer (eg [FIRST_NAME]). I am trying to avoid having to paste a large chunk of html into my exports function. Any ideas on how I could go about doing that?
For a clearer idea, what I need to know is how to actually do this:
var first_name = 'Bob';
var html = loadfile('abc.html').replace('[FIRST_NAME]', first_name);
Here's an example of how to do it using ejs, but you can use any templating engine:
var nodemailer = require("nodemailer");
var ejs = require('ejs');
var transport = nodemailer.createTransport("SMTP", {
service: <your mail service>,
auth: {
user: <user>,
pass: <password>
}
});
function sendMail(cb) {
var user = {firstName : 'John', lastName: 'Doe'};
var subject = ejs.render('Hello <%= firstName %>', user);
var text = ejs.render('Hello, <%= firstName %> <%= lastName %>!', user);
var options = {
from: <from>,
replyTo: <replyto>,
to: <to>,
subject: subject,
text: text
};
transport.sendMail(options, cb);
}
To load the template file just us the fs module. Here's how to do it synchronously when the file is encoded in utf-8:
var fs = require('fs');
var template = fs.readFileSync('abc.html',{encoding:'utf-8'});
Maybe this will be useful for someone, as this question is already answered.
I'm working with jade and it was quite challenging figuring it out, at the end turned out to be very simple :)
(PS: this code is not optimized, is just an example)
Js part with nodemailer:
var nodemailer = require('nodemailer')
var jade = require('jade');
var config = {
// config for sending emails like username, password, ...
}
var emailFrom = 'this#email.com';
var emailTo = 'this#email.com';
var templateDir = 'path/to/templates/';
var transporter = nodemailer.createTransport(config);
var username = 'thisUsername'
// rendering html template (same way can be done for subject, text)
var html = jade.renderFile(templateDir+'/html.jade', {username: 'testUsername'});
//build options
var options = {
from: emailFrom,
to: emailTo,
subject: 'subject',
html: html,
text:'text'
};
transporter.sendMail(options, function(error, info) {
if(error) {
console.log('Message not sent');
console.log(info);
return false;
}
else{
console.log('Message sent: ' + info.response);
console.log(info);
return true;
};
});
html.jade
p test email html jade
p
| Username:
| !{username}
Here is the example for using email-templates and nodemailer.
js file:
var path = require('path');
var EmailTemplate = require('email-templates').EmailTemplate;
var transporter = nodemailer.createTransport(config);
var templateDir = path.join(__dirname, '/yourPath/emailTemplates', 'subdir');
var template = new EmailTemplate(templateDir)
var username = 'testUsername';
var transport = nodemailer.createTransport(config)
template.render(locals, function (err, results) {
if (err) {
return console.error(err)
}
// replace values in html template
console.log('template render')
console.log(err);
// default is results.html in this case
// read template and replace desired values
var res1 = results.html.toString();
var str = res1.replace('__username__', username);
console.log(str);
console.log('end template render')
transport.sendMail({
from: emailFrom,
to: emailTo,
subject: 'subject',
html: str,
text: results.text
}, function (err, responseStatus) {
if (err) {
return console.error(err)
}
console.log(responseStatus)
})
})
html.html
test email html
username:
<div>
__username__
</div>

Send PDF file from AngularJS to NodeJS

i need to send a PDF file from angularjs client to NodeJS service.
I did the angularjs service, and when i receive the file its a string like this:
%PDF-1.3
3 0 obj
<</Type /Page
/Parent 1 0 R
/Reso
How can i reconvert this string to PDF in NodeJS?
This is the client code:
var sendByEmail = function () {
$scope.generatingPdf = true;
$('#budget').show();
var pdf = new JsPDF('p', 'pt', 'letter');
var source = $('#budget')[0];
pdf.addHTML(source, 0, 0, function () {
var resultPdf = pdf.output();
BillService.sendByEmail("rbrlnx#gmail.com", resultPdf).then(function () {
});
$('#budget').hide();
});
};
var sendByEmail = function (email, file) {
var deferred = $q.defer();
var data = {
email: email,
file: file
};
BillService.sendByEmail(data, function (result) {
deferred.resolve(result);
}, function () {
deferred.reject();
});
return deferred.promise;
};
The server code controller its empty:
var sendByEmail = function (req, res, next) {
var file = req.body.file;
};
I experimented with this a while ago, and I came up with this. It's not production ready by a long shot maybe you find it useful. It's free of front end libraries (except Angular ofcourse), but assumes you're using Express 4x and body-parser.
The result:
In the browser:
On the server:
What you're seeing:
You're seeing a tiny node server, serving static index.html and angular files, and a POST route receiving a PDF in base64 as delivered by the HTML FileReader API, and saves it to disk.
Instead of saving to disk, you can send it as an email attachment. See for instance here or here for some info on that.
The example below assumes uploading a PDF by a user through a file input, but the idea is the same for all other ways of sending a document to your back end system. The most important thing is to send the pdf data as BASE64, because this is the format that most file writers and email packages use (as opposed to straight up binary for instance..). This also goes for images, documents etc.
How did I do that:
In your HTML:
<div pdfs>Your browser doesn't support File API.</div>
A directive called pdfs:
myApp.directive('pdfs', ['upload', function(upload) {
return {
replace: true,
scope: function() {
files = null;
},
template: '<input id="files" type="file">',
link: function(scope,element) {
element.bind('change', function(evt) {
scope.$apply(function() {
scope.files = evt.target.files;
});
});
},
controller: function($scope, $attrs) {
$scope.$watch('files', function(files) {
//upload.put(files)
if(typeof files !== 'undefined' && files.length > 0) {
for(var i = 0; i<files.length;i++) {
readFile(files[i])
}
}
}, true);
function readFile(file) {
var reader = new FileReader();
reader.addEventListener("loadend", function(evt) {
upload.post({name: file.name, data: reader.result})
})
if(reader.type = 'application/pdf') {
reader.readAsDataURL(file);
}
}
}
}
}]);
A tiny service:
myApp.service('upload', function($http) {
this.post = function(file) {
$http.post('/pdf', file);
}
});
And a node server:
var express = require('express');
var bodyParser = require('body-parser')
var fs = require("fs");
var app = express();
app.use(express.static('.'));
app.use( bodyParser.json({limit: '1mb'}) );
app.post('/pdf', function(req, res){
var name = req.body.name;
var pdf = req.body.data;
var pdf = pdf.replace('data:application/pdf;base64,', '');
res.send('received');
fs.writeFile(name, pdf, 'base64', function(err) {
console.log(err);
});
});
var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});

Resources