Filefield AJAX editables break when more than one is included on the page [#1208094]

Sometimes the editablefield for filefield (either file or image widget) works and sometimes it does not work and is broken in Internet Explorer, IE (IE7, IE8). [I'm throwing some keywords in there so searches might find this issue.]

Damien helped me find a fix. Adding the line:

$form['#attributes']['enctype'] = 'multipart/form-data';

to function editablefields_form_builder(&$form_state, $node, $field_name, $delta)
in editablefields.module

I added it after
$form = array('#node' => $node);

Inspiration taken from: #451928-17: Documentation how to use ctools modal dialog for file uploads
This might be related... http://jquery.malsup.com/form/#file-upload

I think this should be added to editablefields because on D6, a form item cannot set the enctype of a form, so filefield (the module) workarounds this by implementing filefield_form_alter(), of course it cannot possibly know *all the forms* out there that have a filefield.

Here were some of the symptoms without that line. In one Panel (node template override) I had which had a bunch of other editablefields for various cck field types. The browse part of the ajax editablefield for files would work. But when clicking on the upload button, IE would open up a window to try and download something to the desktop. (Before clicking when hovering over the upload it would say "editablefields_html/XXXX/field_whatever/0".) I'll see if I can get detail about what IE tried to open and post back about that later.

Might also be related to #656318-2: "File Download -Security Warning" in IE8 (editablefields_html content css code showing)

Comment	File	Size	Author
#4	editablefields-6.x-2.x-jquery_update_fix-1208094.patch	786 bytes	krlucas
#4	editablefields-6.x-3.x-jquery_update_fix-1208094.patch	902 bytes	krlucas

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

YesCT CreditAttribution: YesCT commented 4 July 2011 at 07:02

Testing is tricky. But I think that the fix works for file fields with the widget file upload, and not for image.

Which should be good enough for me for now...

Will have to do more testing to triple check.

Comment #2

YesCT CreditAttribution: YesCT commented 4 July 2011 at 08:10

Or maybe it's that I have two on a page? I thought changing it to file from image helped, put it didn't.

in safari, using the remove button (like to change an image or file) results in:

{ "content": "\x3cform action=\"/editablefields_html/2750/field_speaker_picture/0\"  accept-charset=\"UTF-8\" method=\"post\" id=\"editablefields-form\"\x3e\n\x3cdiv\x3e\x3cdiv  id=\"edit-field-speaker-picture-0-ahah-wrapper\"\x3e\x3cdiv class=\"form-item\" id=\"edit-field-speaker-picture-0-upload-wrapper\"\x3e\n \x3cdiv class=\"filefield-element clear-block\"\x3e\x3cdiv class=\"widget-preview\"\x3e\x3cdiv class=\"filefield-file-info\"\x3e\x3cdiv class=\"filename\"\x3e\x3cdiv class=\"filefield-file\"\x3e\x3cimg class=\"filefield-icon field-icon-i.....

in IE, the remove button, acts like it is going to download something. Gives a popup window that says: File Download - Security Warning. Do you want to save this file, or find a program online to open it? Name: 0 Type: Unknown file Type... if I save it, then open it in notepad, I see the same thing:

{ "content": ...

But if I remove the file in another browser, like in Chrome, hey, it happened when I tried to remove in Chrome too. But just on one of the files. This is difficult to test.

Seems like sometimes it works, other times not.

Comment #3

krlucas CreditAttribution: krlucas commented 6 July 2011 at 16:39

Assigned:

Unassigned

» krlucas

YesCT was using a version of 6.x-3.x circa a few months ago. I got a copy of her snapshot, tested and was able to replicate that multiple Filefields, both using AJAX Editable (legacy version, not cTools) would fail and act erratically.

The formatter was including the core versions of misc.js and jquery.form.js instead of the jquery_update versions. In addition, I noticed it wasn't including ahah.js at all, though filefield requires it. So after changing those lines to point to the jquery_update versions, and adding ahah.js, things started working.

Will try to replicate in latest 6.x-2.x and 6.x-3.x branches.

Also need to test to see if ['enctype'] really affects things.

Comment #4

krlucas CreditAttribution: krlucas commented 6 July 2011 at 18:54

Title:	file upload broken in IE in unpredictable situations, fix by add $form['#attributes']['enctype'] = 'multipart/form-data';	» Filefield AJAX editables break when more than one is included on the page
Version:	6.x-3.x-dev	» 6.x-2.x-dev
Status:	Active	» Needs review

File	Size
3.x patch	902 bytes
2.x patch	786 bytes

Confirmed in both 2.x-dev and 3.x-dev.

Backing up, the problem was that when two AJAX Filefield editables were included in the page the first one would be broken. In 6.x-2.x it just wouldn't submit; and in latest 6.x-3.x it would render the serialized json response to the screen. I experienced this problem in IE8, IE9 and Mac Chrome. I don't think it was an IE issue and the attached patches don't included the enc-type attribute fix. That didn't affect anything in my testing.

Patches just change to include jquery_update version of ahah.js and jquery.form.js.

I will probably commit the 3.x patch without community review but if someone could test the 2.x version, particularly in IE7, that would be awesome.

Changing title, version and status.