How to Post Registration Form with File to ASP.NET MVC Action

Question

I'm unclear as to why I'm unable to POST the data in my form to the server. It appears as though the form is defaulting to a 'GET' request although I've hardcoded both the form and the AJAX call to use a 'POST' request. So, I'm out of ideas. Any suggestions are very much appreciated.

The UI looks like this:

This is my Javascript code:

            SubmitRegisterForm: function (e) {
                var scope = this;

                e.preventDefault();

                //var formData = new FormData();
                //formData.append('profilepic', $('#profilepic')[0].files[0]);

                var data = {
                    FirstName: $('#FirstName').val(),
                    LastName: $('#LastName').val(),
                    Email: $('#Email').val(),
                    Password: $('#Password').val(),
                    ConfirmPassword: $('#ConfirmPassword').val(),
                    StripeConnectedAcctId: scope.stripeConnectedAccountId                   
                };

                console.log(data);

                $.ajax({
                    url: '/Account/Register',
                    method: 'POST',
                    data: { model: data, profilepic: $('#profilepic')[0].files[0] },
                    enctype: 'multipart/form-data'
                }).done(function (resp) {

                });
            }

Server-side code looks like this, but isn't currently being hit (that would be the problem bub):

Also, I'm seeing these errors on the Chrome Dev tools Console:

Funny enough, the Javascript code executes fine, displaying the data variable just fine, but complains about some Illegal Invocation in Vue... which literally makes no sense as I don't even use any Vue related functions but rather issue an AJAX call.

What on God's green Earth gives???? >=/

I'm hoping I'll wake up to this with a solution in my inbox like it's Christmas!

Answer 1

You are using ASP .NET so if you are using server side rendering I would do something like this and let the framework handle everything.

<form enctype="multipart/form-data" asp-action="controllorAction" method="post">
        <label class="form-label" for="firstName">First Name</label><input type="text" asp-for="Model.FirstName" />
        <label class="form-label" for="lastName">Last Name</label><input type="text" asp-for="Model.LatName" />
        ...
       <label class="form-label" for="customFile">Profile Picture</label><input type="file" asp-for="Model.File" class="form-control" id="File" />
       <input type="submit" value="Submit form" class="btn btn-primary" />
 </form>

https://www.w3schools.com/ASp/webpages_forms.asp
Hope this helps you