Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
barbiedo opened this issue Sep 6, 2023 · 2 comments
Open

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

barbiedo opened this issue Sep 6, 2023 · 2 comments

Comments

@barbiedo
Copy link

barbiedo commented Sep 6, 2023

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
Copy link

wmayo commented Dec 9, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants