ajax upload multipart form data as json object

Question

Here there are form data with image. I need to send whole image data through json object. Below I have mentioned the code. under the below method I could get whole data except logo. I need to send whole data at once

 <form class="form-horizontal" id="companyData">
            <fieldset>

                <legend>Add Company</legend>

                <div class="control-group">
                    <label class="control-label" for="code">Code</label>
                    <div class="controls">
                        <input id="code" name="code" type="text" placeholder="code" class="input-large">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="name">Name</label>
                    <div class="controls">
                        <input id="name" name="name" type="text" placeholder="Name"  class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="logo">Logo</label>
                    <div class="controls">
                        <input id="logo" name="logo" class="input-file" type="file">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="username">Admin Username</label>
                    <div class="controls">
                        <input id="username" name="username" type="text" placeholder="" class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="AdminPassword">Admin Password</label>
                    <div class="controls">
                        <input id="AdminPassword" name="AdminPassword" type="text" placeholder="" class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="submit"></label>
                    <div class="controls">
                        <button id="submit" name="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>

            </fieldset>
        </form>

here is my script

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit").click(function (e) {
            e.preventDefault();
            var formData = JSON.parse(JSON.stringify(jQuery('#companyData').serializeArray()));
            $.ajax({
                type: "POST",
                url: "",
                data: formData,
                cache: false,
                success: function (data) {
                }
            });

        });
    });
</script>

Well when sending file data without ajax you need an enctype="multipart/form-data" on the form, so that will be the same or similar when posting data through ajax. Relevant related thread: http://stackoverflow.com/questions/20795449/jquery-ajax-form-submission-enctype-multipart-form-data-why-does-contentt — Gimby, Aug 25 '14 at 07:34
See http://stackoverflow.com/questions/5941393/how-to-pass-input-type-file-data-in-ajax-call — in need of help, Aug 25 '14 at 07:34
did you find a solution for this already? can you please share your thoughts? i'd greatly appreciate it. — Leah, Dec 20 '14 at 02:47

Shivang MIttal · Answer 1 · 2014-08-25T10:00:43.460

image is a problem while using json.stringify.Send the formdata object and append all the items into it. Try this

    var imgFile = document.getElementById('logo');
var imgfileList = imgFile.files;

var formdata = new FormData();
if (imgfileList && imgfileList != null && imgfileList.length > 0) {

    formdata.append(imgfileList[0].name, imgfileList[0]); or add the name
    formdata.append('logofilename', imgfileList[0]);
}
var other_data = $('#companyData :input').serializeArray();
$.each(other_data, function (key, input) {
    formdata.append(input.name, input.value);
});


    $.ajax({
        url: UrlRoot.SaveTeamInfo,
        data: formdata,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function () {

        }
    });

Please remeber to add process data and content type to false as specified in the ajax call above.

try this is formdata is undefined'

if(typeof FormData == "undefined"){
var data = [];
data.push(imgfileList[0].name, imgfileList[0]);
}
else{
var data = new FormData();
    data.append('data', JSON.stringify(inputData));
}

Use .push instead of .append for array

ok, Let me check this. till then try the edited solution , a workaround of formdata and let me know if it works — Shivang MIttal, Aug 25 '14 at 09:59
try to add enctype="multipart/form-data" in form tag and check once — Shivang MIttal, Aug 25 '14 at 10:16

ajax upload multipart form data as json object

1 Answers1