Estoy desarrollando una web page en la cual en uno de sus apartados el ususario debe de registrar un producto (DATOS) y subir una imagen (opcional) referente a este. Al hacer click en el boton de "Guardar" deberia de subir la imagen al servidor, registrar los datos en la Base de Datos MYSQL (Incluyendo el nombre de la imagen) Estoy utilizando node.js, express, mySQL, express-fileupload, materialize, etc.
Ahora bien el problema se presenta al querer hacer estas dos funciones al mismo tiempo, es decir, registrar datos y subir una imagen al servidor. Ya las hago, pero son por separado, y no he podido hacerlas al mismo tiempo.
Como podria realizar esto? Les dejo fragementos del programa:
Codigo de "Routes" (tienda.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);
Codigo "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 (productos.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>
Estructura de la tabla donde guardo datos (Recortada)
> id_productoPrimaria int(11)
> nombre_producto varchar(25)
> descripcion_producto text
> imagen varchar(25)
Muchas gracias de antemano! :D
PD: Recorte algunas partes del HTML aqui, para que sea mas facil de leer (Por si me falto cerrar un div)