Django - Как захватить и записать выбранные изображения

Question

Я пытаюсь отфильтровать неподходящие изображения, используя визуальный интерфейс. Неподходящие изображения являются субъективными, поэтому я хочу, чтобы пользователь выбирал только подходящие изображения (выбирая несколько одновременно) и нажимал 'Fini sh' после завершения выбора. Входные данные пользователя должны храниться в базе данных, подобной этой:

user_x = image1, image2, image4 ......
user_y = image6, image2, image3 ......
.
.

Вот как это выглядит в настоящее время: Фильтрация изображений

Я - полный новичок в Django и я не уверен, как это сделать. Любая помощь будет принята с благодарностью.

---

filter. html (Шаблон для отображения изображений)

   <div class="container-fluid my-container">

        {% filter_images_normal 3 as images %}

        <div class="row no-pad display-flex  my-row">
            {% for image in images %}
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                    <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{ image }}">
                </div>
            {% endfor %}
        </div>

        <button type="button" class="btn btn-primary btn-lg btn-block">Finish</button>
    </div>

filter_images.py (тег шаблона для выбора отдельных случайных изображений из папки)

@register.simple_tag
def filter_images_normal(count=3):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_filter/images/normal/'
    path = '/app_filter/static/app_filter/images/normal/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    # print(random.sample(files, count))
    print(rand_dir)
    return [rand_dir + filename for filename in random.sample(files, count)]

models.py

class Normal(models.Model):
    appropriate_images_normal = models.TextField(max_length=30)

views.py

def pickfeel_filter_normal(request):
    return render(request, "app_filter/filter-normal.html")

Answer 1

Единственный способ сделать это удобным для пользователя способом - использовать javascript:

• на стороне Django, это простой Form с MultipleChoiceField, где выбор необходимо отразить изображения, которые вы показываете своему пользователю. Значения должны быть уникально идентифицируемыми значениями, чтобы вы знали, какое изображение было выбрано, и сопоставили его с реальным файлом.
• Создайте варианты для изображений в вашем представлении (не используя тег шаблона) и передайте изображения в вашем контексте и в качестве выбора для вашего поля формы.
• В вашем шаблоне визуализируйте это поле формы как скрытое. Это будет поле <select> с множественным значением true. Кроме того, визуализируйте изображения, используя тег <img> вместо тега <input>.
• Используя javascript, определяйте, когда пользователь нажимает на любое из изображений, и выполняйте две вещи: 1. переключайте индикатор выбора для отображения пользователю, выбрано ли изображение или нет. 2. Добавьте / удалите изображение из выбранных опций <select>.

Таким образом, при отправке формы единственное поле, которое имеет значение, будет скрытым полем, заполненным вами javascript. Если поле в вашей форме называется image_selection, тогда form.cleaned_data['image_selection'] будет автоматически выбранным списком изображений.