Merge pull request #603 from memeLab/289-warning-wrong-file-format

Fix #517 MR conflicts
memeLab · Feb 16, 2025 · 65c765b · 65c765b
2 parents 4b96755 + b0f4732
commit 65c765b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/src/users/jinja2/users/edit-object.jinja2 b/src/users/jinja2/users/edit-object.jinja2
@@ -69,19 +69,43 @@
 
             $("#id_source").change(
                 function(e) {
-                    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
-                        var file = e.originalEvent.srcElement.files[i];
-
-                        var image_preview = document.createElement("img");
-                        var reader = new FileReader();
-                        reader.onloadend = function() {
+                    var file = e.originalEvent.srcElement.files[0];
+                    var image_preview = null;
+                    var previewAndLoadFile = null;
+                    var content_box = document.createElement("div");
+                    content_box.id = "content-box";
+
+                    if (file.type === "video/mp4" || file.type === "video/webm") {
+                        image_preview = document.createElement("video");
+                        previewAndLoadFile = function () {
+                            image_preview.src = reader.result;
+                            image_preview.id = "img-preview";
+                            image_preview.controls = "controls";
+                            image_preview.autoplay = "autoplay";
+                            image_preview.muted = "muted";
+                            document.getElementById("id_source").after(content_box);
+                            document.getElementById("content-box").appendChild(image_preview); //make preview image of the object/marker show
+                        }
+                    } else if (file.type.includes("image/")) {
+                        image_preview = document.createElement("img");
+                        previewAndLoadFile = function () {
                             image_preview.src = reader.result;
                             image_preview.id = "img-preview";
-                            image_preview.hidden = "hidden";
+                            document.getElementById("id_source").after(content_box);
+                            document.getElementById("content-box").appendChild(image_preview); //make preview image of the object/marker show
                         }
-                        reader.readAsDataURL(file);
-                        $("input").after(image_preview); //make preview image of the object/marker show
+                    } else {
+                        alert("{{ _("Invalid file type! Only image or video files are accepted.") }}")
+
+                        document.getElementById("id_source").value = "";
+
+                        if (document.querySelector('#img-preview'))
+                            document.querySelector('#img-preview').remove();
                     }
+
+                    var reader = new FileReader();
+                    reader.onloadend = previewAndLoadFile;
+                    reader.readAsDataURL(file);
                 }
             );
 

diff --git a/src/users/jinja2/users/upload-object.jinja2 b/src/users/jinja2/users/upload-object.jinja2
@@ -1,4 +1,3 @@
-
 {% extends '/core/home.jinja2' %}
 
 {% block content %}
@@ -30,7 +29,8 @@
                         {{ form.visible_fields()[0].errors }}
                     </p>
 
-
+                    <div id="content-box"></div>
+
                     {% if form_type == 'object' %}
                      <div id="edit_object_attributes">
                         <h2 id="scaleTitle">{{_("Adjust scale")}}</h2>
@@ -93,9 +93,9 @@
         <script>
 
             $('#agreement-chk').click(function(){
-                if($(this).prop('checked') == true){
+                if($(this).prop('checked') == true) {
                     $('input[type="submit"]').prop('disabled', false);
-                }else{
+                } else {
                     $('input[type="submit"]').prop('disabled', true);
                 }
             });
@@ -117,27 +117,33 @@
                     var file = e.originalEvent.srcElement.files[0];
                     var image_preview = null;
                     var previewAndLoadFile = null;
-                    var content_box = document.createElement("div");
-                    content_box.id = "content-box";
+                    
                     if (file.type === "video/mp4" || file.type === "video/webm") {
                         image_preview = document.createElement("video");
+                        document.getElementById("content-box").innerHTML = "";
                         previewAndLoadFile = function() {
                             image_preview.src = reader.result;
                             image_preview.id = "img-preview";
                             image_preview.controls = "controls";
                             image_preview.autoplay = "autoplay";
                             image_preview.muted = "muted";
-                            document.getElementById("id_source").after(content_box);
-                            document.getElementById("content-box").appendChild(image_preview); //make preview image of the object/marker show
+                            document.getElementById("content-box").appendChild(image_preview);
                         }
-                    } else {
+                    } else if(file.type.includes("image/")) {
+                        document.getElementById("content-box").innerHTML = "";
                         image_preview = document.createElement("img");
                         previewAndLoadFile = function() {
                             image_preview.src = reader.result;
                             image_preview.id = "img-preview";
-                            document.getElementById("id_source").after(content_box);
-                            document.getElementById("content-box").appendChild(image_preview); //make preview image of the object/marker show
+                            document.getElementById("content-box").appendChild(image_preview);
                         }
+                    } else {
+                        alert("{{ _("Invalid file type! Only image or video files are accepted.") }}")
+                        
+                        document.getElementById("id_source").value = "";
+
+                        if (document.querySelector('#img-preview'))
+                            document.querySelector('#img-preview').remove();
                     }
 
                     var reader = new FileReader();