Issue on upload image in nodejs

Question

Req.file and req.files comes out to be undefined.

I have tried using the methods people have found useful but none worked for me.

var upload = multer({dest: './public/files/lost/'});

//INDEX - show all items
router.get("/", function(req, res){
   res.render("items/report");               
});

//CREATE - add new lost to DB
router.post("/", upload.single("image"), function(req, res){
    // get data from form and add to items array
    console.log(req.file);
    console.log(req.files);
    // Other req.body usage here
})

Form

<div class="container">
    <div class="row">
        <h1 style="text-align: center">Report for the Lost Item</h1>
        <div style="width: 30%; margin: 25px auto;">
            <form action="/report" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="type" placeholder="request type">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="date" placeholder="date">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="time" placeholder="time">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="location" placeholder="location">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="phone" placeholder="phone">
                </div>
                <div class="form-group">
                    <input class="form-control" type="file" name="image" placeholder="image url">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="description" placeholder="description">
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block">Submit!</button>
                </div>
            </form>
            <a href="/report">Go Back</a>
        </div>
    </div>
</div>
<% include ../partials/footerstudent %>

I expect req.file to contain the filename and other attributes of the file uploaded.

Answer 1

I observed you are submitting the form to report endpoint. it should be consume in this way

router.post("/report", upload.single("image"), function(req, res){
    // get data from form and add to items array
    console.log(req.file);
    console.log(req.files);
    // Other req.body usage here
}) 

But to reassemble the uploaded file in your application, you'll need to parse the request body (as multipart form data).

In Express 3.x you could use express.bodyParser middleware to handle multipart forms but as of Express 4.x , there's no body parser bundled with the framework. There are many packages available Assuming that you are using mutler and Express 4.0

First make sure that API is consuming right by sending other params