modified: img-converter/img-converter.html

modified: img-converter/script.js
sidbxl · Jan 30, 2024 · 83c4d27 · 83c4d27
1 parent aee5992
commit 83c4d27
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 50 deletions.
diff --git a/img-converter/img-converter.html b/img-converter/img-converter.html
@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>GitHub Project Comparator</title>
+    <title>Super IMG Converter</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
     <script src="script.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
         <h1>Super img converter</h1>
-        <div id="drop_zone" style="width: 300px; height: 200px; border: 1px solid black;">
-            Drop files here
-        </div>
-        <select id="output_format">
+        <select id="output_format" class="form-select">
             <option value="jpeg">JPEG</option>
             <option value="png">PNG</option>
         </select>
-        <button id="convert_button">Convert</button>
+        <form action="#" class="dropzone" id="drop_zone"></form>
+
     </div>
     <div class="footer"></div>
 </body>

diff --git a/img-converter/script.js b/img-converter/script.js
@@ -1,47 +1,38 @@
-document.getElementById('drop_zone').addEventListener('dragover', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = 'copy';
-});
+Dropzone.autoDiscover = false;
+$(document).ready(function() {
+    // Turn the drop zone into a Dropzone
+    var myDropzone = new Dropzone('#drop_zone', {
+        url: function() {}, // Dummy function to prevent upload
+        acceptedFiles: 'image/*', // Only accept image files
+        autoProcessQueue: false, // Don't upload the files immediately
+    });
+
+    // When a file is added, convert and download it
+    myDropzone.on('addedfile', function(file) {
+        var outputFormat = document.getElementById('output_format').value;
+        convertAndDownload(file, outputFormat);
+    });
 
-document.getElementById('drop_zone').addEventListener('drop', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    var outputFormat = document.getElementById('output_format').value;
-    var files = e.dataTransfer.files;
-
-    for (var i = 0; i < files.length; i++) {
-        if (files[i].type.startsWith('image/')) { // Check if the file is an image
-            convertAndDownload(files[i], outputFormat);
-        } else {
-            alert('Please drop an image file.');
-        }
-    }
-});
-
-function convertAndDownload(file, outputFormat) {
-    var reader = new FileReader();
-    reader.onload = function(e) {
-        var img = new Image();
-        img.onload = function() {
-            var canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            var ctx = canvas.getContext('2d');
-            ctx.drawImage(img, 0, 0);
-            canvas.toBlob(function(blob) {
-                var link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = file.name + '.' + outputFormat;
-                link.click();
-            }, 'image/' + outputFormat);
+    function convertAndDownload(file, outputFormat) {
+        console.log("convertAndDownload function is called");
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            var img = new Image();
+            img.onload = function() {
+                var canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                var ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0);
+                canvas.toBlob(function(blob) {
+                    var link = document.createElement('a');
+                    link.href = URL.createObjectURL(blob);
+                    link.download = file.name + '.' + outputFormat;
+                    link.click();
+                }, 'image/' + outputFormat);
+            };
+            img.src = e.target.result;
         };
-        img.src = e.target.result;
-    };
-    reader.readAsDataURL(file);
-}
-
-document.getElementById('convert_button').addEventListener('click', function() {
-    alert('Please drop an image file into the drop zone.');
+        reader.readAsDataURL(file);
+    }
 });