Upload multiple files with Ajax call [xhr] and send extra variable

Question

I managed to send multiple documents to my controller using the following ajax call:

var fileData = new FormData();

            for (var i = 0; i < files.length; i++) {
                fileData.append("UploadDocumentsInput", files[i]);
            }

            $.ajax({
                type: "POST",
                url: "/LegalEntity/UploadFiles",
                async: false,
                dataType: "json",
                contentType: false, // Not to set any content header
                processData: true, // Not to process data
                data: fileData,
                success: function (result, status, xhr) {
                },
                error: function (xhr, status, error) {
                    documentSuccess = false;
                }
            });

and in the controller, I receive them this way:

 [HttpPost]
        public JsonResult UploadFiles()
        {
            var listOfDocs = new List<UploadedFile>();
            HttpFileCollectionBase files = Request.Files;

            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFileBase file = files[i];

                var inputStream = file.InputStream;
                var inputStreamLength = Convert.ToInt32(inputStream.Length);
                byte[] streamArray = new byte[inputStreamLength];
                var strRead = inputStream.Read(streamArray, 0, inputStreamLength);

                var docObject = new UploadedFile()
                {
                    Attachment = streamArray,
                    FileName = file.FileName,
                };

                listOfDocs.Add(docObject);
            }

            _personService.SaveDocs(listOfDocs);
            return Json(files.Count + " Files Uploaded!");
        }

But also, I will need to send from my view an ID. I have tried to include it into the data: field and receive it as argument into my method but this doesnt seem to be working.

Every help will be much appreciated.

Either use `append()` to manually add the content of the necessary input elements to the FormData object, or provide a reference to the `form` element to the `FormData()` constructor. The latter will add all input and binary file data to the FormData object for you, and is by far the simplest way to achieve what you need — Rory McCrossan, Feb 28 '22 at 16:26
Hi Rory, thank you for your help. I have tried to add the ID with .append this way 'fileData.append("Id", id);' but when I retrieve the files ('HttpFileCollectionBase files = Request.Files;') I can't see it in the list. What am I doing wrong? — Chris Tsag, Feb 28 '22 at 16:38
How are you setting the `id` value in the JS? Are you sure the value is set correctly? How are you reading that value on the server side? — Rory McCrossan, Feb 28 '22 at 16:40
I am setting ID var manually for testing purposes and I can see it on my console.log(id) set up correctly. On server side to retrieve the documents (which are send correctly) I just do: HttpFileCollectionBase files = Request.Files; But the ID that I appended before doesn't appear. only the files. — Chris Tsag, Feb 28 '22 at 16:54
You need to specifically request the `id` value from the posted data - it won't be included in the `Request.Files` collection. — Rory McCrossan, Feb 28 '22 at 17:05

Upload multiple files with Ajax call [xhr] and send extra variable

0 Answers0