appending file data to formData in javascript not working
The following code is not working in Firefox 21 even though it corresponds to Mozilla docs on how to implement FormData in ajax. (The code DOES work in both Chrome and Opera).
var data = new FormData(document.getElementById("uploadform")); $.each($('#file')[0].files, function(i, file) { data.append('file-'+i, file, this.name); });
The $.each loop is where it's bogging down because I put an alert in there which popped up in Chrome and Opera, but not in firefox.
Here's the apache php error that occurs:
[Wed Jun 05 01:48:44 2013] [error] [client ::1] PHP Notice: Undefined index: file-0 in /home/Jeff/public/main/public/upload.php on line 7, referer: http://localhost/
So, basically, in Firefox, the file array is not being appended to the FormData object within the javascript code, then when the form data is submitted to the server it's throwing the apache php error.
Anyone with any inklings?
Okulungisiwe ngu JeffAgee
All Replies (5)
Did you check Firefox's error console (Ctrl+Shift+j) or Web Console (Ctrl+Shift+k) for errors in the script itself?
In this function, are you getting the expected data types for i and file, or are you saying this function never runs?
function(i, file) {data.append('file-'+i, file, this.name);}
(For reference: Using FormData Objects - MDN)
Hi jscher. Thanks for the reply.
I simplified the code (removed the loop because I only need to upload one file at a time (but still have the problem):
var data = new FormData(document.getElementById("uploadform"));
var selected_file = document.getElementById('file').files[0];
alert(selected_file);
data.append('file-0', selected_file);
The alert is just a tester--In Firefox, the alert does not go off, but it does in Chrome and Opera.
Here's the data from the Firebug console on the http post:
327999323633775102168260978 Content-Disposition: form-data; name="MAX_FILE_SIZE" 1000000 -----------------------------327999323633775102168260978 Content-Disposition: form-data; name="file"; filename="" Content-Type: application/octet-stream -----------------------------327999323633775102168260978 Content-Disposition: form-data; name="file-0" undefined -----------------------------327999323633775102168260978--
here'sthe http response data:
Invalid file
I could post the header info too if that would help. For the life of me I don't understand what is going wrong. I've even tested this out on both linux machine and windows machine--same result. And same result on local LAMP and remote LAMP at linode.com, so it's not some kind of virus or something weird I don't think.
Oh, I almost forgot to say that no I'm not getting any errors in the console.
I don't know why the alert() wouldn't fire and yet have no error in the console. Can you use the Firefox Debugger tool or Firebug Scripts panel to set one or more breaks and see whether that part of the code actually is running?
(Cross-reference to thread on StackOverflow: jquery - Javascript FormData function works with Chrome and Opera but not Firefox - Stack Overflow)
Okulungisiwe ngu jscher2000 - Support Volunteer
Ok. I my testing must be getting screwy, sorry.
I just ran it with the above code exactly like I wrote last, using "alert(selected_file)" and I DO get an alert box in Firefox that says "undefined", but I get no console error.
I then ran it again and changed the alert slightly to: alert(selected_file.name) and I do NOT get an alert in Firefox, but DO get a console error that says:
TypeError: selected_file is undefined [Break On This Error]
alert(selected_file.name);
In Chrome I get an alert both times with no console errors. First alert says "[object File]", second one gives the file name like "plant.jpg".