IFrame to upload files, Safari Error

[issackelly]

This seems to work fine in firefox, I get an error in Chrome:

Uncaught TypeError: Cannot call method 'call' of undefined

And an error in Safari it's a bit more detailed:

TypeError: Result of expression '(jQuery(this).data('form-plugin-onload'))' [null] is not a function.

My Form:

<form method="post"  enctype="multipart/form-data" id="add_photo" action="/add_photo/" id="add_photo"><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='ba7d8cc065e23cd47bdc1b65e5fabac2' /></div>
<table>
    <tr><th><label for="id_title">Caption:</label></th><td><input id="id_title" type="text" name="title" maxlength="255" /></td></tr>
     <tr><th><label for="id_photo">Photo:</label></th><td><input type="file" name="photo" id="id_photo" /><input type="hidden" name="post" value="4" id="id_post" /><input type="hidden" name="owner" value="1" id="id_owner" /><input type="hidden" name="order" value="0" id="id_order" /></td></tr>
   </table>
<input type="submit" name="update" value="Add Picture" />
 </form>

My JS

$("form#add_photo").ajaxForm({
            dataType: 'xml',
            iframe: true,
            beforeSubmit: function(){
                $("form#add_photo").before('<h4 id="loading">Please Wait, Loading</h4>')
            },
            success : function(data,text){
                frick = data
                $("h4#loading").remove()
                $('<li style="background:url('+$(data).find('img:first').attr('src')+') top;display:block;width:300px;height:100px;"><span style="background:rgba(255,255,255,0.7); display:block; height:20%; width:100%"> <input type="radio" name="cover" value=""/><strong>Cover</strong><a href="#move_up">Move Up</a><a href="#move_to_top">Move To Top</a></span></li>').appendTo($('#gallery_sort'));
                $("h3#loading").remove()
            }   
        });

[jzfgo]

Same error here, it seems that only affects WebKit browsers.

[Tomasso]

I get the same with firefox jQuery(this).data("form-plugin-onload") is not a function

[defunkt]

This commit fixes it for me: http://github.com/secelis/form/commit/0a056f168d0c8feab434d1d2022e3657da46ad99

[ovi-zz]

Set the data before adding the iframe to the DOM. A patch:
diff --git a/jquery.form.js b/jquery.form.js
index be8c0b6..9df8516 100644
--- a/jquery.form.js
+++ b/jquery.form.js
@@ -261,8 +261,8 @@ $.fn.ajaxSubmit = function(options) {
.appendTo(form)[0]);

                                // add iframe to doc and submit the form
-                               $io.appendTo('body');
                                $io.data('form-plugin-onload', cb);
+                               $io.appendTo('body');
                                form.submit();
                        }
                        finally {

[robcolburn]

confirmed ovi's patch

Though he is using a slightly different version than the the current, you may need to apply manually to Lines 264-265 (version: 2.43 (12-MAR-2010))

[akahn]

This seems to be fixed in the latest form plugin. Close plz, Mike?

[malsup]

I believe this is fixed.