0

I am using this version of jQuery form plugin https://raw.github.com/malsup/form/master/jquery.form.js getting an error on submit:

error on line form.submit(); 

SCRIPT87: Invalid argument. jquery.form.js, line 347 character 5

My code:

<form id="ajaxUploadForm" action="@Url.Action("Upload", "Home")%>" method="post" enctype="multipart/form-data" >
    <fieldset>
        <legend>Upload a file</legend>
        <label>File to Upload: <input type="file" name="file" /></label>
        <input id="ajaxUploadButton" type="submit" value="Upload" />
    </fieldset>
</form> 

$(function () {
        $("#ajaxUploadForm").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function () {
               // $("#ajaxUploadForm").block({ message: '<img src="/Content/themes/start/images/progress.gif" />' });
            },
            success: function (result) {
               // $("#ajaxUploadForm").unblock();
                //$("#ajaxUploadForm").resetForm();
                $.growlUI(null, result.message);
            },
            error: function (xhr, textStatus, errorThrown) {
                //$("#ajaxUploadForm").unblock();
                //$("#ajaxUploadForm").resetForm();
                $.growlUI(null, 'Error uploading file');
            }
        });
    });

I am doing this upload in side simple model dialog.

May be some one may have any ideas how ti fix that?

Joper
  • 8,019
  • 21
  • 53
  • 80

1 Answers1

1

If the controller action that you are POSTing to is returning JSON you might need to wrap it in a <textarea> tags as explained in the documentation:

Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • the problem is that Submit does not heppend, i put break point and check it under debug, it is not submitting, also looked in fiddler to make sure the request does not go somewhere else, no request there at all, it is just failing on submit for some reason. Mmm... by the way i have wrapped response in my controller – Joper Jul 09 '11 at 16:23
  • @Joper, hmm, that's weird. Have you tried doing this in a normal form (not one in some jquery dialogs)? – Darin Dimitrov Jul 09 '11 at 16:27
  • tried another browser (Mozilla latest) in Mozilla it is sending request(could see it in the fidder, but on debug i culdn't see that request coming on controller) but getting an error `ReadResponse() failed: The server did not return a response for this request`. Before was trying Opera latest and IE latest – Joper Jul 09 '11 at 16:28
  • @Joper, how does your controller actions look like? Also how about testing this in a normal form without dialogs, directly in the main view? – Darin Dimitrov Jul 09 '11 at 16:28
  • thanks to fiddler, i see that it is doing post to the wrong url, POST /Home/Upload%%3E HTTP/1.1, have no idea from where %%3E coming, probably it just a piece of posted data? – Joper Jul 09 '11 at 16:33
  • 1
    @Joper, how does the `action` attribute of the form look like in the generated HTML? – Darin Dimitrov Jul 09 '11 at 16:35
  • my controller looking like in that sample http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/ – Joper Jul 09 '11 at 16:35
  • it is actually good question, so i am using razor view and sample where i was taking some code was written on WebForms, so i didnt take out %> from the end of action="@Url.Action("Upload", "Home")%>". Now of cause it is working when i took it out... – Joper Jul 09 '11 at 16:38