I have the great job of having to finish off a job originally given to a contractor but was never pleted. Not a problem however I've now been told that the system must support Firefox 3.6! Not great but not something I would lose sleep over until now! The system has a Ajax function that uses the FormData object and then uploads a document (usually a PDF). I've ran this through Firefox 3.6 and I get the following

"FormData is not defined"
var formData = new FormData($('form')[0]);

That's fine as I can see that this object isn't supported, I just need to use a different method or means of collection... I used this:

var formData = Components.classes["@mozilla/files/formdata;1"]
        .createInstance(Components.interfaces.nsIDOMFormData);

However this gave me the following error!

Permission denied for http://10.29.100.23:8080 to get property XPCComponents.classes

I was unsure why this was... is the path "@mozilla/files/formdata;1" incorrect? I did more research and was getting nowhere! So I then thought about serializing the form changed the following to...

var formData =  {};

$.each($('form')[0].serializeArray(), function(_, kv) {
     if (formData.hasOwnProperty(kv.name)) {
         formData[kv.name] = $.makeArray(formData[kv.name]);
         formData[kv.name].push(kv.value);
     }else {
        formData[kv.name] = kv.value;
    }
});

although this didn#t error the Ajax function wasn't uploading (I presume it wasn't recognizing or finding the file or it was just collecting a string for the file value). Does anyone have any remendations on an alternative for FormData in older browsers, especially Firefox 3.6 - that's the only old browser I have to support.

** update ****

this is the content of the form on the HTML page

<form action="" method="post" enctype="multipart/form-data" name="uploadForm" id="uploadForm" target="#">
    <label for="fileField">Rechnung hochladen</label>
    <input type="file" name="fileField" id="fileField">
    <progress id="progressbar" class="progressbar_margin hidden"></progress>
</form>

I have the great job of having to finish off a job originally given to a contractor but was never pleted. Not a problem however I've now been told that the system must support Firefox 3.6! Not great but not something I would lose sleep over until now! The system has a Ajax function that uses the FormData object and then uploads a document (usually a PDF). I've ran this through Firefox 3.6 and I get the following

"FormData is not defined"
var formData = new FormData($('form')[0]);

That's fine as I can see that this object isn't supported, I just need to use a different method or means of collection... I used this:

var formData = Components.classes["@mozilla/files/formdata;1"]
        .createInstance(Components.interfaces.nsIDOMFormData);

However this gave me the following error!

Permission denied for http://10.29.100.23:8080 to get property XPCComponents.classes

I was unsure why this was... is the path "@mozilla/files/formdata;1" incorrect? I did more research and was getting nowhere! So I then thought about serializing the form changed the following to...

var formData =  {};

$.each($('form')[0].serializeArray(), function(_, kv) {
     if (formData.hasOwnProperty(kv.name)) {
         formData[kv.name] = $.makeArray(formData[kv.name]);
         formData[kv.name].push(kv.value);
     }else {
        formData[kv.name] = kv.value;
    }
});

although this didn#t error the Ajax function wasn't uploading (I presume it wasn't recognizing or finding the file or it was just collecting a string for the file value). Does anyone have any remendations on an alternative for FormData in older browsers, especially Firefox 3.6 - that's the only old browser I have to support.

** update ****

this is the content of the form on the HTML page

<form action="" method="post" enctype="multipart/form-data" name="uploadForm" id="uploadForm" target="#">
    <label for="fileField">Rechnung hochladen</label>
    <input type="file" name="fileField" id="fileField">
    <progress id="progressbar" class="progressbar_margin hidden"></progress>
</form>

• javascript
• jquery
• form-data

• 1 What elements are contained within the form? If they're non-file inputs, you should be able to just use $('theForm').serialize() as the data property of the .ajax() call. – Matt Commented May 9, 2012 at 10:54
• the form is simple and consists of the following (see the original question) – Mike Sav Commented May 9, 2012 at 10:55
• If the question can be rephrased as "use ajax for file uploads" then this could help: stackoverflow./questions/1686099/… The valums./ajax-upload page says it supports firefox 3.6+. There is an apparently more up to date fork at github./bencolon/file-uploader – Darren Cook Commented May 9, 2012 at 23:47

2 Answers 2

FormData is an XMLHttpRequest Level 2 interface that makes it easy to submit a form (including file uploads) using XHR / Ajax. As you've discovered, it's only available in Firefox from version 4 onwards. (The MDN documentation has a browser patibility table.)

I suggest trying the jQuery Form Plugin. It supports an iframe fallback for uploading files in older browsers.

I think you should use this before your code:

netscape.security.PrivilegeManager.enablePrivilege(
    'UniversalXPConnect'
);

To be sure also do this:

1. type "about:config" in your address bar;
2. search for "signed.applets.codebase_principal_support" ;
3. Set the value to true;

Hope it works , good luck.