Ajax how to pass array it has file list (.NET CORE / AJAX / JQUERY)

Question

I have a array in jquery. And i have a file list in view. I want to put this file list into my array and pass my controller/action I find some ways but dont work. there is my jquery

var Data = new FormData();
        $('input[data-fileid=1]').each(function () {
            var FileData = $(this).get(0).files[0];
            Data.append("Attachments", FileData);
        });
        var arr = {
            Code: "examplecode",
            Id: 1
            FileList: Data
        };
        $.ajax({
            data: JSON.stringify(arr),
            url: '/Panel/PD',
            datatype: 'json',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
        });```

and I don't know how to keep this data in class.

I can not follow you. Can you explain it more detailed. Why are you using $('input[data-fileid=1]').each you have only one element. Can you post the html. — Bernhard Beatus, Mar 31 '21 at 17:43
it doesn't matter. I can receive files, but I don't know how to send them. I want to embed it in the class. — Berkay Şimşek, Mar 31 '21 at 17:54

score 0 · Answer 1 · answered Mar 31 '21 at 18:21

When sending binary file data in an AJAX request you cannot send data as a serialised string. It needs to be contained within a FormData object.

From there, you need to set the contentType and processData to false within the $.ajax() settings so that jQuery doesn't attempt to change the request content or the content-type header. Try this:

var Data = new FormData();
Data.append('Code', 'examplecode');
Data.append('Id', 1);

$('input[data-fileid=1]').each(function() {
  var FileData = $(this).get(0).files[0];
  Data.append("Attachments", FileData);
});

$.ajax({
  url: '/Panel/PD',
  type: 'POST',
  data: Data,
  contentType: false,
  processData: false, 
  success: response => {
    console.log('handle the response here...');
  }
});

On the server side you can use the Request.Files collection to iterate through the file data in the request as normal - assuming you haven't extended the default ModelBinder to receive binary data.

Also note that a simpler way to build the FormData object is to pass a reference to the form element to the constructor. All data within the controls of the form will then be appended to the object. If you want to append custom data to this, use hidden input controls within the HTML.

var data = new FormData($('#myForm')[0]);

This avoids the need to manually append() any magic strings in your JS logic.

Thank you for the answer. So how am I going to keep this "Attachments" on the controller side? — Berkay Şimşek, Mar 31 '21 at 18:30
You don't need to; use `Request.Files` and iterate through it. If you need to retain the original filename it can be read from `Requets.Files[i].FileName` — Rory McCrossan, Mar 31 '21 at 18:33
An example which may help is here: https://stackoverflow.com/a/37762290/519413 — Rory McCrossan, Mar 31 '21 at 18:35
I have to send a series of content in addition to the file. As far as I understand it is just to send files that you wrote. — Berkay Şimşek, Mar 31 '21 at 18:44
The answer I linked to does yes, however you can see in the example above that I use `append()` to add additional data to the `FormData` object in the request — Rory McCrossan, Mar 31 '21 at 20:34

score -1 · Answer 2 · answered Mar 31 '21 at 18:10

So your ajax should send data that required in controller,

$.ajax({ 
            url: '/Panel/PD',
            datatype: 'json',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
      traditional: true, // required to send an array on controller
      data: { 'arrayOfValues': JSON.stringify(arr)} ,
      error: function() { console.log('lets track error here'); } // check if you get any error 

             
 });

Controlller will look like:

[HttpPost]
public void PD(List<string> arrayOfValues) //should get your files data here
{
    // do stuff here
}

Unfortunately you cannot send form data in a JSON formatted request. — Rory McCrossan, Mar 31 '21 at 18:35

Ajax how to pass array it has file list (.NET CORE / AJAX / JQUERY)

2 Answers2