How to receive data included file in asp.net core?

Question

Which model should I use to receive a js data, included a File object and a string, from client? Or which data type should I use for File object in asp.net Core server?

Answer 1

Use ViewModel to receive the file and string , and submit form directly to post these data . Note : add enctype="multipart/form-data" in Form when you want to send files

 public class TestViewModel
{
    public string Name { get; set; }
    public IFormFile file { get; set; }
}

<div class="row">
  <div class="col-md-4">
    <form asp-action="UploadFile"  enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name"  class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input asp-for="file" class="form-control" />
        </div>

        <div class="form-group">
            <input type="submit" id="btnSubmit" value="Create" class="btn btn-default" />
        </div>
    </form>
  </div>
   <span id="result"></span>
</div>

If you want to send form data by js , you could add id="fileUploadForm" and try the javascript like below

@section Scripts
{
<script type="text/javascript">

    $(document).ready(function () {

        $("#btnSubmit").click(function (event) {

            //stop submit the form, we will post it manually.
            event.preventDefault();

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

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

            // If you want to add an extra field for the FormData
            data.append("CustomField", "This is some extra data, testing");

            // disabled the submit button
            $("#btnSubmit").prop("disabled", true);

            $.ajax({
                type: "POST",
                //enctype: 'multipart/form-data',
                url: "/Home/UploadFile",
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function (data) {

                    $("#result").text(data);
                    console.log("SUCCESS : ", data);
                    $("#btnSubmit").prop("disabled", false);

                },
                error: function (e) {

                    $("#result").text(e.responseText);
                    console.log("ERROR : ", e);
                    $("#btnSubmit").prop("disabled", false);

                }
            });

        });

    });
</script>
}

Controller

 [HttpPost]
 public async Task<ActionResult> UploadFile(TestViewModel data)
  { }

Answer 2

Which model should I use to receive js data, including a File object and a string

ASP Net Core has the IFormFile container for this purpose. The data is held internally as a stream.

Your action signature for a string and a file would look like,

public IActionResult Action(IFormFile file, string name) { }

Note, the parameter names must match the form data names you use in javascript. I.e,

const fd = new FormData()
fd.append('file' , file)
fd.append('name', 'some string')

This documentation provides full usage examples.