New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding support to serialize() for file inputs with FormData #114

Closed
jerodsanto opened this Issue Mar 27, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@jerodsanto
Copy link
Contributor

jerodsanto commented Mar 27, 2018

We want to submit some forms via ajax that have file inputs. I see in the implementation of serialize you purposefully skip file inputs.

If we use FormData, I believe we can pretty simply loop over them and append them in a similar fashion to this gist.

Is this a feature you'd likely merge if I develop it? Please let me know, thanks!

@jerodsanto

This comment has been minimized.

Copy link
Contributor

jerodsanto commented Mar 29, 2018

Here's an example implementation using FormData that works across all forms on changelog.com:

u.prototype.toFormData = function() {
  let data = new FormData();

  Array.from(this.first().elements).forEach((el) => {
    if (!el.name || el.disabled) return;
    if (/(checkbox|radio)/.test(el.type) && !el.checked) return;

    if (el.type === "file")
      Array.from(el.files).forEach((f) => { data.append(el.name, f); });
    else if (el.type === "select-multiple")
      u(el.options).each((o) => { if (o.selected) data.append(el.name, o.value); });
    else
      data.append(el.name, el.value);
  });

  return data;
};

Notes:

  1. This works just fine as an argument Umbrella's ajax function.
  2. I started with overriding the serialize function directly, but this version is not backwards compatible since serialize returns a string and this returns a FormData object.
  3. This is using ES6 syntax, so any iteration used by Umbrella would need to be converted to ES5 first.
@franciscop

This comment has been minimized.

Copy link
Owner

franciscop commented Mar 29, 2018

Hi @jerodsanto, that sounds great! Please feel free to open a PR with this code (converted to ES5). I think it might be only arrow functions to function(){} and looks like Array.from() would be the same to this.slice().

However, wouldn't something like this or this SO answers make things easier? I remember reading something like that before and it looks fairly simple:

u.prototype.serializeData = function () {
  return new FormData(this.first());
};

See working JSFiddle:

u.prototype.serializeData = function () {
  return new FormData(this.first());
};

u('form').handle('submit', () => {
  const data = u('form').serializeData();
  console.log(data);
  console.log(data.get('title'));
  console.log(data.get('check1'));
  console.log(data.get('check2'));
  console.log(data.get('avatar'));
});
@franciscop

This comment has been minimized.

Copy link
Owner

franciscop commented Mar 29, 2018

Now that I see it and think about it, I think it doesn't even make sense to add this to Umbrella; the native code is quite easy if you know that you can wrap the native <form> element with a new FormData():

// Adding the method:
const data = u('form').serializeData();
// Without touching UmbrellaJS:
const data = new FormData(u('form').first());

So I am closing this because it is not needed as the native API is quite good in this regard.

@franciscop franciscop closed this Mar 29, 2018

@franciscop

This comment has been minimized.

Copy link
Owner

franciscop commented Mar 29, 2018

Please let me know if you find any issue with this implementation or if I'm overlooking anything.

@franciscop franciscop changed the title Would you accept a PR that adds file support to `serialize`? Adding support to serialize files with FormData Mar 29, 2018

@franciscop franciscop changed the title Adding support to serialize files with FormData Adding support to serialize() for file inputs with FormData Mar 29, 2018

@jerodsanto

This comment has been minimized.

Copy link
Contributor

jerodsanto commented Mar 29, 2018

Oh nice, I did not realize FormData could wrap the whole form like that. Let me swap that code in and make sure it works. I'll report back if not!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment