Upload file with iron-ajax (Google Polymer)

Question

I need support how to upload a new image file using Polymer and Java Spring... I created an html form with 2 fields: one file input and a simply text field. I would like put these values on my ajax call using the web-components iron-ajax in Google Polymer... Actually, I createad a snippet code but I cannot send my file...it seems as null value and I can't understand what I am doing wrong...

This is my html form:

<form method="post" enctype="multipart/form-data" modelAttribute="userInfo">
   <paper-input type="file" id="txtFilePath" label="File path"></paper-input>
   <paper-input id="firstname" name="firstname" label="Nome"></paper-input>
   <paper-button id="btnSaveInfoProfile" on-tap="saveInfoProfile">Save</paper-button>
</form>

<iron-ajax id="ajaxSaveInfoProfile" method="POST" url="/updateInfoProfile" handle-as="json" on-response="responseUpdateInfoProfile" debounce-duration="0"></iron-ajax>

This is my Polymer script:

...
saveInfoProfile: function()
{
    this.$.ajaxSaveInfoProfile.params = 
    {
       "imageProfile": this.$.imageProfile,
       "firstName": this.$.firstname
    };

    this.$.ajaxSaveInfoProfile.generateRequest();
}
...

And finally, this is my Spring controller:

@RequestMapping(value="/updateInfoProfile", method = RequestMethod.POST)
public @ResponseBody ReturnCode updateInfoProfile(@ModelAttribute("userInfo") UserInfoForm form, BindingResult result, HttpServletRequest request)
{
    //...
}

the "imageProfile" value in the html page seems undefined when I select my file and invoke the javascript method...

How can I solve? What i am doing wrong?

Thanks!

Answer 1

In the server side i'm using php but i hope i could help you with the client side of this issue. iron-ajax doesn't support enctype="multipart/form-data" yet, but you can handle it with javascript's FormData(); . You can create a function which convert the files to formdata and then append it to the body of iron-ajax .

Polymer({
......
convertFileInputToFormData: function(){
  regexp = /^[^[\]]+/;
  var fileInput = $('input[type="file"]');
  var fileInputName = regexp.exec( fileInput.attr('name') );
  // make files available
  var data = new FormData();
  jQuery.each($(fileInput)[0].files, function(i, file) {
      data.append(fileInputName+'['+i+']', file);
  });
  return data;
},
.......

and then you can call it from your pre-submit function like this

formPreSubmit: function(event){
  var form = document.getElementById('Form');
    // here you convert to formData calling our function
    var data = this.convertFileInputToFormData();

    form.request.method = "post";
   // set undefined to prevent default json content type
    form.request.contentType = undefined;
   // here you append your formData to the iron-ajax body
    form.request.body = data;
  form.request.url = "http://your.api/url"

  form.request.debounceDuration = 300;
},

The form.request.contentType = undefined; prevent to iron-ajax set content type as json by default.

I know your arent using php but for get the complete idea, on the php file you must get the data like that

if (isset($_FILES['file']['name'][0])) {

$file = $_FILES['file']['name'][0];
    $type = $_FILES['file']['type'][0];
// here yor upload methods

}

the $_FILES['file']['name'][0] its because they can handle an array of image.

I hope this will help you and sorry my terrible english