ajax does not post file to controller mvc

Question

im posting a form that contain file and html data plus a function to get geocode ,but the controller only get the data from the ajax post but not the file, i assume that it have something to do with the fact the button posting but i'm not sure ,

    @using (Html.BeginForm("Create", "lecture", FormMethod.Post, new { enctype = "multipart/form-data", id = "RestoForm" }))
{
    //values has remove for clear
    <div class="form-group">
        @Html.LabelFor(f => f.RImage) <i class="glyphicon glyphicon-folder-open"></i>
        <input type="file" name="RImage" class="btn btn-default btn-sm btn-google btn-group-justified hvr-shadow " />
    </div>

    <input type="button" class="btn btn-primary btn-lg" onclick="GetLocation()" value="Finish" />
}

@section scripts
{

    <script type="text/javascript">
        function GetLocation() {
            var geocoder = new window.google.maps.Geocoder();

            var Street = document.getElementById('txtAddress').value;
            var City = document.getElementById('txtCity').value;
            var address = City + Street;
            console.log(address);
            var labelLat = document.getElementById('Latitude');
            var labellong = document.getElementById('longitude');

            geocoder.geocode({ 'address': address },
                function (results, status) {
                    if (status == window.google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                 console.log("Latitude: " + latitude + "\nLongitude: " + longitude); //Ok.

                        labelLat.value = latitude; //Ok.
                        labellong.value = longitude;
                        $.ajax({
                            url: 'Create',
                            type: 'POST',
                            data: $('#RestoForm').serialize(),
                            datetype: "html",
                            success: function (data) {
                                $('#RestoForm').html(data);
                            }
                        });

                        error: function e(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                        }
                    }
                });
        };
    </script>

controlle `

[Authorize, HttpPost, ValidateAntiForgeryToken]
        public ActionResult Create(LectureFormViewModel viewModel) // RImage =Null
        {`

datetype typo mistake ? it should be datatype. and use FormData not only serialize — Parth Trivedi
– Parth Trivedi, Commented Nov 22, 2016 at 12:20
Uncaught TypeError: $(...).FormData is not a function(…) data: $('#RestoForm').FormData(), dattype: "html", — Assaf Our
– Assaf Our, Commented Nov 22, 2016 at 12:32

trashr0x · Accepted Answer · 2016-11-22 13:29:08Z

1

You can use FormData to send files to action using AJAX.

var fm = new FormData();
fm.append("Name", $("#Name").val());
fm.append("RImage", $("#RImage").val());

$.ajax({
    url: 'Create',
    type: 'POST',
    data: fm,
    datatype: "html",
    contentType: false, // Not to set any content header
    processData: false, // Not to process data
    success: function (data) {
        $('#RestoForm').html(data);
    }
});

edited Nov 22, 2016 at 13:29

trashr0x

6,5953 gold badges34 silver badges41 bronze badges

answered Nov 22, 2016 at 13:06

Jaimin Dave

1,22210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Assaf Our Over a year ago

that gave me 500 error on jquery :xhr.send( options.hasContent && options.data || null );

Chris Pratt Over a year ago

500 is an HTTP error. It has nothing to do with JavaScript. The server responding to the AJAX errored out. You need to look at your server-side code to determine why.

Jaimin Dave Over a year ago

You must need to append all the properties of model to the formdata. Pleas e check that.

Assaf Our Over a year ago

@ChrisPratt Yep, my bed , found it.

Assaf Our Over a year ago

Thanks you all , get the answer

Collectives™ on Stack Overflow

ajax does not post file to controller mvc

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related