expressjs / multer

Node.js middleware for handling `multipart/form-data`.
MIT License
11.61k stars 1.06k forks source link

Error in uploading a photo in javascript using a multer. #1228

Open barbiedo opened 1 year ago

barbiedo commented 1 year ago

IMG_9989

upload photo page

const express = require('express'); const multer = require('multer'); const path = require('path');

const app = express(); const port = process.env.SERVER_PORT || 3000;

// Set up storage for uploaded files const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '../assets/uploads'); }, filename: function (req, file, cb) { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9); const fileExtension = path.extname(file.originalname); cb(null, file.fieldname + '-' + uniqueSuffix + fileExtension); } });

const upload = multer({ storage: storage });

// Serve uploaded files statically app.use('/uploads', express.static('uploads'));

// Handle file upload app.post('/upload-photo', upload.single('image'), (req, res) => { if (!req.file) { return res.status(400).json({ message: 'No file uploaded' }); }

// You can perform additional logic here, like saving the file path to a database // and returning a response. const { DB_CURRENT_TIMESTAMP, queryDb } = require('@api/utils/mysql');

module.exports = async function(req, res) { try { const { image = '' } = req.body;

if (!image) { return res.status(400).json({ message: 'Please select an Image.', }); }

const imagePath = /uploads/${image.filename}; // Update the path to match your file storage location

// Save file path to the database await queryDb( INSERT INTO gallery (date_uploaded, image) VALUES (?, ?), [DB_CURRENT_TIMESTAMP, imagePath] );

return res.status(200).json({ message: 'Image Uploaded!' }); } catch (err) { res.status(500).json({ message: Server error : ${err.message} }); } };

res.status(200).json({ message: 'Image Uploaded' }); });

app.listen(port, () => { console.log(Server is running on port ${port}); });

To connect in database const { DB_CURRENT_TIMESTAMP, queryDb } = require('@api/utils/mysql');

module.exports = async function(req, res) { try { var { // event_id = '', // photo_name = '', image = '', } = req.body; // var image = req.files && req.files.image;

  if (!image) {
      return res.status(400).json({
        message: 'Please select an Image.',
      });
  }
  // if (!event_id) {
  //     return res.status(400).json({
  //       message: 'Please provide the event Id.',
  //     });
  // }
  // if (!photo_name) {
  //     return res.status(400).json({
  //       message: 'Please provide a name for the photo.',
  //     });
  // }

  await queryDb(`
      INSERT INTO gallery (date_uploaded, image ) VALUES (?,?)`,
      [ DB_CURRENT_TIMESTAMP, image ]
  );

  return res.status(200).json ({
      message: 'Photo successfully added!'
  });

} catch(err) { // console.log(err.message); res.status(500).json({ message: Server error : ${err.message} }); } }

wmayo commented 11 months ago

what's the code on your static page from below line? app.use('/uploads', express.static('uploads'));

It could be the name of the input field is not "image".

joeyguerra commented 7 months ago

as you check the HTML, make sure the <form enctype="multipart/form-data"> is set.