CODEWITHSUNDEEP
javascriptjqueryajaxhtmlforms
Wesley
Wesley

Reputation: 117

HTML5 FormData sending empty objects via JQuery

I have a basic script that is as follows: 

$(".submit").click(function(){
    var fd = new FormData();
    fd.append('username', 'Bob');

    $.ajax({
     url: '/signup',
     type: 'post',
     data: fd,
     processData: false,
     contentType: false,
     success: function (data) {
         console.log("Success: ", data);
     }
  });
});

When the request hits my server, I receive a req.body of {} (empty) and there is nothing in req that points to data being sent. Whats going on here? How can I send data with FormData?

I wanted to test getting basic preset data from FormData and was unsuccessful. The values console logged in Chrome show an empty formData object, with only its constructor and the available 'append' method.

I am using jQuery v 2.1.4 and HTML5 and have confirmed that window.FormData is a valid object in Google Chrome.

My goal is to have a form that a user can enter an email, password, avatar, and a profile background image with the following form:

<form id="msform" enctype="multipart/form-data" name="msform">
  <!-- Progress Bar -->
  <ul id="progressbar">
    <li class="active">Basic Information</li>
    <li>Profile Customization</li>
  </ul>

  <!-- Step One -->
  <fieldset>
    <h2 class="title">Basic Information</h2>

    <input type="text" name="username" placeholder="Username" />
    <input type="text" name="password" placeholder="Password" />
    Avatar Image <input type='file' id='avatarImage' accept="image/*" name='avatarImage'>
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>

  <!-- Step Two -->
  <fieldset>
    <h2 class="title">Profile Customization</h2>

    <select id="dropdown" name="profileColor">
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
    </select>

    Background Photo <input type='file' id='bgPhoto' accept="image/*" name='bgPhoto'> </div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</form>

Whats going on with FormData, it seems like a valid object, but I'm unable to append anything to it. I've looked, and it appears that others have seen an empty object in their console, but the data 'automagically(?)' appears on their server? My first code block is basically a copy for the docs and I'm having trouble with it. Would and CORS issues or CDN errors be the case? Something maybe not able to access as it should? No errors print in the log, only a blank object on my post request.

Thanks for the help!

Upvotes: 2

Views: 1964

Answers (2)

Anugerah Erlaut
Anugerah Erlaut

Reputation: 1120

If you are using Express as the backend, body-parser does not handle multipart/form-data, and you are referred to using multiparty instead. You can integrate Express with multiparty like so :

var express = require('express');
var multiparty = require('multiparty');

var app = express();
var data = new multiparty.Form();

app.post('/signup', function(req, res) {
    data.parse(req, function(err, fields, files) {
        if(err) throw err;

        Object.keys(fields).forEach(function(name) {
            console.log('got field named : ' + name + ', value : ' + fields[name]);
        });

        Object.keys(files).forEach(function(name) {
            console.log('got file named : ' + name);
        });
    });
});

Do include event.preventDefault() in your click event handler

$(".submit").click(function(e){
    e.preventDefault();

    var fd = new FormData();
    fd.append('username', 'Bob');

    ...
});

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

You aren't preventing the default form submit event and neither are you catching a submit by keyboard if user hits enter.

Try:

$("#msform").submit(function(e){
    e.preventDefault();
    var fd = new FormData();
    fd.append('username', 'Bob');

    $.ajax({
     url: '/signup',
     type: 'post',
     data: fd,
     processData: false,
     contentType: false,
     success: function (data) {
         console.log("Success: ", data);
     }
  });
});

If you aren't sending files I would suggest using the simpler approach of removing the processData and contentType options and using $(this).serialize() for the data value

Upvotes: 0

Related Questions