Limit image size. Link to tinypng

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

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }}" />