Tuesday, 11 April 2017

How do I upload a picture to a local folder using multer?

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