How can I get the form name with a POST request using the multiparty package?

Question

This is what I have so far. here is the form (updated in accordance with cybersam's answer)

<form method="POST" action="/view" enctype="multipart/form-data">
  <input type="image" src="/images/094_max.jpg" name="bigImage" width="300"/>
  <input type="hidden" name="file_name" value="{ source: 'test_image.jpg',
_id: 53471acd4fe44ddf04a3f752,
__v: 0,
score: 0 }"/>
</form>

This is the "/view" route

app.post('/view', vote_and_view); 

Here is the vote_and view function referenced in the route

function vote_and_view(req,res){
  var form = new multiparty.Form();
  form.parse(req, function(err,fields){
    if(err) console.error(err)    
    console.log(fields["file_name"][0])});
  res.render('viewImage');
}

I am trying to use this: https://github.com/andrewrk/node-multiparty . Right now it returns an object like

{ source: '094_max.jpg',
  _id: 53470d4b9a2a82755d911f28,
  __v: 0,
  score: 0 }

When I try and call object.source or object['source'], it returns undefined. Yet the object itself gets returned? Why is this happening and how can I get this source?

PS when I see that _id: 53470d4b9a2a82755d911f28 it makes me think that its having a problem with that integer because of the f at the end. Except I am not sure how to turn it into a string as it is generated by my template from mongodb.

Answer 1

The README.md for the multiparty package states, right at the beginning:

Parse http requests with content-type multipart/form-data , also known as file uploads.

So, you either need to use a different package that supports application/x-www-form-urlencoded content, or you need to send multipart/form-data content.

Here is an example of how to do the latter, from the HTML spec:

  <FORM action="http://server.com/cgi/handle"
       enctype="multipart/form-data"
       method="post">
   <P>
   What is your name? <INPUT type="text" name="submit-name"><BR>
   What files are you sending? <INPUT type="file" name="files"><BR>
   <INPUT type="submit" value="Send"> <INPUT type="reset">
 </FORM>

Answer 2

ok so what I had to do was change my template so that the form output was like this:

<form method="POST" action="/view" enctype="multipart/form-data">
  <input type="image" src="/images/094_max.jpg" name="bigImage" width="300"/>
  <input type="hidden" name="file_name" value="test_image.jpg"/>
</form>

you can see that the value on the hidden field has been simplified so that it is just the file name. This means that the fields object returned is simplified to

{ 'bigImage.x': [ '0' ],
  'bigImage.y': [ '71' ],
  file_name: [ 'test_image.jpg' ] }

thus taking fields['file_name'][0] returns 'test_image.jpg' which is what I wanted to happen.

The problem was that I guess mongodb returns objects from the database in a weird BSON form. This means that you cannot use JSON.parse to change it from a string format into an object format, because it looks like {source:"test_image.jpg"} instead of {"source":"test_image.jpg"}. So I changed the format so that I basically didn't have to deal with that aspect at all. Sorry if this is poorly explained. Let me know in the comments if I need to clarify and I will be happy to.