415 Unsupported Media Type Error When Posting Data to Highlight Tab

I am working on a functionality that moves data from the Catalogue tab to the Description, Cart, and Highlight tabs in my application. The data is successfully copied from Catalogue to Cart and Description, but when I attempt to copy it to Highlight, I encounter a 415 Unsupported Media Type error.

Here are the relevant parts of my code:

Frontend Code:

const handleApplyButton = async () => {
  const updatedDescriptions = [];
  const updatedCarts = [];
  const updatedHighlights = [];

  const formatTime = (deciseconds) => {
    const totalSeconds = deciseconds / 10;
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = (totalSeconds % 60).toFixed(1);
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(4, '0')}`;
  };


  catalogueData.forEach((row) => {
    const selectedFields = selectedRows[row.id];
    const startTime = !isNaN(row.startTime) ? formatTime(row.startTime) : row.startTime;
    const endTime = !isNaN(row.endTime) ? formatTime(row.endTime) : row.endTime;

    if (selectedFields?.description) {
      const dataToCopy = {
        name: row.description,
        start_time: startTime,
        end_time: endTime,
        x_coordinate: row.x,
        y_coordinate: row.y,
        photo: row.photo || "https://via.placeholder.com/50",
        description: row.description || "Product's Description",
        video_id: id,
        link: row.link || "default_link",
        user_id: cookies.auid,
      };
      updatedDescriptions.push(dataToCopy);
      console.log("Copying to Description:", dataToCopy);
    }
    if (selectedFields?.cart) {
      const dataToCopy = {
        id: uuidv4(),
        name: row.description,
        start_time: startTime,
        end_time: endTime,
        x_coordinate: row.x,
        y_coordinate: row.y,
        photo: row.photo || "https://via.placeholder.com/50",
        link: row.link || "default_link",
        product_cta: row.product_cta || "Buy Now",
        video_id: id, 
        price: row.price || 0,
      };
      updatedCarts.push(dataToCopy);
      console.log("Copying to Cart:", dataToCopy);
    }
    if (selectedFields?.highlight) {
      const dataToCopy = {
        name: row.description,
        start_time: startTime,
        end_time: endTime,
        x_coordinate: row.x,
        y_coordinate: row.y,
        video_id: id,
        link: row.link || "default_link",
        user_id: cookies.auid,
      };
      updatedHighlights.push(dataToCopy);
      console.log("Copying to Highlight:", dataToCopy);
    }
  });

  console.log('Updated Descriptions:', updatedDescriptions);
  console.log('Updated Carts:', updatedCarts);
  console.log('Updated Highlights:', updatedHighlights);

  try {
    for (const description of updatedDescriptions) {
      const res = await postFormData('VideoProduct/addProductDescription', description, {}, cookies.t);
      console.log('Updated Description Data:', description);
    }

    for (const cart of updatedCarts) {
      const res = await postFormData('VideoProduct/addProductCard', cart, {}, cookies.t);
      console.log('Updated Cart Data:', cart);
    }

    for (const highlight of updatedHighlights) {
      console.log("Sending highlight data:", highlight);
      const res = await postFormData('VideoProduct/addProductHighlight', highlight, {}, cookies.t);
      console.log('Response from API for Highlight:', res);
      console.log('Updated Highlight Data:', highlight);
    }

    console.log('Data successfully copied and saved to the server.');
  } catch (error) {
    console.error('Error saving data:', error);
  }
};

postFormData method:

export const postFormData = async (endpoint, data, params, token) => {
  try {
    console.log("POST Request Details:", { endpoint, data, params, token });
    const response = await instance.post(endpoint, data, {
      params,
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "multipart/form-data",
      },
    });
    console.log("POST Response:", response.data);
    return response.data;
  } catch (error) {
    console.error("Error posting data:", error);
    throw error;
  }
};

**Backend Method**:

[Authorize]
[HttpPost("addProductHighlight")]
public async Task<ActionResult> AddHighlight(AddProductHighlight request)
{
    try
    {
        var addHiglight = await _productService.AddHighlight(request);
        return Ok(addHiglight);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, ProductConstant.FailedToAddHighlight);
        return StatusCode(500, ex);
    }
}

public class AddProductHighlight
{
    public string? name { get; set; }
    public Guid video_id { get; set; }
    public string? start_time { get; set; }  // in seconds
    public string? end_time { get; set; }
    public double? x_coordinate { get; set; }
    public double? y_coordinate { get; set; }
    public Guid? user_id { get; set; }
    public string? link { get; set; }

}

Here is the screenshot of console output if it helps: Console Output

What I’ve tried:

• Verified that the data structure matches the expected DTO in the backend.
• Ensured that the request headers include the Content-Type: multipart/form-data.
• Checked the API endpoint and method signatures.

Any help or guidance would be greatly appreciated. Thank you!