I am developing a web page in which in one of its sections the user must register a product (DATA) and upload an image (optional) concerning it. When you click on the "Save" button you should upload the image to the server, register the data in the MYSQL Database (Including the name of the image) I'm using node.js, express, mySQL, express-fileupload, materialize, etc.
Now the problem arises when you want to do these two functions at the same time, that is, record data and upload an image to the server. I already do them, but they are separate, and I have not been able to do them at the same time.
How could I do this? I leave you fragementos of the program:
"Routes" code (store.js)
const express = require('express');
const router = express.Router();
//Guarda un producto
router.post('/add',tiendaController.save);
//Subir una archivo
router.post('/upload',tiendaController.uploadFile);
Code "controller" (tiendaController.js)
controller.save = (req, res) => {
const data = req.body;
req.getConnection((err, conn) => {
conn.query('INSERT INTO productos set ?', [data], (err,rows) => {
if(err)
{
//res.json(err);
console.log(err);
console.log('ERROR al enviar los datos');
}
else
{
res.redirect('/');
}
});
})
}
//Subir un archivo
controller.uploadFile = (req,res) => {
let EDFile = req.files.file;
//console.log(EDFile.name);
EDFile.mv('./files/${EDFile.name}',err => {
if(err) {
return res.status(500).send({ message : err })
}else
res.redirect('/');
});
}
HTML (products.ejs)
<!-- Inico del Formulario DATOS -->
<form action="/add" method="post" class="col s12">
<div class="row">
<input name="id_producto" hidden > </input> <!--Aqui es donde se colocora el ID interno de la BD, para despues manejarlo desde el backend. No hace falta poner ningun valor por que es autoincrement (al momento de enviarlo)-->
</div>
<div class="row">
<div class="input-field col s5 m5 l5">
<input required id="ID-sku" name="id_sku" type="number" data-length="11" />
<label for="sku">SKU</label>
</div>
<div class="input-field col s7 m7 l7">
<input required id="ID-name" name="nombre_producto" type="text" length="25" />
<label for="name">Nombre</label>
</div>
</div>
<div class="row ">
<div class="input-field col s12">
<textarea id="ID-description" required name="descripcion_producto" class="materialize-textarea"></textarea>
<label for="description">Descripcion</label>
</div>
<div class="input-field col s12">
<textarea id="ID-notes" name="notas" class="materialize-textarea" length="30"></textarea>
<label for="notes">Notas opcionales del producto</label>
</div>
</div>
<div class="row">
<div class="input-field col l2 offset-l5 ">
<button id="ID-btn_enviar" class="btn cyan waves-effect waves-light right" type="submit">Guardar
<i class="mdi-content-send right"></i>
</button>
</div>
</div>
</form> <!-- ///// Fin del Form ///// -->
</div><!--/Row-->
<!-- Inico del Formulario IMAGEN-->
<div class="row">
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>Imagen</span>
<input type="file" name="file" accept="image/png, image/jpeg">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Sube una imagen">
</div>
</div>
<input class="btn orange waves-effect waves-light right" type="submit" id="ID_btn_enviaImagen" value="Subir">
</form>
</div>
Structure of the table where I save data (Cropped)
> id_productoPrimaria int(11)
> nombre_producto varchar(25)
> descripcion_producto text
> imagen varchar(25)
Thank you very much in advance! : D
PD: Cut out some parts of the HTML here, so that it is easier to read (In case I need to close a div)