We Keep Coding

Upload directory doesn't send folder name with file

I tried new feature of directory upload https://stackoverflow.com/a/8218074/2004910 but I am not receiving exact folder structure on the server request.
HTML
<form action="http://localhost:3000/" method="post" enctype="multipart/form-data">
<input id="files" class="file" type="file" name="file[]" webkitdirectory directory>
<input type="submit" />
Request Payload (network panel)
ExpressJS:
const express = require('express')
const app = express()
var busboy = require('connect-busboy');
var fs = require('fs');
//...
app.use(busboy());
app.post('/', function (req, res) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/files/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.redirect('back');
});
});
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Please suggest me how to achieve this.

from https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
After the user makes a selection, each File object in files has its
File.webkitRelativePath property set to the relative path within the
selected directory at which the file is located.
I do not think it is passed in the POST request tough, you'll have to work it on the client side I think.
$('#files').on('change',function(e){
var files = e.target.files;
for (let i=0; i<files.length; i++) {
var path = files[i].webkitRelativePath;
$('#form').append('<input type="hidden" name="filepath[]" value="'+path+'"/>');
}
});
This script will append hidden inputs to send the file paths with the POST. Your script could then use it. Look out tough, if I sent you a file with the same filename, but in two different folders, you might not place the right one in the correct folder.

How can I get a req.body from a form that is not undefined?

Whenever I submit a form with information it is returned as undefined. I have posted the code below. If I include the (enctype="multipart/form-data") in my form I dont receive anything for the body (req.body). However, if I dont include it I receive a body but the file processing does not work and the page just keeps loading.
app.post('/processupload', function(req, res) {
var date = new Date();
titles.push(req.body.pTitle);
descriptions.push(req.body.postDescription);
dates.push(date.toString());
file_names.push(req.body.fUpload);
console.log(req);
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files)
{
if(err) return res.redirect(303, '/error');
});
form.on('end', function(fields, files)
{
var temp_path = this.openedFiles[0].path;
var file_name = this.openedFiles[0].name;
var new_location = __dirname + '/public/images/';
fs.copy(temp_path, new_location + file_name);
res.redirect(303, 'home');
});
});
<form action="/processupload" enctype="multipart/form-data" method="POST" id="uploadForm" name="postForm">
<p align="center" id="pUploadForm" name="pPostForm"><label for="photoTitle">Photo Title: </label>
<input type="text" id="photoTitle" name="pTitle"><br>
<br><input type="file" id="fileUpload" name="fUpload"><br>
<br><label for="photoCaption">Photo Caption: </label><br>
<textarea rows="10" cols="50" id="photoCaption" name="postDescription"></textarea><br><br>
</p>
</form>

I created a project few weeks back that had photo upload. I used Angular and Node. But it should still work without Angular only using Node. I used multer npm package.
var AWS = require('aws-sdk');
var s3 = new AWS.S3();
var multer = require('multer');
var upload = multer({ storage: multer.memoryStorage() }); //Save photo in memory
router.post('/processupload', upload.single('photo'), function(req, res, next){
var bucketName = process.env.BUCKET_NAME;
var file = req.file;
var filename = file.originalname;
var ext = _.last(filename.split('.'))
var keyName = uuid.v4() + '.' + ext;
var url = process.env.AWS_URL + bucketName + '/' + keyName;
var params = { Bucket: bucketName, Key: keyName, Body: file.buffer, ACL: 'public-read' };
s3.putObject(params, function(err, data) {
if (err){
return res.status(400).send(err)
} else{
console.log("Successfully uploaded data to myBucket/myKey");
console.log("The URL is", url);
res.send(url)
}
});
});
This helped me uploading images then gives me back the image url from the S3 Bucket. But you can handle that file as you want. Multer allows you to access to req.file so you can do whatever you need to do, in this example I created a unique id in order to get a url to send back to the front-end and therefore use it a source somehow. This is a form working with this code:
<form action="/testupload" method='post' enctype='multipart/form-data'>
<input type="file" name="photo" id="photo" multiple=false>
<button type="submit">Submit</button>
</form>
Something important that took a long time to debug though the name="photo" in the form must be reflected by the upload.single('photo') middleware. I hope this helps, there are so many ways go around this, this is just one.
Sources:
https://www.npmjs.com/package/multer
http://docs.aws.amazon.com/AmazonS3/latest/UG/UploadingObjectsintoAmazonS3.html

Node.js req.body empty

