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

Question

背景: 我有一个 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，一段文字(“这是你的主要image") 或图标出现在图像 A 中。我该怎么做或做类似的事情？谢谢!

编辑

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

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 图像预览插件呈现)后，一个图标/文本将显示在该特定图像上。或者，每个上传的图像上都会显示一个图标，单击后，图标会以某种方式发生变化，表明该图像已被选为主图像。

Answer 1

我在做同样的工作。

试试这段代码

      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");
            } 
          }
      }}