multipart/form-data support about iron-form HOT 18 CLOSED

Now that is year 2017, two years later - Please make iron-forms support multipart/form-data. The pre-submit work around causes havoc because it overwrites existing form data when attaching images.

from iron-form.

I was struggling with the same for a long time today. Eventually, I had to give up on iron-form for submitting, instead doing a manual XMLHTTPRequest. Basically:

var form = document.getElementById('form-id');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/path', true);
xhr.send(formData);

I think the most elegant solution would be that the serialize function in iron-form would take advantage of FormData and set that as the body of the request. This will at the same time set the correct content type.

I'm open to contributing, but I'm not really sure how the process works - what tests and other requirements there are.

from iron-form.

iron-form does not support multipart form data at the moment, but I am adding a presubmit event (#26), so that you can change the parameters of the request manually, before it's being sent to the server.

from iron-form.

+1

from iron-form.

This landed in #67

from iron-form.

@notwaldorf but it should work automatically or I need to add some presubmit code?

from iron-form.

@eximius313 You need to add presubmit code. I don't think iron-ajax supports multipart/form-data out of the box

from iron-form.

so shouldn't this issue be reopened until it starts to support it (like ajax-form does: https://github.com/rnicholus/ajax-form/blob/master/ajax-form.js#L297)?

from iron-form.

@eximius313 what you are looking for is more an issue with iron-ajax.
iron-form "only" gathers all information and submits it via iron-ajax. The iron-ajax element can't handle file type parameters.
I recently started building an multi purpose upload box that works with iron-form.
By using the pre-submit hook to change the iron-ajax request body to an FormData object, files are handled correctly.

document.querySelector('form').addEventListener('iron-form-presubmit',function(e){
            var data = e.target.request.body;
            var formdata = new FormData();
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var value = data[key];
                    if(Object.prototype.toString.call( value ) === '[object Array]'){
                        for (var key2 in value) {
                            formdata.append(key + '[' + key2 + ']', value[key2]);
                        }
                    }else{
                        formdata.append(key, value);
                    }
                }
            }
            e.target.request.contentType = undefined;
            e.target.request.body = formdata;
        });

Note, that the request.contentType needs to be undefined since iron-ajax would override it otherwise. The FormData object takes care of the correct ContentType and the necessary content boundary.

Edit: What i wrote is wrong...sorry.
iron-ajax can submit multipart requests, when using a FormData Element as body as shown above. iron-form collects the submit data in an json object. So there is actually no need to change anyting in iron-ajax.

from iron-form.

@ahedderich Thank you

from iron-form.

Finally ran across this. Been trying this for about hour now. Would be nice to implement this feature in iron-ajax. The use of file uploading is rare so I guess using rolling your own will be fine as well. Thanks everyone :)

from iron-form.

Hello, 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.

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

from iron-form.

Bump, any updates on this one? The pre-submit alternative is really cumbersome because it forces one to rebuild the whole form, not just the file input.

from iron-form.

+1

from iron-form.

+1

from iron-form.

+1

from iron-form.

Why is this issue closed? This should have been a user story from day one... Terrible to have to realize this 3/4th the way through development.

from iron-form.

Hello everyone
I have written a small blog post on a working method to upload files properly
https://arcoirislabs.medium.com/uploading-files-in-polymer-3-using-iron-form-e10ecf8509ea?sk=650511425706ac72df1ed29927bc7a8b
Kindly check it out

from iron-form.