Allow image upload on Question & Quiz create forms. ref #1864

quiz-anthropocene · Jun 8, 2022 · 373b85f · 373b85f
1 parent d408af6
commit 373b85f
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/templates/questions/create.html b/templates/questions/create.html
@@ -1,8 +1,9 @@
 {% extends "layouts/base.html" %}
-{% load django_bootstrap5 %}
+{% load static django_bootstrap5 %}
 
 {% block extra_css %}
 {{ form.media.css }}
+<link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
 {% endblock %}
 
 {% block breadcrumbs %}
@@ -23,15 +24,34 @@
 
 {% block content %}
 <div class="container">
-    <form method="POST" action="">
+    <form id="question_create_form" method="POST" action="">
         {% csrf_token %}
 
         <div class="row">
             <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>
+
+        <hr />
+
+        <!-- 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="image_form" class="form-label js-display-if-javascript-enabled">{{ form.answer_image_url.label }}</label>
+                    {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
+                </div>
+                <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>
+            </div>
         </div>
 
+        <hr />
+
         <div class="row">
             <div class="col">
                 {% bootstrap_button button_type="submit" button_class="btn-primary" content="Ajouter" %}
@@ -43,6 +63,20 @@
 </div>
 {% endblock %}
 
+
 {% 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-question-image" }}
+{{ s3_upload_config|json_script:"s3-upload-config-question-image" }}
+<script type="text/javascript">
+// init dropzone
+s3UploadInit({
+    dropzoneSelector: "#image_form",
+    callbackLocationSelector: "#{{ form.answer_image_url.id_for_label }}",
+    s3FormValuesId: "s3-form-values-question-image",
+    s3UploadConfigId: "s3-upload-config-question-image",
+});
+</script>
 {% endblock %}
diff --git a/templates/questions/detail_edit.html b/templates/questions/detail_edit.html
@@ -2,6 +2,7 @@
 {% load static django_bootstrap5 %}
 
 {% block extra_css %}
+{{ form.media.css }}
 <link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
 {% endblock %}
 
@@ -21,12 +22,14 @@
                     </div>
                 </div>
 
+                <hr />
+
                 <!-- 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="image_form" class="js-display-if-javascript-enabled">{{ form.answer_image_url.label }}</label>
+                            <label for="image_form" class="form-label js-display-if-javascript-enabled">{{ form.answer_image_url.label }}</label>
                             {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
                         </div>
                         <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>
@@ -45,6 +48,8 @@
                     </div>
                 </div>
 
+                <hr />
+
                 <div class="row">
                     <div class="col">
                         {% bootstrap_button button_type="submit" button_class="btn-primary" content="Sauvegarder" %}

diff --git a/templates/quizs/create.html b/templates/quizs/create.html
@@ -1,8 +1,9 @@
 {% extends "layouts/base.html" %}
-{% load django_bootstrap5 %}
+{% load static django_bootstrap5 %}
 
 {% block extra_css %}
 {{ form.media.css }}
+<link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
 {% endblock %}
 
 {% block breadcrumbs %}
@@ -23,15 +24,34 @@
 
 {% block content %}
 <div class="container">
-    <form method="POST" action="">
+    <form id="quiz_create_form" method="POST" action="">
         {% csrf_token %}
 
         <div class="row">
             <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 for="image_form" class="form-label js-display-if-javascript-enabled">{{ form.image_background_url.label }}</label>
+                    {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
+                </div>
+                <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>
+            </div>
+        </div>
+
+        <hr />
+
         <div class="row">
             <div class="col">
                 {% bootstrap_button button_type="submit" button_class="btn-primary" content="Ajouter" %}
@@ -45,4 +65,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/templates/quizs/detail_edit.html b/templates/quizs/detail_edit.html
@@ -2,6 +2,7 @@
 {% load static django_bootstrap5 %}
 
 {% block extra_css %}
+{{ form.media.css }}
 <link rel="stylesheet" href="{% static 'vendor/dropzone-5.9.3/dropzone.min.css' %}" />
 {% endblock %}
 
@@ -28,7 +29,7 @@
                     <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>
+                            <label for="image_form" class="form-label js-display-if-javascript-enabled">{{ form.image_background_url.label }}</label>
                             {% include "includes/_s3_upload_form.html" with dropzone_form_id="image_form" %}
                         </div>
                         <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>