[Django] mutilimage, tag 넣은 글을 수정하기

tag

views.py에서 태그를 제대로 저장할 수 있도록 수정

@login_required
def update(request, article_pk):
    article = Article.objects.get(pk=article_pk)
    if request.user == article.user:
        if request.method == 'POST':
            form = ArticleForm(request.POST, instance=article)
            if form.is_valid(): 
                form.save()
                # 태그 부분을 비워준다
                article.tags.clear()
                # 초기태그를 ','씩 분리하여 다시 불러온다
                tags = request.POST.get('tags').split(',')
                # 태그를 하나씩 tags에 넣어준다.
                for tag in tags:
                    article.tags.add(tag.strip())
            
        else:
        	# 초기 태그를 불러온다(해당 article의 모든태그의 값을 ', '사이에 넣어서 불러온다
            initial_tags = ', '.join(article.tags.all().values_list('name', flat=True))
            form = ArticleForm(instance=article, initial={'tags': initial_tags})

    context = {
        'form': form,
        'article': article,
    }
    return render(request, 'articles/update.html', context)

 

multiimage

 

forms.py

이전에 업로드한 사진 중 맘에 안드는 사진을 지우기위한 폼을 생성

# 원하는 이미지를 삭제 폼 생성(체크박스를 이용한다)
class DeleteArticleImageForm(forms.ModelForm):
    delete_images = forms.ModelMultipleChoiceField(
        queryset=ArticleImage.objects.all(),
        widget=forms.CheckboxSelectMultiple
    )

    class Meta:
        model = ArticleImage
        fields = []
	# 초기의 이미지를 불러오고, 삭제를 선택하는 부분
    def __init__(self, *args, **kwargs):
        instance = kwargs.pop('instance', None)
        super().__init__(*args, **kwargs)
        if instance:
            self.fields['delete_images'].queryset = instance.articleimage_set.all()
    # 삭제를 저장
    def save(self, commit=True):
        for image in self.cleaned_data['delete_images']:
            image.delete()

 

views.py

from .forms import DeleteArticleImageForm
@login_required
def update(request, article_pk):
    article = Article.objects.get(pk=article_pk)
    if request.user == article.user:
        if request.method == 'POST':
            form = ArticleForm(request.POST, instance=article)
            # 멀티 이미지 리스트
            images = request.FILES.getlist('image')
            # 삭제응답
            delete_images_form = DeleteArticleImageForm(request.POST)
            imageform = ArticleImageForm(request.POST, request.FILES, instance=article)
            if form.is_valid() and delete_images_form.is_valid(): 
                form.save()
                article.tags.clear()
                tags = request.POST.get('tags').split(',')
                for tag in tags:
                    article.tags.add(tag.strip())
                # 이미지 등록
                for i in images:
                    ArticleImage.objects.create(article=article, image=i)
                # 삭제할 이미지를 저장
                delete_images_form.save()
                return redirect('articles:detail', article.pk)
            
        else:
            initial_tags = ', '.join(article.tags.all().values_list('name', flat=True))
            form = ArticleForm(instance=article, initial={'tags': initial_tags})
            # 이미지 폼들을 불러와 준다(등록/삭제)
            imageform = ArticleImageForm(instance=article)
            delete_images_form = DeleteArticleImageForm(instance=article)

    context = {
        'form': form,
        'article': article,
        'imageform': imageform,
        'delete_images_form': delete_images_form
    }
    return render(request, 'articles/update.html', context)

 

template

해당하는 폼들을 생성하고 편의 성을 위해 등록된 이미지를 불러와줌

{% extends "base.html" %}

{% load static %}

{% block content %}
<form action="{% url 'articles:update' article.pk %}" method="POST" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.as_p }}
  // 이미지 등록 폼
  {{ imageform.as_p }}
  // 등록된 사진 보여주는 부분(삭제 편의를 위해)
  {% if article.articleimage_set.all %}
  <p>등록된 사진</p>
  {% for image in article.articleimage_set.all %}
      <img src="{{ image.image.url }}" width="200" height="200">
  {% endfor %} 
  // 삭제할 이미지를 선택하는 폼
  {{ delete_images_form.as_p}}
  {% endif %}
  {{ in_image }}
  <button type="submit">수정</button>
</form>
{% endblock content %}