I'm a student and I have a project to create a simple website. I'm trying to make a website, where the user can create some kind of listing and upload a picture to it (kind of like ebay), as well as the ability to create user profile, and upload a picture to it. But I've been struggling for the past day and a half on how to upload the picture. I'm a beginner in JS and I've been reading lots of articles and documentation but I can't really wrap my head around it. So I hope someone can point me in the right direction.
In an MVC structure:
config/
controllers/
models/
public/
views/listing/
app.js
package.json
app.js:
const express = require('express');
const config = require('./config/config');
const app = express();
let env = 'development';
require('./config/database')(config[env]);
require('./config/express')(app, config[env]);
require('./config/passport')();
require('./config/routes')(app);
module.exports = app;
views/listing/create.hbs
-- Creates a new listing (title, content, upload picture)
<!-- ...-->
<div>Upload your item's picture:<div>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="image">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- ...-->
config/routes.js
const listingController = require('./../controllers/listing');
module.exports = (app) => {
app.get('/listing/create', listingController.createGet);
app.post('/listing/create', listingController.createPost);
// ...
}
controllers/listing.js
module.exports = {
// ...
createPost: (req, res) => {
let args = req.body;
//listing creation logic...
//.. some checks and database action
if(err){
//redirect to home with error message
} else {
// I tried to add the uploading logic here
res.redirect('/');
}
}
}
// ...
And this is what I came up with after watching tutorials and searching, I tried placing it in numerous locations and playing with it as best as I could as well as changing the path, but nothing worked.
var express = require('express');
var router = express.Router();
var multer = require('multer');
var upload = multer({
dest: __dirname + "/public/uploads/"
});
// I don't really know if this executes completely
router.post('listing/create', upload.single('image'), function(req, res, next){
// These two don't get executed
res.send(req.file);
console.log(req.file);
})
I also tried to create another js file and place this there, then reference it, also tried to place it in app.js and in routes.js, none of which were successful.
I must also say that I'm new to HTML as well. I tried playing with the action="" attribute, and match it to different routes, but nothing worked. I'm missing some serious knowledge here and I'd be really grateful if someone can give me a hand on this one! :)
via J. o'D.
No comments:
Post a Comment