asp.net core send formfile with ajax, i can't file in controller

Question

asp.net core 2.2

model.file or another file.Don't come file.Everytime is null. Nested ajax or running order ajax.

I want to update profile. I was able. When the file upload into the work, I exploded.

File upload and user update with different ajax queries? Should I expect different ajax queries in different methods? or is it handled in a single ajax query?

Sorry, my bad english.

Controller:

public IActionResult UpdateProfile(ProfileModel model, IFormFile file)
        {            
            var result = userOperation.UpdateUser(model).Result;
            if (result.Succeeded)
            {
                return Ok();
            }
            else
            {
                return BadRequest();
            }

        }

ProfileModel:

public class ProfileModel
    {
        public string UserId { get; set; }
        public string username { get; set; }
        public string Name { get; set; }
        public string SurName { get; set; }
        public string ProfilePhoto { get; set; }
        public IFormFile file { get; set; }
    }

Jquery:

var isim = $('#name');
var soyisim = $('#surname');
var menu = $('#navInside');
var cikis = $('#logout');
var updateCikis = $('#exit');
var update = $('#update');
var goUpdate = $('#goUpdate');
var kaydet = $('#kaydet');
var dosya = $('input[type=file]');
var username2 = $('#username').val();
kaydet.click(function (event) {
                event.preventDefault();
                $.ajax({
                    url: '/Registered/UpdateProfile',
                    data: { Name: isim.val(), SurName: soyisim.val(), username: '@User.Identity.Name' },
                    type: 'POST',
                    success: function (result) {
                            console.log('basarili güncelleme');
                            var formData = new FormData();
                            formData.append('file', dosya[0].files[0].name);
                            console.log(dosya[0].files[0].name);
                            console.log(JSON.stringify(dosya[0].files[0]));
                            $.ajax({
                                url: '/Registered/UpdateProfile',
                                data: { Name: isim.val(), SurName: soyisim.val(), username: '@User.Identity.Name', file: formData },
                                processData: false,
                                contentType: false,
                                type: 'POST',
                                success: function(){
                                    alert('foto da gittiii');
                                }
                            });
                    }
                });

score 3 · Accepted Answer · answered Dec 03 '19 at 07:55

If you want to send a model which includes a file using ajax , you could refer to the below example:

View

<div class="row">
<div class="col-md-4">
    <form  id="myform" enctype="multipart/form-data">
        <div class="form-group">
            <label class="control-label">Name</label>
            <input id="name" name="name" class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label">SurName</label>
            <input id="surname" name="surname" class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label">ProfilePhoto</label>
            <input id="profilePhoto" name="profilePhoto" class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label">File</label>
            <input type="file" id="name" name="name" class="form-control" />
        </div>
        <div class="form-group">
            <input type="button" id="update" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>
</div>

@section Scripts
{
<script>
var dosya = $('input[type=file]');
var update = $('#update');
    update.click(function (event) {
        //stop submit the form, we will post it manually.
        event.preventDefault();

        // Get form
        var form = $('#myform')[0];

        // Create an FormData object
        var formData = new FormData(form);

        // If you want to add an extra field for the FormData
        formData.append("file", dosya[0].files[0]);
        formData.append("username", '@User.Identity.Name');
        $.ajax({
            url: '/Home/UpdateProfile',
            data: formData,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (result) {
                alert(result);
            }
        });
    });
</script>
}

Controller

    [HttpPost]
    public IActionResult UpdateProfile(ProfileModel model)
    {
        ...
    }

InvalidDataException: Form key or value length limit 2048 exceeded. — Samet Can, Dec 03 '19 at 12:45
By default, ASP.NET Core enforces key/value length limit of 2048 inside FormReader as constant and applied in FormOptions.Refer to https://stackoverflow.com/a/43314012/10201850 — Xueli Chen, Dec 04 '19 at 09:55
thank you, i solved my mistake is 'contentType'. I was writing wrong 'bontentType'. Thank you for all the information you provided. — Samet Can, Dec 04 '19 at 17:56

asp.net core send formfile with ajax, i can't file in controller

1 Answers1