cant send an array of js via formdata to controller(my viewmodel wont bind to it)

my function i can send everything including pictures too but this array i cant send it. the logic is this via this i wannna know how manny images he removed or if the user changeed the main image from the preloaded ones so i can update those too

  <script>
         let featureCounter = @(Model.Features?.Count() ?? 0);
         let uploadedImages = []; // { id, url, file?, isMain }
    
         const pictures = @Html.Raw(Json.Serialize(ViewBag.Pictures ?? new List<string>()));


 </script>
 <script src="~/js/product/porduct-form.js"></script>
 
          <script>
     function UpdateProduct() {

         let data = new FormData();

         // Append basic product fields
         data.append('Id', $("#Id").val());
         data.append('Name', $("#Name").val());
         data.append('Description', $("#Description").val());
         data.append('HowToUse', $("#HowToUse").val());
         data.append('Price', $("#Price").val());
         data.append('Stock', $("#Stock").val());
         data.append('BrandId', $("#BrandId").val());
         data.append('CategoryId', $("#CategoryId").val());
         data.append("ExistingProductPicturesJson", JSON.stringify(uploadedImages));



                 // Append dynamic features
         $("[name^='Features']").each(function () {
             data.append($(this).attr("name"), $(this).val());
         });

         // Append uploaded files (correct ID)
         const productImages = document.getElementById("productImages");
         if (productImages && productImages.files.length > 0) {
             for (let i = 0; i < productImages.files.length; i++) {
                 data.append("Pictures", productImages.files[i]);
             }
         }

         $.ajax({
             url: '@Url.Action("UpdateProduct", "Product", new { area = "Admin" })',
             type: "POST",
             data: data,
             processData: false,
             contentType: false,
             success: function (data) {
                 if (data.isSuccess) {
                     swal.fire('موفق!', data.message, 'success')
                         .then(() => location.reload());
                 } else {
                     swal.fire('هشدار!', data.message, 'warning');
                 }
             },
             error: function (request) {
                 alert(request.responseText);
             }
         });
     }

 </script>

my js file which fills the preloaded imagesa here

document.addEventListener('DOMContentLoaded', function () {
    try {
        preloadImagesFromServer();
    } catch (error) {
        console.error('Add product page error:', error);
    }
});

// ---------- Preload Images ----------
function preloadImagesFromServer() {
    const preview = document.getElementById('imagesPreview');
    if (!preview) return;

    uploadedImages = []; // reset before preloading
    preview.innerHTML = '';

    const mainPic = "@ViewBag.Main"; // optional main pic from server

    pictures.forEach((url, index) => {
        const isMain = url === mainPic || (!uploadedImages.some(img => img.isMain) && index === 0);
        uploadedImages.push({ id: index, url: url, isMain: isMain });

        const imageItem = document.createElement('div');
        imageItem.className = 'image-preview-item';
        imageItem.id = `image-${index}`;
        imageItem.innerHTML = `
            <img src="${url}" alt="تصویر ${index + 1}">
            <button type="button" class="remove-btn" onclick="removeImage(${index})">×</button>
            <button type="button" class="btn btn-sm" style="
                position: absolute; bottom: 5px; left: 5px; 
                background: ${isMain ? '#8bc34a' : 'rgba(255,255,255,0.9)'}; 
                color: ${isMain ? 'white' : '#666'}; 
                border: none; border-radius: 8px; 
                padding: 3px 8px; font-size: 11px;" 
                onclick="setMainImage(${index})">
                ${isMain ? '✓ اصلی' : 'انتخاب اصلی'}
            </button>
        `;
        preview.appendChild(imageItem);
    });

    // Ensure one image is main
    if (!uploadedImages.some(img => img.isMain) && uploadedImages.length > 0) {
        setMainImage(uploadedImages[0].id);
    }
}

my viewmodel

namespace PetPaw.EndPoint.Areas.Admin.Models.ViewModels.Product
{
    public class NewProductViewModel
    {
        public long Id { get; set; }
        public string Name { get; set; }
        public string? Description { get; set; }
        public string? HowToUse { get; set; }
        public decimal Price { get; set; }
        public int Stock { get; set; }
        public long CategoryId { get; set; }
        public long BrandId { get; set; }
        public long AnimalId { get; set; }

        public bool IsActive { get; set; }
        public int MainPictureIndex { get; set; }
        public List<ExistingProductPicture> ExistingProductPictures { get; set; } = new List<ExistingProductPicture>();

        public List<IFormFile> Pictures { get; set; }=new List<IFormFile>();
        public List<FeatureViewModel> Features { get; set; }=new List<FeatureViewModel>();
    }
    public class ExistingProductPicture
    {
        public long id { get; set; }
        public string url { get; set; }
        public bool isMain { get; set; }
    }
   
}