S3 upload workflow for Quiz image

quiz-anthropocene · Jun 3, 2022 · e4d584b · e4d584b
1 parent 2175790
commit e4d584b
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 13 deletions.
diff --git a/core/static/js/s3_upload.js b/core/static/js/s3_upload.js
@@ -17,7 +17,7 @@ const extensionToContentTypeMapping = {
 // - s3UploadConfigId: ID of DOM element that contains the JSON values of the S3 config (eg. max file size, timeout, etc).
 
 window.s3UploadInit = function s3UploadInit({
-  dropzoneSelector = "#answer_image_form",
+  dropzoneSelector = "#image_form",
   callbackLocationSelector = "",
   s3FormValuesId = "s3-form-values",
   s3UploadConfigId = "s3-upload-config",

diff --git a/questions/forms.py b/questions/forms.py
@@ -29,6 +29,7 @@ class Meta:
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields["tags"].queryset = Tag.objects.all().order_by("name")
+        self.fields["answer_image_url"].label = "Image pour illustrer la réponse"
         for field_name in QUESTION_READONLY_FORM_FIELDS:
             self.fields[field_name].disabled = True
         for field_name in QUESTION_REQUIRED_FORM_FIELDS:

diff --git a/quizs/forms.py b/quizs/forms.py
@@ -22,11 +22,14 @@ class QuizCreateForm(forms.ModelForm):
     class Meta:
         model = Quiz
         fields = QUIZ_CREATE_FORM_FIELDS + QUIZ_READONLY_FORM_FIELDS
-        widgets = {}
+        widgets = {
+            "image_background_url": forms.HiddenInput(),
+        }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields["tags"].queryset = Tag.objects.all().order_by("name")
+        self.fields["image_background_url"].label = "Image pour illustrer le quiz"
         for field_name in QUIZ_READONLY_FORM_FIELDS:
             self.fields[field_name].disabled = True
 

diff --git a/templates/questions/detail_edit.html b/templates/questions/detail_edit.html
@@ -1,6 +1,5 @@
 {% extends "questions/detail_base.html" %}
-{% load static %}
-{% load django_bootstrap5 %}
+{% load static django_bootstrap5 %}
 
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
@@ -17,14 +16,18 @@
                     <div class="col-md-8">
                         {% bootstrap_form form alert_error_type="all" %}
                     </div>
+                    <div class="col-md-4 d-none d-md-block">
+                        <div class="alert alert-primary">L'ajout de l'image d'explication se fait à la fin du formulaire 👇</div>
+                    </div>
                 </div>
 
+                <!-- answer_image_url upload form -->
                 <div class="row">
                     <div class="col-12 col-sm-6">
                         <div class="form-group">
                             {# {{ form.answer_image_url.as_hidden }} #}
-                            <label for="answer_image_form" class="js-display-if-javascript-enabled">Importez une image</label>
-                            {% include "includes/_s3_upload_form.html" with dropzone_form_id="answer_image_form" %}
+                            <label for="image_form" class="js-display-if-javascript-enabled">{{ form.answer_image_url.label }}</label>
+                            {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
                         </div>
                     </div>
                     <div class="col-12 col-sm-6">
@@ -69,12 +72,12 @@
 {{ form.media.js }}
 <script type="text/javascript" src="{% static 'vendor/dropzone-5.9.3/dropzone.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/s3_upload.js' %}"></script>
-{{ s3_form_values_answer_image|json_script:"s3-form-values-question-image" }}
-{{ s3_upload_config_answer_image|json_script:"s3-upload-config-question-image" }}
+{{ s3_form_values|json_script:"s3-form-values-question-image" }}
+{{ s3_upload_config|json_script:"s3-upload-config-question-image" }}
 <script type="text/javascript">
 // init dropzone
 s3UploadInit({
-    dropzoneSelector: "#answer_image_form",
+    dropzoneSelector: "#image_form",
     callbackLocationSelector: "#{{ form.answer_image_url.id_for_label }}",
     s3FormValuesId: "s3-form-values-question-image",
     s3UploadConfigId: "s3-upload-config-question-image",

diff --git a/templates/quizs/detail_edit.html b/templates/quizs/detail_edit.html
@@ -1,5 +1,9 @@
 {% extends "quizs/detail_base.html" %}
-{% load django_bootstrap5 %}
+{% load static django_bootstrap5 %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
+{% endblock %}
 
 {% block quiz_detail_content %}
 <div class="row">
@@ -12,8 +16,38 @@
                     <div class="col-md-8">
                         {% bootstrap_form form alert_error_type="all" %}
                     </div>
+                    <div class="col-md-4 d-none d-md-block">
+                        <div class="alert alert-primary">L'ajout d'une image se fait à la fin du formulaire 👇</div>
+                    </div>
+                </div>
+
+                <hr />
+
+                <!-- image_background_url upload form -->
+                <div class="row">
+                    <div class="col-12 col-sm-6">
+                        <div class="form-group">
+                            {# {{ form.image_background_url.as_hidden }} #}
+                            <label class="form-label" for="image_form" class="js-display-if-javascript-enabled">{{ form.image_background_url.label }}</label>
+                            {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-6">
+                        <div class="form-group">
+                            <label>Image actuelle</label>
+                            {% if form.image_background_url.value %}
+                                <div>
+                                    <img class="img-fluid" src="{{ form.image_background_url.value }}" />
+                                </div>
+                            {% else %}
+                                <span class="form-text text-muted">Aucun</span>
+                            {% endif %}
+                        </div>
+                    </div>
                 </div>
 
+                <hr />
+
                 <div class="row">
                     <div class="col">
                         {% bootstrap_button button_type="submit" button_class="btn-primary" content="Sauvegarder" %}
@@ -39,4 +73,17 @@
 
 {% block extra_js %}
 {{ form.media.js }}
+<script type="text/javascript" src="{% static 'vendor/dropzone-5.9.3/dropzone.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/s3_upload.js' %}"></script>
+{{ s3_form_values|json_script:"s3-form-values-quiz-image" }}
+{{ s3_upload_config|json_script:"s3-upload-config-quiz-image" }}
+<script type="text/javascript">
+// init dropzone
+s3UploadInit({
+    dropzoneSelector: "#image_form",
+    callbackLocationSelector: "#{{ form.image_background_url.id_for_label }}",
+    s3FormValuesId: "s3-form-values-quiz-image",
+    s3UploadConfigId: "s3-upload-config-quiz-image",
+});
+</script>
 {% endblock %}
diff --git a/www/questions/views.py b/www/questions/views.py
@@ -81,9 +81,9 @@ def get_context_data(self, **kwargs):
         question = self.get_object()
         # S3 Upload form
         s3_upload = S3Upload(kind="question_answer_image")
-        context["s3_form_values_answer_image"] = s3_upload.form_values
-        context["s3_upload_config_answer_image"] = s3_upload.config
-        # User can edit?
+        context["s3_form_values"] = s3_upload.form_values
+        context["s3_upload_config"] = s3_upload.config
+        # User authorizations
         context["user_can_edit_question"] = self.request.user.can_edit_question(question)
         return context
 

diff --git a/www/quizs/views.py b/www/quizs/views.py
@@ -13,6 +13,7 @@
 from contributions.tables import ContributionTable
 from core.forms import form_filters_cleaned_dict, form_filters_to_list
 from core.mixins import ContributorUserRequiredMixin
+from core.utils.s3 import S3Upload
 from history.utilities import get_diff_between_two_history_records
 from quizs.filters import QuizFilter
 from quizs.forms import QUIZ_FORM_FIELDS, QuizCreateForm, QuizEditForm, QuizQuestionFormSet
@@ -78,6 +79,11 @@ def get_form(self, *args, **kwargs):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         quiz = self.get_object()
+        # S3 Upload form
+        s3_upload = S3Upload(kind="quiz_image_background")
+        context["s3_form_values"] = s3_upload.form_values
+        context["s3_upload_config"] = s3_upload.config
+        # User authorizations
         context["user_can_edit_quiz"] = self.request.user.can_edit_quiz(quiz)
         return context