How to receive a file and an integer sent through an ajax request in action method using asp.net core

Question

I want to send an image and a number when the user perform an upload.

My Javascript

  form.append('file', $(uploader).get(0).files[0]);
        var id= $("#id").val();

        form.append("id", id);

        $.ajax({

            method: 'POST',
            url: '/images/send',
            data: form,
            form: false,
            processData: false


        });

In my action what should I do?

With this I only receive the image.

      [HttpPost]
      public string send(IFormFile file) // What argument should I use
       {
              How do I get the number and file?
       }

Answer 1

You can add a new parameter of type int to your action method. The parameter name should match with the formdata item name you are sending ( id )

[HttpPost]
public string send(IFormFile file,int id) 
{
    // to do : return something.
}

You need to have the contentType property on your $.ajax method set to false

This should work.

var form = new FormData();

form.append('file', $('#File').get(0).files[0]);
var id= $("#id").val();        
form.append("id", id);

var urlToPost ="/images/send";

$.ajax({
        method: 'POST',
        url: urlToPost ,
        data: form,
        processData: false,
        contentType: false
      }).done(function(result) {
         // do something with the result now
         console.log(result);
      }).fail(function(a, b, c) {
           alert("error");
      });

If you want to send multiple input values with the file input, i suggest you create a view model and use that as explained in this post .

Also it might be a good idea to keep your form elements inside a form and set it's action value to the url you want to send and read that in your javascript code that hard coding it there.

<form asp-action="send" asp-controller="images" method="post">
    <input type="file" name="File" id="File" />
    <input type="text" id="id" value="0" />
    <input type="submit" />
</form>

Now in your javascript you can read it from the form. For example, if you are wiring up the submit event of the form

$(function () {
   $("form").submit(function (e) {
      e.preventDefault();

      var urlToPost  = $(this).attr("action");

      //your existing code for ajax call
   });
});