Node.js parsing form data using formidable

Question

Hey guys I am new to node, and trying to setup a file/image upload script.

I was able to setup node on my VPS and following this example I also set up the app and it is working great. https://coligo.io/building-ajax-file-uploader-with-node/ It is using formidable and express

However I'd love to also parse a form where people can add their name and the files get uploaded into a folder containing their names. I was able to get the folder creation working using mkdirp, however even after many hours of research (formidable api, express api, and more) I can't get the form to parse the name. I suspect that the upload.js (which sends the data to the node app) does not work.

At the moment a new folder with a random string is created for each upload, but I'd love to be able to parse the entered formname.

Any idea how to get it working? I'd appreciate any help/hints.

app.js

var express = require('express');
var app = express();
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');
var mkdirp = require('mkdirp');
var crypto = require("crypto");


app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){
   res.sendFile(path.join(__dirname, 'views/index.html'));
});


app.post('/upload', function(req, res){

var ordner = crypto.randomBytes(20).toString('hex');

mkdirp('/home/myfolder/fileupload/'+ordner, function (err) {
if (err) console.error(err)
else console.log(ordner)
});



  var form = new formidable.IncomingForm();


  form.multiples = true;

  form.uploadDir = path.join(__dirname, '/'+ ordner);

  form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name + Date.now()+'.jpg'));
  });

 form.on('field', function(field, userName) {
 console.log(userName);
});





  form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
  });


  form.on('end', function() {

    res.end('success');
  });

  form.parse(req);

});

 var server = app.listen(3000, function(){
 console.log('Server listening on port 3000');
});

Thanks

The upload.js is unchanged and I simply added another input to the view.

Answer 1

You can do this by sending the parameters through the POST like so

app.post('/upload/:userName', function(req, res){
  var username = req.params.userName

  mkdirp('/home/myfolder/fileupload/'+username, function (err) {
    if (err) console.error(err)
    else console.log(ordner)
  });

The rest of your code pretty much stays the same.

EDIT: Your ajax would look something like this

var username = 'GetThisValueFromTheUser'
$.ajax({
 url: '/upload'+username,
 type: 'POST',
 data: formData,
 processData: false,
 contentType: false,
 success: function(data){
   console.log('upload successful!');
 }
});

Note: You can send parameters by using /:parameter in your POST or GET requests, from then on it is easy to use those parameters however you want.