MySQL store "Undefined" string in nodejs multipart/form-data? - mysql

Question

js application with mysql server in my app I want to store the filename of the image at the same time the image file will store to my project folder. I am using this multer framework to upload my file yes I have successfully stored the image file in my project folder /uploads. But sadly MySQL wont allow me to send the data it will only store "undefined" string. How can we possibly fix this?
<form class="add-music-form" action="/save" method="POST" enctype="multipart/form-data">
<div class="form-group">
<div class="song-feaured-image">
<input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" onchange="loadFile(event)" required>
<img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
<label for="file" class="attach_file" style="cursor: pointer">
<i class="material-icons">attach_file</i></label>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="audio" required>
<label class="custom-file-label" for="customFile">Select audio file</label>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
<a onclick="cancel()" class="btn btn-default">Cancel</a>
</div>
</form>
app.js
const path = require('path');
const express = require('express');
const multer = require('multer');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const DIR = './assets/uploads/featured-img';
// Set Database Connection
const connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'',
database:'nodejs_crud'
});
connection.connect(function(error){
if(!!error) console.log(error);
else console.log('Database Connected!')
});
let storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, DIR);
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
let upload = multer({storage: storage});
//set view file
app.use(express.static('assets'));
//set view engine
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extend: false}));
app.get('/',(req, res) => {
let sql = "SELECT * FROM music"
let query = connection.query(sql, (err, rows) => {
if(err) throw err;
res.render('music_index');
});
});
app.post('/save',upload.single('featured_img'), function (req, res) {
let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.body.featured_img + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
let query = connection.query(sql, (err, results) => {
if(err) throw err;
res.redirect('/');
});
});
// Server Listening
const port = 3000;
app.listen(port, () => console.log(`Server started on port ${port}`));

Answer 1

Here's an example of a single file being uploaded. To upload multiple files in the same form you'll need to use upload.array instead of upload.single:
/views/music_index.ejs:
<form class="add-music-form" action="/save" method="POST" enctype="multipart/form-data">
<div class="form-group">
<div class="song-feaured-image">
<input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" required>
<img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
<label for="file" class="attach_file" style="cursor: pointer">
<i class="material-icons">attach_file</i></label>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
<a onclick="cancel()" class="btn btn-default">Cancel</a>
</div>
</form>
app.js:
const path = require('path');
const express = require('express');
const multer = require('multer');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
// Ensure this folder exists
const DIR = './assets/uploads/featured-img';
let storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, DIR);
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
let upload = multer({storage: storage});
app.use(express.static('assets'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extend: false}));
app.get('/',(req, res) => {
res.render('music_index');
});
app.post('/save',upload.single('featured_img'), function (req, res) {
let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.file.path + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
console.log(sql);
});
const port = 3000;
app.listen(port, () => console.log(`Server started on port ${port}`));