I am having a hell of a time with this one. I don't know why my node.js response is empty. It comes back {} if I send it through the javascript here, or if I use the Advanced REST client. Here is my code:
client.js
unction ajaxPost(){
var req = new XMLHttpRequest();
var payload = {'Add Item':'Add Item',
'name':document.getElementById('submitForm').elements[0].value,
'reps':document.getElementById('submitForm').elements[1].value,
'weight':document.getElementById('submitForm').elements[2].value,
'date':document.getElementById('submitForm').elements[3].value,
'lbs':document.getElementById('submitForm').elements[4].value
}
payload['test'] = 'value!';
console.log('did this happen?');
console.log(payload['test']);
var url = '/edit';
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load',function(){
if(req.status >= 200 && req.status < 400){
var response = JSON.parse(req.responseText);
console.log('you got a response!')
} else {
console.log("Error in network request: " + req.statusText);
}});
console.log(JSON.stringify(payload));
req.send(JSON.stringify(payload));
event.preventDefault();
}
HTML
<form id = "submitForm">
<input type="text" name="name" id="name" value='test'>Name<br>
<input type="text" name="reps" id="reps" value='10'>Reps<br>
<input type="text" name="weight" id="weight" value='100'>Weight<br>
<input type="text" name="date" id="date" value='1/1/16'>Date<br>
<input type="text" name="lbs" id="lbs" value='1'>Pounds<br>
<input type="submit" onclick = 'ajaxPost()' value="Add Item">
</form>
server
var express = require('express');
var mysql = require('./dbcon.js');
var bodyParser = require('body-parser');
var app = express();
var handlebars = require('express-handlebars').create({defaultLayout:'main2'});
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('port', 3010);
app.post('/edit',function(req,res,next){
//var context = {};
console.log('you posted!');
console.log(req.body);
In my console, I see that the req.body is {}.
I don't know what I am doing wrong. I have tried using httpbin and I can see that the javascript works fine, which means I am probably doing something wrong on the node side, but I cannot figure out what. If I instead use method="submit" on the form, then the post goes through just fine, but it's not what I want to do. What am I doing wrong?? Because advanced REST client also fails, I am guessing it is node?

You are sending json in the request, but you only have middleware setup to handle url encoded requests. Add this to your middleware and json requests should populate in the req.body.
app.use(bodyParser.json());
More info can be found at in the body parser documentation. Specifically you'll notice that the middleware you are using urlencoded states that it only parses urlencoded bodies (this is where Content-Type is used).

You are setting the header to be json
req.setRequestHeader('Content-Type', 'application/json');
and not using bodyParser.json().
Try adding app.use(bodyParser.json());

How to upload,save and display file with node and express

I am new in nodejs and i am trying to make form with node and express that can upload save and display image or file.
i have the app.post information that works.
i was trying something but it did not work.
well i think i a missing something but i dont really know what i tried many answers but nothing worked for me.
Hope someone can help me.
Thanks in advanced.
There is my code
var express = require('express');
var bodyparser = require('body-parser');
var fs = require('fs');
var Busboy = require('busboy');
var path = require('path');
var app = express();
app.use(bodyparser());
app.get('/information', function(req,res) {
var html = '<form action="/information" method="post">' +
'Enter your name:' +
'<input type="text" name="userName" placeholder="..." />' +
'<br>' +
'<button type="submit">Submit</button>' +
'</form>';
res.send(html);
});
app.post('/information', function(req, res){
var userName = req.body.userName;
var html = 'Hello: ' + userName + '.<br>' +
'Try again.';
res.send(html);
});
var frm = '<form action="/file" method="POST" enctype="multipart/form- data">' + '<br/>'+
'<input type="file" name="uploadFile" />' + '<br/>' +
'<input type="submit" />' + '</form>';
app.get('/file',function(req,res){
res.send(frm);
});
app.post('/file',function(req,res){
fs.readFile(req.body.uploadFile.path , function (err, data) {
var fileName = req.body.uploadFile.name;
if(!fileName){
console.log("There was an error")
res.redirect("/file");
res.send();
} else {
var newPath = "/uploads/" + fileName;
/// write file to uploads folder
fs.writeFile(newPath, data, function (err) {
/// let's see it
res.redirect("/uploads/" + fileName);
});
}
});
});
/// Show files
app.get('/uploads/:file', function (req, res){
file = req.params.file;
var img = fs.readFileSync("/uploads/" + file);
res.send(img, 'binary');
});app.listen(process.env.PORT || 3003);

There's a few things wrong here:
The enctype value in your form has spaces in the middle (multipart/form- data)
The busboy middleware is not being used at all, only the body-parser middleware is being used, which does not support multipart/form-data.
busboy itself does not populate req.body. If you want that kind of API, then you should probably look at multer, which is built on busboy but provides req.body.

POST Request Issue in ExpressJS

I'm working with NodeJS and I'm working on letting users upload files. Right now though I'm having a lot of problem even trying to get a simple POST request.
Over in my index.ejs file I have some code that creates a form and then sends a post request:
<div id="uploaddiv">Upload things here<br>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="text" name="title"><br>
<input type="file" name="upload" multiple="multiple"><br>
<input type="submit" value="Upload">
</form>
</div>
Then in server.js, I have code that handles the uploading.
var server = express.createServer();
//bunch of stuff left out
server.get('/upload', function(req, res) {
console.log("uploading!");
if (req.method.toLowerCase() == 'post') {
res.write('lol');
}
});
My problem is that navigating directly to localhost/upload will console.log properly, but clicking on the button gives me the error "Cannot POST /upload".
Thanks!

server.get means handle an HTTP GET. You want server.post. FYI the "Cannot XXX /uri" error is what express responds with when no active route matches the request and no 404 error handler has been configured.

By using server.get(), you're instructing that route to only respond to GET requests, but the form is obviously a POST.
You should use server.post().
You can also use server.any() if you want to it respond to both GET and POST (and every other HTTP verb as well).

You should probably use Felix Geisendörfer's node-formidable to upload files.
var express = require('express'),
app = express.createServer(),
util = require('util'),
formidable = require('formidable');
app.get('/upload', function (req, res){
res.writeHead(200, {'content-type': 'text/html'});
res.end(
'<form action="/upload" enctype="multipart/form-data" method="post">'+
'<input type="text" name="title"><br>'+
'<input type="file" name="upload" multiple="multiple"><br>'+
'<input type="submit" value="Upload">'+
'</form>');
});
app.post('/upload', function (req, res) {
var form = new formidable.IncomingForm();
form.uploadDir = '.';
form.keepExtensions = true;
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
return;
});
app.listen(3000, '127.0.0.1');
It is just a simple as this to do file uploading thanks to node-formidable.