CODEWITHSUNDEEP
asp.net-mvc-3jquery-plugins
Joper
Joper

Reputation: 8219

jQuery form upload error

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?

Upvotes: 0

Views: 1463

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039498

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.

Upvotes: 1

Related Questions