Mvc Pass multiple upload file to controller using jquery

mari muthu

hi,

i am trying to do passing multiple upload file to controller. but i am not getting the Exact answer can you please help me for this.

<form name='frmAccount' id='frmAccount'>
<input type='file' name='file1'/>
<input type='file' name='file2'/>
<input type='file' name='file3'/>
<input type='file' name='file4'/>
<input type='file' name='file5'/>
<input type='file' name='file6'/>
<input type='file' name='file7'/>
<input type='submit' name='submit' />
form>

public class ImageModel
{
public HttpPostedFileBase file1{get;set;}
public HttpPostedFileBase file2{get;set;}
public HttpPostedFileBase file3{get;set;}
public HttpPostedFileBase file4{get;set;}
public HttpPostedFileBase file5{get;set;}
public HttpPostedFileBase file6{get;set;}
public HttpPostedFileBase file7{get;set;}
}
var formData = new FormData($('#frmAccount')[0]);
$.ajax({
url: "@Url.Action("AddCustomer", "Example")",
type: "POST",
data: formData ,
dataType: 'json',
contentType: false,
processData: false,
success: function (data) {
}
},
error: function (xhr, desc, err) {
}
});
[HttpPost]
public ActionResult AddCustomer(ImageModel model)
{
//i want to get all the files Here.
}

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manav Pandya8y ago
Accepted answer
Hello

For that you need to map model property with values you got from javascript

Like : let's assume you have 2 model property Bill and DriverTripCopy

Now in controller you can pass Model with object like :
// Pass modelclass with its object

public string GetMYFiles(MyBillModel model)
{
     // Just need do actin as per your requirement
}
For e.g : Bill model property -> Bill propery value sent by Ajax call
Keep in mind you need to pass all files with Proper name same as model property contains :
// Pass this data as JSON , convert via JSON.parse

Var data = {
    Bill : files[0] , // For bill
    DriverBill : files[1]  // For Driver bill
}
Thanks
+1
Manav Pandya8y ago
Hello @mari

Well if you you want to upload more than 100 than this idea gonna work but , i would recommend to do not use this approach

Till now i have not uploaded more than 20 file at a time , thats why i cant give you wrong suggestions , just google it and ask any of your seniors about that

Thanks
+1
mari muthu8y ago
hi Thanks Manav thanks for spent your time now i got idea .

but i have one more doubt related to this suppose if i want to upload more than 100 files dynamically . for this scenario this idea will be work ...?
+1
mari muthu8y ago
yeahh yes i accept file will be listed . but that all files doestn't have the model property right it will have some unique name or id only this comes from where we mentioned in the input tag. then how can i pass the file to corresponding model property.

like,

Bill------> Bill.Png
DriverTripCopy---->DriverTripCopy.png
VCRDocument-->VCRDocument.png

......etc
+1
Manav Pandya8y ago
Hello

Yes even with single file upload you can get all the files listed there , than you can map each file to its model value where needed

Just get all files in controller and make sure you are getting every file you have posted

Thanks
+1
mari muthu8y ago
hi Thanks for reply pandya.

ya i hve used that scenario also its working fine but i just posted the sample code my actual requirement is

model Property- VCRDocument,Bill,ISAnySpeedCopy,DriverPhoto,DriverLicense,DriverInsurance,DriverTripCopy .

in controller i need to get each document for each model Property.that the reason i have used 7 inupt field in form.
+1
Manav Pandya8y ago
Hello

First of all , do not use multiple input control for file upload

Even you can use single input control for that as below :
// Use property multiple="multiple"

<input type="file" id="fileupload1" multiple="multiple"/>
Than you can get file using jquery/javascript code , and can use post request to controller
For complete reference you can refer few articles :

https://www.c-sharpcorner.com/article/uploading-multiple-files-in-asp-net-mvc/

https://www.codeproject.com/Tips/805195/Multiple-File-Upload-in-MVC

https://www.aspsnippets.com/Articles/Upload-multiple-files-using-HTML5-in-ASPNet-MVC.aspx

Try to understand mechanism and implement it

Thanks
+1