добавить иконку / div к изображениям предварительного просмотра при запуске onactivatefile (Filepond) - PullRequest
Новая
       7

добавить иконку / div к изображениям предварительного просмотра при запуске onactivatefile (Filepond)

1 голос
/ 11 ноября 2019

Фон: У меня есть проект 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, текст («это ваше основное изображение») или значок появляется на изображении А. Как я могу сделать это или что-то подобное? Спасибо!

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 = 'http://127.0.0.1:8000/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",
    }); 
},

Все еще обращаюсь за помощью: Что я действительно хочу, так это то, что после нажатия на изображение на этом конкретном изображении появится значок / текст. Любая помощь?

...