ARTICLE AD BOX
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; } } }