AJAX send form with data and multiple image to asp.net mvc action

Question

It has been like two days. I have been searching on the web, but I cant figure out the solution.

I have some input fields, where I can Insert text and select images. They are variable, that means if you want more fields to add more products you can click on "+" and I add another field set.

When I click on "Salva e Prosegui" and pass all the data to my ASP.MVC action in the controller.

I tried different ways but I'm not able to pass the images.

HTML:

<div class="fields-container">
     <div class="row">
          <div class="col-md-2">
               <input type="text" name="nomecolore" placeholder="Nome Colore" class="form-control" />
         </div>
         <div class="col-md-1">
               <input type="text" name="codicecolore" placeholder="Codice Colore" class="form-control" />
         </div>
         <div class="col-md-4">
               <input type="file" name="filefronte" class="form-control filestyle" data-text="Foto Fronte" data-btnClass="btn-primary form-control" data-buttonBefore="true">
         </div>
         <div class="col-md-4">
               <input type="file" name="fileretro" class="form-control filestyle" data-text="Foto Retro" data-btnClass="btn-primary form-control" data-buttonBefore="true">
        </div>
        <div class="col-md-1">
              <button class="btn btn-success add-more form-control" type="button"><i class="glyphicon glyphicon-plus"></i></button>
         </div>
   </div>

JS:

$('#step-2-next').click(function () {
    var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
    var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
    var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
    var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
    var ID_Prodotto = "1";            

    for (i = 0; i < ListaNomiColori.length; i++) {
         var formData = new FormData();
         var nome = ListaNomiColori[i].value;
         var codice = ListaCodiciColori[i].value;
         var fronte = ListaImmaginiFronte[i].files[0];
         var retro = ListaImmaginiRetro[i].files[0];

         formData.append("NomeColore", nome);
         formData.append("CodiceColore", codice);
         formData.append("Foto", fronte);
         formData.append("Foto", retro);
         formData.append("ID_Prodotto", ID_Prodotto);

         $.ajax({
             url: _NuovoProdottoCaricaModelli,
             data: formData,``
             processData: false,
             contentType: false,
             success: function (res) {
                  alert('succes!!');
             },
             error: function (res) {
                  alert("errror");
             }
       })
   }
});

Controller:

public JsonResult NuovoProdottoCaricaModelli(FormCollection form)
{
      ////code here
}

My logic is: I get how many field sets I have and for each one I get the value and call the server for the upload. For each field set I have 2 text input, 2 file input. I also have to pass the ID to a third text field.

Thank you in advance.

In a recent project I have used Dropzone.js to do that. It works and looks fine. Also you don't need to have multiple file upload controls. — Daniel Manta
– Daniel Manta, Commented Sep 2, 2017 at 19:40
thanks but I think this does not help me with the pass of data and images to the controller. I really stuck — scotch
– scotch, Commented Sep 3, 2017 at 18:26
Your Ajax call should be sending the files by POST not GET, which is the default. In the controller action you need add [HttpPost] to the header (before "public"). To get the uploaded files in your action method use Request.Files. Don't need to declare Request. — Daniel Manta
– Daniel Manta, Commented Sep 3, 2017 at 19:51
thanks to your help. I found the way. I'm going to post the solution. — scotch
– scotch, Commented Sep 3, 2017 at 20:12

scotch · Accepted Answer · 2017-09-03 20:15:32Z

Thanks to darloopkat. I found a way to do that.

Here below my edits:

js:

$('#step-2-next').click(function () {

            var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
            var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
            var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
            var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
            var ID_Prodotto = "1";            

            for (i = 0; i < ListaNomiColori.length; i++) {

                var formData = new FormData();

                var nome = ListaNomiColori[i].value;
                var codice = ListaCodiciColori[i].value;
                var fronte = ListaImmaginiFronte[i].files[0];
                var retro = ListaImmaginiRetro[i].files[0];

                formData.append("NomeColore", nome);
                formData.append("CodiceColore", codice);
                formData.append("Foto", fronte);
                formData.append("Foto", retro);
                formData.append("ID_Prodotto", ID_Prodotto);

                $.ajax({
                    url: _NuovoProdottoCaricaModelli,
                    data: formData,
                    type: "POST",
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        alert('succes!!');
                    },
                    error: function (res) {
                        alert("errror");
                    }
                })
            }
        });

mvc action:

[HttpPost]
        public ActionResult NuovoProdottoCaricaModelli()
        {
            string Nome = Request["NomeColore"];
            string CodiceColore = Request["NomeColore"];
            var Fronte = Request.Files[0];
            var NomeFronte = Path.GetFileName(Fronte.FileName);
            var Retro = Request.Files[1];
            var NomeRetro = Path.GetFileName(Retro.FileName);


            return Json("");
        }

Collectives™ on Stack Overflow

AJAX send form with data and multiple image to asp.net mvc action

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related