anonym anonym - 2 years ago 98
Javascript Question

Upload file with node js and store form information in database(mysql)

I'm building a website where user needs to fill a form with information as first name, last name, profile picture, number etc... I've already code the form and I'm looking a way with node js to upload the image in a specific directory (or a default directory) and store the information that the users filled in my database. I use node js and Express with mysql.


(I used formidable package and util package).
Please notice that for the image part, I only need the path( you will see it on the ouput section).

form code:

<form method="post" action="upload" enctype="multipart/form-data">
<input type="file" accept="image/*" name="image" required /><br/>
<label for="Prenom">Prénom: </label>
<input type="text" name="user_prenom" id="Prenom" required /><br/>
<label for="Nom">Nom: </label>
<input type="text" name="user_nom" id="Nom" required /><br/>
<label for="Mail">E-Mail: </label>
<input type="email" name="user_mail" id="Mail" required/><br/>
<label for="Pays">Pays: </label>
<input type="text" name="user_pays" id="Pays" required/><br/>
<label for="Ville">Ville: </label>
<input type="text" name="user_ville" id="Ville" required/><br/>
<label for="Num">Numéro: </label>
<input type="tel" name="user_telephone" id="Num" /><br/>
<input type="submit" />

handle:'/upload', function(req, res) {
processFormFieldsIndividual(req, res);

function processFormFieldsIndividual(req, res) {
//Store the data from the fields in your data store.
//The data store could be a file or database or any other store based
//on your application.
var fields = [];
var form = new formidable.IncomingForm();
form.uploadDir = "/public/photo_utilisateurs";
//Call back when each field in the form is parsed.
form.on('field', function (field, value) {
fields[field] = value;
//Call back when each file in the form is parsed.
form.on('file', function (name, file) {
fields[name] = file;
//Storing the files meta in fields array.
//Depending on the application you can process it accordingly.

//Call back for file upload progress.
form.on('progress', function (bytesReceived, bytesExpected) {
var progress = {
type: 'progress',
bytesReceived: bytesReceived,
bytesExpected: bytesExpected
//Logging the progress on console.
//Depending on your application you can either send the progress to client
//for some visual feedback or perform some other operation.

//Call back at the end of the form.
form.on('end', function () {

res.writeHead(200, {
'content-type': 'text/plain'
res.write('received the data:\n\n');
fields: fields
// var user = JSON.parse(fields);
// connection.query('INSERT INTO Utilisateurs (user_nom, user_prenom, user_mail, user_phone, user_pays, user_ville) VALUES ("' + user.user_nom + '", "' + user.user_prenom + '", "' + user.user_mail + '", "' + user.user_pays + '", "' + user.user_ville + '", "' + user.user_telephone + '")',
// function selectCb(err, results, fields) {
// if (err) throw err;
// else res.send('success');
// });

The Output

received the data:

{ fields:
[ user_prenom: 'dfw',
user_nom: 'efwe',
user_mail: 'efew@fref',
user_pays: 'efwe',
user_ville: 'efwe',
user_telephone: '4380564324',
image: File {
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
size: 518,
path: '/tmp/upload_e611ea0745206682b26c208d816dc604',
name: '1462507431_play_now_sign_youtube_video.svg',
type: 'image/svg+xml',
hash: null,
lastModifiedDate: Mon May 09 2016 00:16:24 GMT-0400 (EDT),
_writeStream: [Object] }

Answer Source

You can simply declare the Global variable and assign the form fileds to it. And use it where you want.

var data = util.inspec({
    data: fields
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download