Upload file using FormData and jQuery.ajax

Question

I tried to follow some examples from stackoverflow and a few blogs. But I can't get a file uploaded.

I have a form like this:

<form enctype="multipart/form-data">
  <input type="hidden" id="viewport" name="viewport" value="1">

  <input type="hidden" id="idinfo" name="idinfo" value="-1">

  <input type="file" id="filename" name="filename" value="">

  <select id="cbTipe" name="cbTipe" onchange="ChangeType()">
    <option value="1">Text</option>
    <option value="2">Text &amp; Foto</option>
    <option value="8">Video</option>
  </select>

  <button type="button" name="btnClear" onclick="ClearForm();">Bersihkan Form</button>
  <button type="button" name="btnSimpan" onclick="SubmitForm();">Simpan</button>

</form>

And JavaScript code like this:

function SubmitForm()
{
  data = $("form input").serialize();

  aFormData = new FormData($("form *"));

  aFormData.append("filename", data[2]);

  $("form input").each(
    function(i)
    {
      aFormData.append($(this).attr("name"), $(this).attr("value"));
    }
  );

  $("form select").each(
    function(i)
    {
      aFormData.append($(this).attr("name"), $(this).attr("value"));
    }
  );

  $.ajax(
    {
      url         : the_url + "/form_action",
      type        : "POST",
      contentType : false,
      processData : false,
      data        : aFormData,
      dataType    : "json",
      success     : 
        function(data)
        {
          if(data['status'] == 'ok')
          {
            RefreshList(data['html'])
          }
          else
          {
            alert("Error on FormAction")
          }

          ClearForm();
       }
    }
  );
}

And a Grails code like this:

def test = request.getFile('filename').getName()

The problem is, I always fail to get

request.getFile('filename').getName()

request.getFile('filename') returns null.

What am I missing here?

Arun P Johny · Accepted Answer · 2013-07-12 12:58:37Z

4

Read Using FormData Objects

FormData takes the dom reference as the argument, not jQuery wrapper.

So try

aFormData = new FormData($("form").get(0));

also

aFormData.append($(this).attr("name"), $(this).val());

to get the value of an input you need to use .val() not .attr('value')

Also to append the file you need to add the file reference like

aFormData.append("filename", $('#filename').get(0).files[0]);

So your code might have to look like

function SubmitForm() {
    var aFormData = new FormData();

    aFormData.append("filename", $('#filename').get(0).files[0]);

    $("form input").each(function(i) {
        aFormData.append($(this).attr("name"), $(this).val());
    });

    $("form select").each(function(i) {
        aFormData.append($(this).attr("name"), $(this).val());
    });

    ......
}

edited Jul 12, 2013 at 12:58

answered Jul 12, 2013 at 12:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

fasisi Over a year ago

Arun, I can upload the file if the webapp is deployed on windows. But it failed when the webapp deployed on ubuntu. Should it be treated differently?

Arun P Johny Over a year ago

not really... but I don't have any experience in grails... so can't comment on that... as far as client code is considered it, the server really should not matter

fasisi Over a year ago

I kept a log for both deployments. On windows deployment, the 'request' is a 'org.springframework.web.multipart.commons.CommonsMultipartFile' object. While on ubuntu deployment, the 'request' is a 'org.springframework.web.multipart.support.DefaultMultipartHttpServletRequest' object. What does it mean?

Arun P Johny Over a year ago

do you have commons fileupload library in the classpath

Arun P Johny Over a year ago

probably if you can ask a different question, with spring and grails tags then somebody who have better experience in that could help you better

|

Collectives™ on Stack Overflow

Upload file using FormData and jQuery.ajax

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related