528524 - add a scriptable API for generating multipart/form-data request bodies usable with XMLHttpRequest

Status: VERIFIED DUPLICATE of bug 546528

(Core :: DOM: Core & HTML, defect)

Description

[(not currently active) Ted Mielczarek]

Currently AFAIK there is no way to send a multipart/form-data request via XMLHttpRequest without manually generating the request body. This sucks because we have code to do that, but you can't use it without creating an actual <form> and submitting it. For example, I wound up using an <iframe> with a <form> to submit crash reports from about:crashes, which is kind of awful. I think we should add a scriptable API that would build the request body for you given form fields. Here's a (not-very thorough) proposal:

var f = new MozMultipartFormData();
f.addField("foo", "bar");
f.addFile("somefile", file);
var req = new XMLHttpRequest();
req.open('POST', 'myform.php', false);
req.overrideMimeType('multipart/form-data');
req.send(f);

This should send a request equivalent to submitting:
<form method="POST" action="myform.php" enctype="multipart/form-data">
<input type="text" name="foo" value="bar">
<input type="file" name="somefile">
</form>

The "addFile" method could take a DOM node representing <input type=file>, an nsIDOMFile, or an nsILocalFile.

As an additional nicety, XHR could auto-set the Content-Type to multipart/form-data if send is called with a MozMultipartFormData object.

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

Maybe XHR could also handle form elements.

var xhr = new XMLHttpRequest();
xhr.open("POST", "someform.pl");
xhr.send(document.getElementsByTagName('form')[0]);

Comment 2

[(not currently active) Ted Mielczarek]

I thought about that too, but seemed like overkill to have to create a form if you didn't want one. Although I suppose the primary use case of this would involve sending files, so if you're in content script you have to create an <input type=file> to get a file anyway.

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

(In reply to comment #0)
> req.open('POST', 'myform.php', false);
And please don't use synchronous XHR ;)

Comment 4

[Boris Zbarsky [:bzbarsky]]

We probably need a few more pieces of info here (e.g. encoding to use and such), but we should totally do this.  jst, anyone free to work on this?

Comment 5

[Alex Vincent [:WeirdAl]]

Could we do that perhaps with a .jsm file?  I've written code before to do this for XUL (serverpost).  It wouldn't be that hard to port over.

Comment 6

[(not currently active) Ted Mielczarek]

I think this should be web-accessible. We should use the same code we use for regular form POST, not some second implementation.

Comment 7

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

We talked about this at TPAC last week, and Anne a few days ago added the capability to the XHR L2 spec:

http://dev.w3.org/2006/webapi/XMLHttpRequest-2/Overview.html#the-formdata-interface

Comment 8

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

Oh, and the intent is that you get a FormData object from a <form> element. So you could do stuff like

xhr.send(myFormElement.formData);

or even

formData = myFormElement.formData;
formData.append("foo", "bar");
xhr.send(formData);

However this part hasn't been specified yet as far as I can see.

Comment 9

[(not currently active) Ted Mielczarek]

That seems a little silly. If you already have a <form> why not just do like smaug suggests and pass the form element directly? If you don't want to use the form element, you should be able to construct a FormData without a <form>.

Comment 10

[(not currently active) Ted Mielczarek]

Otherwise, that interface looks pretty sane, although I don't see file entries mentioned specifically.

Comment 11

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

(In reply to comment #9)
> That seems a little silly. If you already have a <form> why not just do like
> smaug suggests and pass the form element directly?

So that you can add additional fields to the FormData object for things that aren't in the form.

It also allows us to do things like passing an arbitrary node to the xhr.send() method and have just the serialization (.innerHTML) of that node be sent. I believe some browsers support this already. 

> If you don't want to use the
> form element, you should be able to construct a FormData without a <form>.

You can do that with the API defined in the spec. See link in comment 7 and search for "constructor".

The idea is that you can *either* start from scratch using |x = new FormData()| *or* you can start using the data that's in the a form and optionally add more data to it.

Comment 12

[(not currently active) Ted Mielczarek]

Ah, I must have missed that. That sounds like exactly what I want, then. The append() method does seem to be a little vague on adding file entries, as I mentioned in comment 10. Sounds like we should just implement that part of the spec.

Comment 13

[Anne (:annevk)]

Any amount of detail the specification is missing is probably missing in HTML5 too. I more or less copied the <form> model defined there.

Comment 14

[Anne (:annevk)]

<form>.formData seems like something HTML5 ought to define so I have not done that. XMLHttpRequest.send(HTMLFormElement) is an interesting idea too. I suggest we gain some more experience with plain FormData first before adding more features.

Comment 15

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

Done and done

Comment 16

[(not currently active) Ted Mielczarek]

<3