Send array of files from Jquery ajax to controller action

jquery sending file with ajax to mvc controller
uploading both data and files in one form using ajax mvc
how to pass array from view to controller in mvc
post array of objects to mvc controller
pass json array to mvc controller
jquery ajax pass array to controller
passing a list of objects into an mvc controller method using jquery ajax
how to pass model list from view to controller using ajax

I am able to pass single file as System.Web.HttpPostedFileBase but when i pass same as array of files i am getting null in controller's action.

I've tried sending array of files.

HTML:

        <input type="file" id="Attachment1">
        <input type="file" id="Attachment2">
        <input type="file" id="Attachment3">
        <input type="file" id="Attachment4">
        <input type="file" id="Attachment5">

Javascript:

 var FileData = []; 
 $('input').each(function () {
                var type = $(this).attr("type");
                if (type == "file") {
                    FileData.push($(this).get(0).files[0]);
                }
            });    
var Data = new FormData();
Data.append("Attachments", FileData);         
if (url != '') {
    $.ajax({
        url: url,
        data: Data,
        type: "POST",
        contentType: false,
        processData: false,
        success: function (data) {
            alert("Saved successfully");
        }
    });
}

Controller:

public ActionResult InsertDetails(System.Web.HttpPostedFileBase[] Attachments)
{
   return Json(new { Success = false });
}

Need to get array of files. Thanks in advance.

Thanks for the effort guys. I found the solution. I just need to keep append files for same key "Attachments". Now i am able to get as array of HttpPostedFileBase.

 var Data = new FormData();
 $('input').each(function () {
                var type = $(this).attr("type");
                if (type == "file") {
                    var FileData = $(this).get(0).files[0]);
                    Data.append("Attachments", FileData); 
                }
            });    

How do I post array to MVC controller action by JQuery in JSON format, Hide Expand Copy Code. var name = "Kishan"; var marks = 76; var employees = [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna"� I am able to pass single file as System.Web.HttpPostedFileBase but when i pass same as array of files i am getting null in controller's action. I've tried sending array of files.

Try It:

    var Files = new FormData();    

         $('input').each(function () {
         var type = $(this).attr("type");
          if (type == "file") {
Files .append("Attachment"+$(this).attr("id"), $(this).get(0).files[0]);   
                        }
                    });    

        if (url != '') {
            $.ajax({
                url: url,
                data: Files ,
                type: "POST",
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("Saved successfully");
                }
            });
        }

Pass (Send) List of objects from View to Controller using jQuery , Download Free Files API Inside this Action method, the JSON array of Customers records is received as Generic List Collection of The JSON array is then sent to the Controller using jQuery AJAX function and once the� Posting data to an MVC controller with jQuery. The easiest way to post data from a view to a controller action is by adding a form and submit button and letting most of the hard stuff happen automatically.

This is how I used to post array data from javascript to mvc controller, this is going to be a little bit lengthy but I've explained each line with comment, I hope this may help you

javascript:

var formData = new FormData(); //declare formData
var arrayData = []; //declare array and push/append your data to it.

var name="abc";
arrayData.push(name);

//setting ArrayData to Json Object
var AllData = {
            getUserData: arrayData
        };

//appending Json Object to formdata with the key "mydata"
formData.append("mydata", JSON.stringify(AllData));

//sending formdata through ajax request
$.ajax({
      type: "POST",
      url: yourURLHere,
      processData: false,
      contentType: false,
      data: formData,
      cache: false,
      success: function (data) {
            //your program logic here
      }
});


Controller:

public async Task<HttpResponseMessage> SaveResponse()
{

//receiving json data from the key "mydata" we set earlier 
var getData = HttpContext.Current.Request.Params["mydata"];

//deserialize json object (you will need Newtonsoft.Json library)
var model = JsonConvert.DeserializeObject<MyModel>(getData);

//you will get all of your data in model variable
//do what you want to do with that data

}

and here is the model class

public class MyModel
{
   //**dataList** will receive array data sent from javascript  
   public List<MyModel> dataList = new List<MyModel>();

   //Remember, whatever your push to array in javascript, should be declared here.
   public string name {get;set;}   

}

How to Upload Multiple files using jQuery AJAX in ASP.NET MVC, Moreover it is able to upload multiple files at the same time. There is also a jQuery Load method which is equally useful like the .ajax() method. jQuery AJAX Call to MVC Controller. We’ll begin simply, by creating a method in the controller to return the amount that’s in the swear jar. This will be a good way to see how simple data types are used in AJAX controller methods. Simple Data Types. In the SwearJar controller, add this method: public double GetAmount() { return 1.45; }

Multiple File Upload Using MVC jQuery AJAX Post, files in the list on the click of "Remove" button; On click of the Upload button, it will call the controller using jQuery AJAX POST method. <script>� I want to send an array to the controller using jquery. Continuous data is going on. I want to go to the controller as a list or as an array. Who can help me? This is my controller: [HttpPost] publ

how to pass array of values from jquery to controller in mvc3 razor , suppose if i have more than five values to send from jquery to controller method for save those values in db. for that how should i send values� The JSON array is then sent to the Controller using jQuery AJAX function and once the response is received it is displayed using JavaScript Alert Message Box.

JAVA: get array sent from ajax/jQuery - Get Started, How to send request parameter array to servlet using jQuery $.ajax? jquery, arrays var array = [ 1, 2, 3, 4 ]; var json = JSON.stringify(array); $.ajax({ url:" testArrFour.jsp", type:"POST", data: json, dataType:'json', Which is just a shortcut method for $.ajax in jQuery. url but just using standard path-to-file address… duh… As for this issue, you could use JQuery to find the file name/path from the drop areas, and push them into a string array, then use JQuery Ajax to send the name/path to the controller action method. In the action method, you could retrieve the file based on the file name/path and execute the delete function.

Comments
  • Should it be data:FileData instead?
  • post your html too
  • ps> if someone can simplify my logic, please do let me know, it would be much appreciated.