Comments on: Firefox 4 – FormData and the new File.url object

By: Radek Tetík

Radek Tetík — Tue, 15 Feb 2011 13:04:28 +0000

FormData is a great API. I have just implemented it and works well in FF4b11 and Chrome 10. Sadly it does not work in IE9.

By: Sol

Sol — Mon, 22 Nov 2010 08:02:18 +0000

How exactly File.url work? I get undefined trying to get it.

By: Michel

Michel — Wed, 27 Oct 2010 16:17:06 +0000

Can Anyone help me correctly do a preflight cors post in Fx 3.6 ?
http://stackoverflow.com/questions/4034223/correct-way-to-do-cors-preflight-post-using-jquery
and will the same code work in Fx4?

By: Shiv Kumar

Shiv Kumar — Thu, 23 Sep 2010 06:09:24 +0000

Answering my own question…

If you have a form field with an id of \fileToUpload\ and this field is an input element of type file. then

var myFile = document.getElementById(‘fileToUpload’).Files[0];

By: Shiv Kumar

Shiv Kumar — Mon, 20 Sep 2010 05:08:58 +0000

In your example:
var fd = new FormData();
fd.append(“fileField”, myFile);
var xhr = new XMLHttpRequest();
xhr.open(“POST”, “file_handler.php”);
xhr.send(fd);

what is myFile?
I’ve tried document.getElementById(“someformelement”);

where someformelement is a

But it is not send the file over to the server. It sends the additional form fields if appended to the FormData.

Sending the whole form using the next example works as expected.

By: mawrya

mawrya — Mon, 30 Aug 2010 03:49:33 +0000

Question: what if I want to add a web-accessible file to a form automatically via javascript? This example and others like it only cover user selected files – either via a form control or drag-and-drop. That makes sense for files on a user’s computer as there is a security concern. What if I want to add files that are already and ONLY accessible from a web address? There is no way to do this with a drag and drop interface, nor a file picker interface. I want a script that gets the file at http://localhost/blah.xml and includes it with the other user selected files in the form. I would like to use the FormData.append() method to get the file into the form as it takes care of all the messy multipart/form-data encoding but it seems I need to first get the blah.xml file into a FileAPI file object. There doesn’t appear to be any way to do this. Am I forced write javascript to manually read and multipart/form-data encode it and then attach it to the form somehow?

And thanks for the great posts!

By: Kensaku KOMATSU

Kensaku KOMATSU — Wed, 25 Aug 2010 06:39:02 +0000

Thank you for supporting FormData!! It’s make sense to me:)

However, under the condition that uploading files with FormData method to Cross-Origin Server, I found that preflight sequence occurred w/ FireFox4 beta (I tried beta3 and 4). In the CORS spec, if the method is “POST” and content-type is “multipart/form-data”, preflight sequence should not be occurred. So, I think this behavior does not corresponds to CORS spec.

P.S. Chrome 6 beta also supports FormData feature, and preflight sequence does not work with it.

By: Werner Punz

Werner Punz — Sun, 01 Aug 2010 20:03:06 +0000

Ok I gave this stuff a try, unfortunately (Firefox 4 Beta2) it still is buggy, while it is sending the form data as multipart request, it lacks some definitions most multipart decoders rely upon. The send generates the multipart request without divider definitions and without length definition.
Setting both manually also is not possible due to not being able to access the length of the generated submit content, and also due to the divider being generated at send time as well.

This seems like a bug to me, any idea where I can report this to?

By: Werner Punz

Werner Punz — Sun, 01 Aug 2010 15:29:04 +0000

Nice stuff, but so far the FormData object always enforces a multipart xhr submit, wouldn´t it be better to have the object as well for normal non multipart submit cases, it would ease a lot of things to expose the FormData object to all possible submit cases instead of just having a helper for multipart submits.

By: Paul Rouget

Paul Rouget — Mon, 26 Jul 2010 08:41:02 +0000

Need more details here. What do you mean?

By: Firenze

Firenze — Mon, 26 Jul 2010 01:17:01 +0000

Using this XMLHttpRequest Level 2 form method will open all gates to hell,
malware writters will have a playground they’ve never seen before.

Why don’t you think before you brew such crap code ?

By: Jonas Sicking

Jonas Sicking — Sun, 25 Jul 2010 04:14:49 +0000

It will work until the user navigates away from the page.

By: tobiistgut

tobiistgut — Fri, 16 Jul 2010 22:20:42 +0000

How long will the URL provided by File.url work?

By: Paul Rouget

Paul Rouget — Fri, 16 Jul 2010 04:28:01 +0000

Could be this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=572139

By: Anshuman

Anshuman — Thu, 15 Jul 2010 07:28:16 +0000

can you please provide the info for “manual multipart/form-data encode” in FF3.6 …. i am using this code but its not working..

var data = event.dataTransfer;


var boundary = '------multipartformboundary' + (new Date).getTime();

var dashdash = '--';

var crlf     = '\r\n';
/* Build RFC2388 string. */

var builder = '';
builder += dashdash;

builder += boundary;

builder += crlf;
var xhr = new XMLHttpRequest();
/* For each dropped file. */

for (var i = 0; i < data.files.length; i++) {

var file = data.files[i];
/* Generate headers. */

builder += 'Content-Disposition: form-data; name="user_file[]"';

if (file.fileName) {

  builder += '; filename="' + file.fileName + '"';

}

builder += crlf;
builder += 'Content-Type: application/octet-stream';

builder += crlf;

builder += crlf; 
/* Append binary data. */

builder += file.getAsBinary();

builder += crlf;
/* Write boundary. */

builder += dashdash;

builder += boundary;

builder += crlf;

}
/* Mark end of the request. */

builder += dashdash;

builder += boundary;

builder += dashdash;

builder += crlf;

try{

xhr.open("POST", "fu.php", true);

xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);

xhr.sendAsBinary(builder);

return "Uploaded";

} catch(e) {

  return e;

}

By: srigi

srigi — Tue, 13 Jul 2010 16:18:14 +0000

Can you publish some infoooz about

“read the contents of the file into memory, then manually multipart/form-data encode it and then finally send it to a server”

I want to code some workaroud for FF v3.6 for Ajax file uploads. Since v3.6 doesn’t support FormData, I need implement this “hack”.

By: Jonas Sicking

Jonas Sicking — Mon, 12 Jul 2010 09:00:08 +0000

Would love to see a testcase. One thing to keep in mind is that we’re unusually strict about same-origin checks. So a page in domain A can’t use the File.url value produced by a page in domain B.

Are you using document.domain or postMessage to transport the fileurl between pages of different domains by any chance?

If the above isn’t a problem, file a bug in bugzilla or send me a testcase (should be easy to find an email address through google or other search).

By: David

David — Thu, 08 Jul 2010 16:56:59 +0000

Trying to set the source of an image using Firefox 4 Beta 1, jQuery, and File.url spec. The File.url property is returning a string (moz-filedata:xxxxx…), but when set as the src for the image, nothing comes back.

Any ideas? Thanks.