Upload file to postgresql database using react App

Question

Please help. All the data is added to the database except the file and there is no error:

<inputtype="file" className="form-control" id="inputfile"
     aria-describedby="inputGroupFileAddon04"
     aria-label="Upload"//value={bonScanner}onChange={(e) => setBonScanner(e.target.files[0])}required/>

This is the function to insert the data

ProcessService.ajouterBon(
    fk_fournisseur,
    acheteur,
    bonScanner,
    type_bon,
    recepteur,
    livreur
  ).then((res) => {
    console.log(res.data);
    setId_bon(res.data[0].id_bon);
  });

I send data to the server

const PRODUIT_API_BON = "http://localhost:8080/process/ajouterBon"; class ProcessService { ajouterBon(fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur){

const bon = { fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur }
    
return axios.post(PRODUIT_API_BON, bon)

Controller side

ajouterBon = (req, res) => {var datee = new Date();var heure = HeureNow();
var {scanne_bon} = req.files

var data = upload.dataconsole.log(data);

// Deconstruct x to get response values res.send("OK")

const { fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur } = req.body;pool.query(queries.ajouterReception,[fk_fournisseur, acheteur,scanne_bon, type_bon, datee, heure, recepteur, livreur],(error, result) => {if (error) throw error;res.status(200).json(result.rows);}, [data]);};

// On the query side

const ajouterReception ="INSERT INTO bon ( fk_fournisseur, acheteur,scanne_bon, type_bon, datee, heure, recepteur, livreur )VALUES ($1, $2, $3, $4, $5, $6, $7 , $8) RETURNING id_bon , recepteur , fk_fournisseur";

Answer 1

var path = require('path');
const { Router } = require("express");
const router = Router();
const bodyParser = require('body-parser');
router.use(bodyParser.json({ limit: '50mb' }));
router.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));


const multer = require('multer');
const storeDataInLocals = (req, res, next) => {
  // Store the necessary data in res.locals
  res.locals.dataFromFirstRoute = req.body;
  next();
};



router.post("/ajouterBon" , process.ajouterBon);

// Set up the storage location for uploaded files
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // Replace '/path/to/your/storage/' with the desired path on your server
    cb(null, 'uploads/');
  },
 filename: function (req, file, cb) {
    const originalname = file.originalname;
    const extension = originalname.split('.').pop(); // Get the file extension
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    const modifiedFilename = originalname.replace(/\.[^/.]+$/, "") + '-' + uniqueSuffix + '.' + extension;
    cb(null, modifiedFilename);
  },
});
const upload = multer({ storage: storage });
// Shared variable to store the filePath data temporarily


router.post("/upload", storeDataInLocals, upload.single('bonScanner'), (req, res) => {
  console.log('File received:', req.file);

  // Get the path of the uploaded file on the server
  const filePath = req.file.path;
  console.log('File path on the server:', filePath);

  // Store the filePath in the shared variable
     global.filePath = filePath;

  // Add your file-saving logic here, if needed
  // For example, you can save the file content to a database or perform additional processing.

 
  res.json({ success: true, message: 'File uploaded and saved successfully.' });
});