触发 onactivatefile 时向预览图像添加图标/div (Filepond)

背景：我有一个 django 项目，用户可以上传多个图像，其中一个将是主图像。我正在使用 Filepond 上传和优化图像。

Filepond 上传文件的顺序并不总是与用户选择的文件的顺序相同。因此，我尝试为用户提供一个选项，用户单击文件（在本例中，显示为预览图像），并且单击的文件将成为主图像。

我使用以下代码将用户单击的图像记录为服务器端的主图像，并且它有效。

onactivatefile: (file) => {

    filename = file.filename;

    $.ajax({
        type: "POST",
        url: "{% url 'ajax_mainimage' pk=sellingitem.pk %}",
        data: {pk:"{{sellingitem.pk}}", 'filename':filename, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: "json",
    }); 
}, 

问题：为了给用户提供更好的体验，我尝试实现以下目标：当用户单击其中一张预览图像（例如图像 A）时，图像 A 中会显示文本（“这是您的主图像”）或图标.我该如何做这个或类似的事情？谢谢！

EDIT

我使用以下代码暂时解决了这个问题，但这不是最佳的。基本上，我生成了单击图像的缩略图以向用户显示。

onactivatefile: (file) => {
    filename = file.filename;

    // get the div that will contain mainimage 
    const img = document.getElementById('insert_mainimage')

    // set src of img
    img.src = '../../media/post_images/' + {{sellingitem.pk}} +'/' + filename;

    $.ajax({
        type: "POST",
        url: "{% url 'ajax_mainimage' pk=sellingitem.pk %}",
        data: {pk:"{{sellingitem.pk}}", 'filename':filename, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: "json",
    }); 
}, 

仍在寻求帮助：我真正想要的是，单击图像（由 filepond 图像预览插件渲染）后，图标/文本将显示在该特定图像上。或者，每个上传的图像上都会显示一个图标，单击后，图标会以某种方式发生变化，表明该图像已被选择为主图像。

我正在做同样的工作。

尝试这个代码

      onactivatefile={(e) => {
          const getEl = document.querySelectorAll('.filepond--file-info-main');
          for (let i = 0; i < getEl.length; i++) {
            if(getEl[i].innerText === e.file.name){
                getEl[i].style.backgroundColor = "red";
            }else{
                getEl[i].removeAttribute("style");
            } 
          }
      }}