Problem sending attachment information in JS function to C# method

Question

I have a problem with sending an attachment in a JavaScript function to a C# method. When I want to send the information to the method that is supposed to save the information about the attachment, I get a problem with inllegal invocation. below is the code from JavaScript

 <div class="file-input-container">
        <label for="fileInput" class="file-label">Wybierz załącznik</label>
        <br />
        <input type="file" id="fileInput" class="file-input" name="file" />
        
    </div>

    <ul id="attachment-list"></ul>
    <hr />
    <script>
        const fileInput = document.getElementById('fileInput');
        const attachmentList = document.getElementById('attachment-list');
        let selectedAttachments = [];

        fileInput.addEventListener('change', handleFileUpload);

        function handleFileUpload(event) {
            const file = event.target.files[0];
            const fileName = file.name;
            const fileType = file.type;

            const reader = new FileReader();
            reader.onload = (e) => {
                const fileContent = new Uint8Array(e.target.result);
                const attachment = {
                    name: fileName,
                    content: fileContent,
                    type: file.type
                };
                selectedAttachments.push(attachment);
                saveAttachmentsToServer(selectedAttachments);
            };
            reader.readAsArrayBuffer(file);


            const listItem = document.createElement('li');
            listItem.classList.add('attachment-item');

            const attachmentName = document.createElement('span');
            attachmentName.classList.add('attachment-name');
            attachmentName.textContent = fileName;

            const attachmentDelete = document.createElement('span');
            attachmentDelete.classList.add('attachment-delete');
            attachmentDelete.addEventListener('click', () => {
                listItem.remove();
            });

            listItem.setAttribute('data-name', fileName);
            listItem.setAttribute('data-type', file.type);

            listItem.appendChild(attachmentName);
            listItem.appendChild(attachmentDelete);
            attachmentList.appendChild(listItem);
         

            event.target.value = '';
        }
        function saveAttachmentsToServer(attachments) {
            const formData = new FormData();
            formData.append('attachments', JSON.stringify(attachments));

            $.ajax({
                url: "?handler=SaveAttachments=" ,
                data: formData,
                success: function () {
                    console.log('Załączniki zapisane');
                },
                error: function (error) {
                    console.error('Wystąpił błąd podczas zapisu załączników', error);
                }
            });
        }
    </script>

and this is the C# method

   public async Task<IActionResult> OnPostSaveAttachments(List<AttachmentData> attachments)
        {
            try
            {
                foreach (var attachmentData in attachments)
                {
                    var attachmentContent = attachmentData.Content;
                    if (attachmentContent != null && attachmentContent.Length > 0)
                    {
                        string attachmentName = attachmentData.Name;
                        string attachmentType = attachmentData.Type;

                        string blobName = Guid.NewGuid().ToString();

                        BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);
                        BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName);
                        BlobClient blobClient = containerClient.GetBlobClient(blobName);

                        await blobClient.UploadAsync(attachmentContent, overwrite: true);

                        // Zapisz informacje o załączniku w bazie danych lub innym miejscu, np. na podstawie identyfikatora

                        Console.WriteLine("Załącznik zapisany: " + attachmentName);
                    }
                    else
                    {
                        Console.WriteLine("Błąd: Brak zawartości załącznika.");
                    }
                }

                return Page();
            }
            catch (Exception ex)
            {
                Console.WriteLine("Błąd: " + ex.Message);
                return BadRequest("Wystąpił błąd podczas zapisywania załączników.");
            }
        }
    }

        public class AttachmentData
    {
        public string Name { get; set; }
        public Stream Content { get; set; }
        public string Type { get; set; }
    }

Even when I improve the code so that it is successfully uploaded it is still a problem that in the attachmetn method is count =0. how can this be fixed? The whole project is created in ASP.Net

Answer 1

I think the problem is in this part. Because you are sending string from the JS, but in C# you are expecting a list.

 const formData = new FormData();
            formData.append('attachments', JSON.stringify(attachments));

Try changing it to the below code.

  for (let i = 0; i < attachments.length; i++) {
    const attachment = attachments[i];
    formData.append('attachments[' + i + '].Name', attachment.name);
    formData.append('attachments[' + i + '].Content', attachment.content);
    formData.append('attachments[' + i + '].Type', attachment.type);
  }