Label admin: add logo upload form (with S3 dropzone)

config/settings/base.py

@@ -460,6 +460,7 @@
 SIAE_LOGO_FOLDER_NAME = "siae_logo"
 SIAE_IMAGE_FOLDER_NAME = "siae_image"
 SIAE_CLIENT_REFERENCE_LOGO_FOLDER_NAME = "client_reference_logo"
+LABEL_LOGO_FOLDER_NAME = "label_logo"
 USER_IMAGE_FOLDER_NAME = "user_image"
 SIAE_EXPORT_FOLDER_NAME = "siae_export"
 STAT_EXPORT_FOLDER_NAME = "stat_export"
@@ -482,6 +483,9 @@
     "client_reference_logo": {
         "key_path": SIAE_CLIENT_REFERENCE_LOGO_FOLDER_NAME,
     },
+    "label_logo": {
+        "key_path": LABEL_LOGO_FOLDER_NAME,
+    },
     "user_image": {
         "key_path": USER_IMAGE_FOLDER_NAME,
     },

lemarche/labels/admin.py

@@ -5,6 +5,7 @@
 from lemarche.labels.models import Label
 from lemarche.utils.admin.admin_site import admin_site
 from lemarche.utils.fields import pretty_print_readonly_jsonfield
+from lemarche.utils.s3 import S3Upload
 
 
 @admin.register(Label, site=admin_site)
@@ -29,7 +30,7 @@ class LabelAdmin(admin.ModelAdmin):
                 "fields": ("name", "slug", "description", "website"),
             },
         ),
-        ("Logo", {"fields": ("logo_url", "logo_url_display")}),
+        ("Logo (voir en bas pour uploader)", {"fields": ("logo_url", "logo_url_display")}),
         ("Structures", {"fields": ("siae_count_annotated_with_link",)}),
         (
             "Source de données",
@@ -44,6 +45,22 @@ class LabelAdmin(admin.ModelAdmin):
         ("Dates", {"fields": ("created_at", "updated_at")}),
     )
 
+    change_form_template = "labels/admin_change_form.html"
+
+    class Media:
+        js = (
+            "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
+            "vendor/dropzone-5.9.3/dropzone.min.js",
+            "js/s3_upload.js",
+        )
+
+    def change_view(self, request, object_id, form_url="", extra_context=None):
+        extra_context = extra_context or {}
+        s3_upload = S3Upload(kind="label_logo")
+        extra_context["s3_form_values_label_logo"] = s3_upload.form_values
+        extra_context["s3_upload_config_label_logo"] = s3_upload.config
+        return super(LabelAdmin, self).change_view(request, object_id, form_url, extra_context=extra_context)
+
     def get_queryset(self, request):
         qs = super().get_queryset(request)
         qs = qs.with_siae_stats()

lemarche/templates/labels/admin_change_form.html

@@ -0,0 +1,30 @@
+{% extends 'admin/change_form.html' %}
+{% load static bootstrap4 theme_inclusion %}
+
+{% block after_related_objects %}
+    {{ block.super }}
+
+    {% import_static_JS_theme_inclusion %}
+
+    <div class="submit-row">
+        <div class="form-group">
+            <label for="logo_form" class="js-display-if-javascript-enabled">Importez votre logo</label>
+            {% include "storage/s3_upload_form.html" with dropzone_form_id="logo_form" %}
+        </div>
+    </div>
+
+    {{ s3_form_values_label_logo|json_script:"s3-form-values-label-logo" }}
+    {{ s3_upload_config_label_logo|json_script:"s3-upload-config-label-logo" }}
+    <script type="text/javascript">
+    // init dropzone
+    s3UploadInit({
+        dropzoneSelector: "#logo_form",
+        callbackLocationSelector: "#{{ adminform.form.logo_url.id_for_label }}",
+        s3FormValuesId: "s3-form-values-label-logo",
+        s3UploadConfigId: "s3-upload-config-label-logo",
+        // Not really nice
+        sentryInternalUrl: "{% url 'pages:sentry_debug' %}",
+        sentryCsrfToken: "{{ csrf_token }}"
+    });
+    </script>
+{% endblock %}