Multiple File upload but it comes null

Question

i create a form where i upload data also upload files or images. i create it in asp.net core mvc and using ado.net to upload into database. But i found error when i post the form image property remains null i don'nt know why.

Controller:

 public IActionResult aprent([Bind] RentModel ar)
        
        {
            
            try
            {
                
                if (ModelState.IsValid)
                {
                    if(ar.imge1 != null && ar.imge1.Count>0)
            {
                        string folder = "image/";
                        foreach (IFormFile imge in ar.imge1)
                        {
                            folder += Guid.NewGuid().ToString() + "_" + imge.FileName;




                            ar.pic1 = "/" + folder;

                            string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                            imge.CopyTo(new FileStream(serverFolder, FileMode.Create));
                        }

                    }
                    string res = DB.Saverecord(ar);
                    string pics = DB.imagedb(ar);

                    

                    
                    TempData["msg"] = res;
                }
            }
            catch (Exception ex)
            {
                TempData["msg"] = ex.Message;
            }
            return View();
        }

model:

    public string? pic1 { get; set; }


    public IList<IFormFile>? imge1 { get; set; }

model where i have sql query:

public string imagedb(RentModel img)
        {
            try
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("INSERT INTO img(pic1) VALUES(@pic1)", con);

                cmd.Parameters.AddWithValue("@pic1", img.pic1);
                


                cmd.ExecuteNonQuery();
                con.Close();
                return "ok";
            }
            catch (Exception ex)
            {
                if (con.State == ConnectionState.Open)
                {
                    con.Close();
                }
                return ex.Message.ToString();
            }
        }

View:

<div>
   <input  type="file" class="filepond"asp-for="imge1" name="imge1">
</div>
  <script>
        $(document).ready(function (e) {
            pond = FilePond.create(
                document.querySelector('.filepond'), {
                allowMultiple: true,
                instantUpload: false,
                allowProcess: false
            });

            $(".complete-form").submit(function (e) {
                e.preventDefault();
                var formdata = new FormData(this);
                // append FilePond files into the form data
                pondFiles = pond.getFiles();
                for (var i = 0; i < pondFiles.length; i++) {
                    // append the blob file
                    formdata.append('photos', pondFiles[i].file);
                }

                $.ajax({
                    url: "https://localhost:7262/AddPropertyRentController1/aprent",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    method: "post"
                });

            })
        });
    </script>

I also have some other data which i uload through this form. When i tried this public IActionResult aprent([Bind] RentModel ar,IFormFile img) then it gives data in the img But i dont know how to use this img in this code

Answer 1

But i found error when i post the form image property remains null i don'nt know why.

If you want to pass multiple files to action with ajax,here is a demo:

<form>
    <input type="file" multiple id="files" />
    <input type="button" onclick="postfiles()" value="submit" />
</form>

js:

function postfiles() {
            //e.preventDefault();
            var formdata = new FormData();
            // append FilePond files into the form data
            pondFiles = $("#files").get(0).files;
            for (var i = 0; i < pondFiles.length; i++) {
                // append the blob file
                formdata.append('imge1', pondFiles[i]);
            }
            $.ajax({
                url: 'postfiles',
                data: formdata,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data) {
                    //
                }
            });

        };

action:

public void postfiles(RentModel r)
        { 
        
        }

result: