Express & NodeJS : Accessing response parameters from Multipart form POST

Question

I have a simple form that allows the user to upload a file type image, and append the "category" type of the file to the response body, via a radio input selection.

The file processing itself is handled as expected on the backend - however, when it comes to accessing parameters in the response body, I am receiving UNDEFINED as the parameter value. Can anyone lend some pointers on what I may have overlooked ?

here is a sample of the mark-up and back end script:

    <!DOCTYPE html>
<html>

    <head>
        <script src="js/blueimp-gallery.min.js" async></script>
        <script src="js/bootstrap.min.js" async></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
        <script src="js/script.js" async></script>
        <link rel="stylesheet" href="css/blueimp-gallery.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

    <body>


        <div id="main">
            <div class="navbar-wrapper" style="border: 12px solid black;">
                <ul>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Sign up</a></li>
                </ul>
            </div>

            <div>
                <form 
                        id              =  "uploadForm"
                        enctype         =  "multipart/form-data"
                        action          =  "/api/photo"
                        method          =  "post">

                    <input type="file" name="userPhoto" />
                    <input type="submit" value="Upload Image" name="submit">

                    <label>travel</label>
                    <input type="radio" value="travel"      name="cat">
                    <label>food</label>
                    <input type="radio" value="food"        name="cat">
                    <label>community</label>
                    <input type="radio" value="community"   name="cat">
                </form>
            </div>

    </body>
</html>







app.post('/api/photo', function(req,res){

    console.log("request to upload image recvied.. upload in progress.");
    //console.log("res.catype() = TODO " + req.get("cat"));


    // Returning undefined*
    console.log("res.catype() = " + res.cat);

    // handle file persistence to disk.
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

score 0 · Answer 1 · answered Dec 09 '16 at 14:57

0

You should access your cat value from req.body.cat, refer http://expressjs.com/en/4x/api.html#req.body for more detail

answered Dec 09 '16 at 14:57

alpha

1,103
7
10

Hi alpha, trying this approach leaves me with a TypeError for 'cat' as undefined. I should have mentioned I have tried this before. – Catresl Dec 09 '16 at 15:25

score 0 · Answer 2 · answered Dec 09 '16 at 20:08

Not sure if you post your entire server-side code, but I don't any reference to the body-parser middleware. You should use it to process any incoming "post". And you should always declare them before your routes. This way, you can access the data with req.body.

const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/api/photo', function(req,res){

    console.log("request to upload image recvied.. upload in progress.");
    //console.log("res.catype() = TODO " + req.get("cat"));


    // Returning undefined*
    console.log("res.catype() = " + res.cat);

    // handle file persistence to disk.
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

score 0 · Accepted Answer · answered Mar 20 '17 at 05:08

For multi part forms (forms with an attached file like an image), you need to use Multer (or some other multiform parser) on your NodeJS server instead of body-parser. The link will give you an example of how to set this up. Assuming your Client side HTML/JS is setup properly, you will be able to extract the image as a file and the request as body info.

The serverside NodeJS would look something like this:

app.post('/api/photo', upload.any(), function (req, res, next) {
    var files = req.files;
    if (files) {//Checks to see if any attached files
        files.forEach(function (file) {
            console.log('FILE');
            console.log(JSON.stringify(file));//contents of file
            console.log(JSON.stringify(file.filename));
        });
    }
    console.log(req.body);
    res.sendFile(__dirname + "/resources/JSONStructures/genericResponse.json");
});

If you could post your Client Side JavaScript it would help a little in determining what's causing the issue. Specifically I see a lot of AJAX being setup the short and easy way which will cause issues with multi forms.

Express & NodeJS : Accessing response parameters from Multipart form POST

3 Answers3