POSTing to the API Endpoint

Hi, following the main ideas of this tutorial I am trying to make my own code, but in my case using a file input type, which gives problem using .serialize and .serializeArray functions. What would be the alternative?

Hey Juan,

I'm not sure about your problem, have you tried to watch our Symfony Uploads course: https://symfonycasts.com/sc... ? I think it might be helpful. Otherwise, if you have some input fields in your form along with the file upload field - probably I'd recommend to split them into 2 different forms: one will hold all the input fields and another one will hold the file upload field. But this way you will need to write an integration code for them so it works as a single form, e.g. upload the file and then return its unique identifier that you will put in the hidden field of the 2nd form.

I hope this helps!

Cheers!

Hello Victor thanks for the idea I may try it. What I see is that. What happened is that JSON.stringify() would not work with a file input. Thanks. I leave this for the record https://stackoverflow.com/q...

Hey Juan,

Ah, I see, it's good to know, thanks for sharing that!

Cheers!

Anyone?

Hi, I have a problem when trying to prepare the form data to serializeArray. My form contains fields that are type select multiple:

$builder->add('vatTypes', EntityType::class, array( 'class' => VatType::class,
'multiple' => true,

...

'attr' => ['class' => 'form-control select2']));

So when I get to:

$.each($form.serializeArray(), function(key, fieldData) {
...

I get "fieldName[]"=3 where 3 is the last selected value, but it is missing all the other options. How can this be done? So the Json can parse the multiple select?

Also, when the form is sent it complains about "The form should not contain extra fields" which I think it is maybe related to this problem, not sure though...

Any guidance will be really appreciated.

Thanks!

Hey Gst I.

Sorry for the late reply. I found a way to get all selected items via JQuery: https://stackoverflow.com/a...
and there is even a pure JS example if you scroll down a little bit.
Here is an example of how to serialize the select data and send it via AJAX: https://stackoverflow.com/a...

About "The form should not contain extra fields" problem, I believe somehow your form contains extra fields when you serialize it, try dumping it and check which fields you are actually passing in.

Cheers!

Thank you Diego, but the problem is that the ajax endpoint is expecting a json encoded string, not serialized data. I think I found a solution, I will write it here in case someone else needs it:

`
handleNewFormSubmit: function(e) {

            e.preventDefault();

            var $form = $(e.currentTarget);
            var formData = {};

            $.each($form.serializeArray(), function(key, fieldData) {
                    if (fieldData.name.indexOf("[]") > 0) {
                            formData[fieldData.name.replace('[]', '')] = $form.find('select[name="'+fieldData.name+'"]').val();
                    } else {
                            formData[fieldData.name] = encodeURIComponent(fieldData.value);
                    }
            });

            var self = this;
            this._saveIssuingEntity(formData)
            .then(function(data) {
                    self._clearForm();
                    self._addRow(data);
            }).catch(function(errorData) {
                    self._mapErrorsToForm(errorData.errors);
            });
    }

`

For sure it could be more efficient, but this just works. Thanks!