How to achieve File upload using WEB API Dot net core?

Question

I am working on ASP DOT NET core web api where I need to send multiple attachments. I tried like following

<input type="text" id="txt_firstName"  />
<input type="text" id="txt_lastName"  />
<input type="file" id="file_TicketManageMent_AttachFile" multiple  />
<input type="button" onclick="fnADD()"  />

<script>
function fnADD(){
  var input = document.getElementById('file_TicketManageMent_AttachFile');
  var files = fileList;
  var formData = new FormData();

  for (var i = 0; i != files.length; i++) {
    formData.append("files", files[i]);
  }

  var mdl = {};
    mdl.FirstName = 'Title';
    mdl.LastName = 'Short Description';
    mdl.Attachments = formData;

  $.ajax({
    cache: false,
    type: 'Post',           
    contentType: 'application/json',
    data: JSON.stringify(mdl),
    url: fnApiRequestUri('api/Customer/AddTicket'),
    success: function (xhr, ajaxOptions, thrownError) {
    }
  });
}
</script>

//C# code
[Route("AddTicket")]
[HttpPost]
[Authorize(Roles = MethodsAuthorization.AllRoles)]
public async Task<IActionResult> AddTicket(Model _model)
{
}

public class Model
{
  public string FirstName {get;set;}
  public string LastName {get;set;}
  public List<IFormFile> Attachments { get; set; }
}

I am getting following error the server responded with a status of 400 ()

I referred following question [1]: https://stackoverflow.com/a/49966788/9491935

You can't send as JSON and use FormData. FormData is only applicable for multipart/form-data encoded requests. Either send the FormData instance itself, or you need to read the file data using FileReader and then send it in the JSON as a Base64-encoded string. In the latter case, you'll have to bind to byte[] rather than IFormFile server-side, but the serializer will automatically take care of converting from Base64 string to byte[]. — Chris Pratt
– Chris Pratt, Commented Dec 20, 2019 at 15:42

Fei Han · Accepted Answer · 2019-12-23 08:29:24Z

3

working on ASP DOT NET core web api where I need to send multiple attachments

To achieve it, you can try to modify the code like below.

Js client

function fnADD() {
    var input = document.getElementById('file_TicketManageMent_AttachFile');
    var files = input.files;
    var formData = new FormData();

    for (var i = 0; i != files.length; i++) {
        formData.append("Attachments", files[i]);
    }

    formData.append("FirstName", 'Title');
    formData.append("LastName", 'Short Description');

    $.ajax({
        cache: false,
        type: 'Post',
        data: formData,
        url: '{your_url_here}',
        processData: false,
        contentType: false,
        success: function (xhr, ajaxOptions, thrownError) {

        }
    });
}

Controller action

[Route("AddTicket")]
[HttpPost]
[Authorize(Roles = MethodsAuthorization.AllRoles)]
public async Task<IActionResult> AddTicket([FromForm]Model _model)
{

    //code logic here

}

Test Result

answered Dec 23, 2019 at 8:29

Fei Han

28k1 gold badge35 silver badges47 bronze badges

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

2 Comments

Dave ت Maher Over a year ago

What is the type of "Model.Attachments"?

Kevin Dark Over a year ago

@DaveتMaher IFormFile

Uxmaan Ali · Accepted Answer · 2019-12-20 09:52:26Z

0

<input type="text" id="txt_firstName"  />
<input type="text" id="txt_lastName"  />
<input type="file" id="file_TicketManageMent_AttachFile" multiple  />
<input type="button" onclick="fnADD()"  />

<script>
function fnADD(){
       var input = document.getElementById('file_TicketManageMent_AttachFile');
       var files = fileList;
       var formData = new FormData();

       for (var i = 0; i != files.length; i++) {
          formData.append("files", files[i]);
       }

        formData.append("FirstName ", 'Title');
        formData.append("LastName ", 'Short Description');

     $.ajax({
            cache: false,
            type: 'Post',           
            data: formData,
            url: fnApiRequestUri('api/Customer/AddTicket'),
            processData: false,
            contentType: false,
            success: function (xhr, ajaxOptions, thrownError) {

            }
        });
}
</script>

//C# code
[Route("AddTicket")]
[HttpPost]
[Authorize(Roles = MethodsAuthorization.AllRoles)]
public async Task<IActionResult> AddTicket(Model _model)
{
     var files = Request.Form.Files;
     foreach(var item in files)
     {
        var file = item;
        if (file != null)
        {
            var fileName = file.FileName;
            if (System.IO.File.Exists(path + fileName))
            {
                fileName = $"{DateTime.Now.ToString("ddMMyyyyHHmmssfff")}-{fileName}";
            }
            using (var fileStream = new FileStream(path + fileName, FileMode.Create))
            {
                await file.CopyToAsync(fileStream);
            }
            reg.Picture = fileName;
        }
     }

}

public class Model
{
    public string FirstName {get;set;}
    public string LastName {get;set;}
    public List<IFormFile> Attachments { get; set; }
}

answered Dec 20, 2019 at 9:52

Uxmaan Ali

3491 silver badge16 bronze badges

4 Comments

Uxmaan Ali Over a year ago

You need to send form data to server. And then on the server you will get collection of files. And then save them as you want.

Sagar Patil Over a year ago

Thank you for your response. I am getting 415 status code error.

Uxmaan Ali Over a year ago

Remove public List<IFormFile> Attachments { get; set; } from model

Sagar Patil Over a year ago

Still same problem

Collectives™ on Stack Overflow

How to achieve File upload using WEB API Dot net core?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related