From 4047bd168d038525e094b753be22d450675d4c5e Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Fri, 3 Jun 2022 14:44:01 +0200
Subject: [PATCH] Limit image size. Link to tinypng

---
 app/settings.py                      | 4 ++--
 core/static/js/s3_upload.js          | 2 +-
 templates/questions/detail_edit.html | 3 ++-
 templates/quizs/detail_edit.html     | 3 ++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/settings.py b/app/settings.py
index 7fd3dfb15..2810007ca 100644
--- a/app/settings.py
+++ b/app/settings.py
@@ -276,8 +276,8 @@
         "allowed_mime_types": ["image/png", "image/svg+xml", "image/gif", "image/jpg", "image/jpeg"],  # ["image/*"] ?
         "upload_expiration": 60 * 60,  # in seconds
         "key_path": "default",  # appended before the file key. No backslash!
-        "max_files": 1,  # 3,
-        "max_file_size": 5,  # in mb
+        "max_files": 1,
+        "max_file_size": 2,  # in mb
         "timeout": 20000,  # in ms
     },
     "question_answer_image": {
diff --git a/core/static/js/s3_upload.js b/core/static/js/s3_upload.js
index 250b554a8..bfc25f82d 100644
--- a/core/static/js/s3_upload.js
+++ b/core/static/js/s3_upload.js
@@ -67,7 +67,7 @@ window.s3UploadInit = function s3UploadInit({
     // the function will be used to rename the file.name before appending it to the formData
     renameFile: function (file) {
       const extension = file.name.split(".").pop();
-      const filename = Dropzone.uuidv4();
+      const filename = Dropzone.uuidv4().substring(0, 8);
       const fileKey = `${keyPath}/${filename}.${extension}`;
       // Add a file key to options params so that it's sent as an input field on POST.
       this.params["key"] = fileKey;
diff --git a/templates/questions/detail_edit.html b/templates/questions/detail_edit.html
index f1cbdd4d5..220cb2076 100644
--- a/templates/questions/detail_edit.html
+++ b/templates/questions/detail_edit.html
@@ -29,10 +29,11 @@
                             <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>
+                        <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>
                     </div>
                     <div class="col-12 col-sm-6">
                         <div class="form-group">
-                            <label>Image actuelle</label>
+                            <label class="form-label">Image actuelle</label>
                             {% if form.answer_image_url.value %}
                                 <div>
                                     <img class="img-fluid" src="{{ form.answer_image_url.value }}" />
diff --git a/templates/quizs/detail_edit.html b/templates/quizs/detail_edit.html
index d9bf603c5..664de1f0f 100644
--- a/templates/quizs/detail_edit.html
+++ b/templates/quizs/detail_edit.html
@@ -31,10 +31,11 @@
                             <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>
+                        <small>Image trop grosse ? outil pour réduire sa taille : <a href="https://tinypng.com" target="_blank">tinypng.com</a></small>
                     </div>
                     <div class="col-12 col-sm-6">
                         <div class="form-group">
-                            <label>Image actuelle</label>
+                            <label class="form-label">Image actuelle</label>
                             {% if form.image_background_url.value %}
                                 <div>
                                     <img class="img-fluid" src="{{ form.image_background_url.value }}" />