convert multiple images at once

converter/converter.js

@@ -5,26 +5,21 @@ var wizards = new Image();
 wizards.crossOrigin = 'anonymous';
 wizards.src = 'wizards.png';
 
-async function imageLocal(event) {
-    var reader = new FileReader();
-    reader.onload = function () {
-        var cardImage = new Image();
-        cardImage.crossOrigin = 'anonymous';
-        cardImage.onload = function() {
-            cropCard(this);
-        }
-        cardImage.onerror = errorMessage;
-        cardImage.src = reader.result;
+function prepareImage(source, filename) {
+    var cardImage = new Image();
+    cardImage.crossOrigin = 'anonymous';
+    cardImage.onload = function() {
+        cropCard(this, filename);
     }
-    reader.onerror = errorMessage;
-    await reader.readAsDataURL(event.target.files[0]);
+    cardImage.onerror = errorMessage;
+    cardImage.src = source;
 }
 
 function errorMessage() {
     notify('An error occured. Please make sure you\'re uploading a valid image, then try again.', 10);
 }
 
-async function cropCard(image) {
+async function cropCard(image, filename) {
     // Create canvas/context
     const canvas = document.createElement('canvas');
     // document.body.appendChild(canvas);
@@ -43,7 +38,6 @@ async function cropCard(image) {
         version = 'none';
     }
     // Draw copyright info
-    console.log(version);
     if (version == 'm15Creature') {
         context.drawImage(wizards, 895, 2009, 509, 25);
     } else if (version == 'm15Noncreature') {
@@ -57,7 +51,7 @@ async function cropCard(image) {
     context.drawImage(cardMask, 0, 0, 1500, 2100);
     // Download the card
     const download = document.createElement('a');
-    download.download = document.querySelector('input').files[0].name.split('.')[0] + '.png';
+    download.download = filename.replace('filename=', '') + '.png';
     download.href = canvas.toDataURL();
     document.body.appendChild(download);
     await download.click();

converter/index.php

@@ -10,7 +10,10 @@ include('../globalHTML/header-1.php');
     <div class="layer margin-bottom-large">
         <div class='padding margin-bottom readable-background'>
             <h5 class='margin-bottom padding input-description'>Upload the image that you'd like to convert</h5>
-            <input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='imageLocal(event);'>
+            <div class='padding drop-area'>
+                <h5 class='margin-bottom padding input-description'>Drag and drop</h5>
+                <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, prepareImage, "filename");' data-dropFunction='prepareImage' data-otherParams='filename'>
+            </div>
         </div>
     </div>
     <div class="readable-background layer margin-bottom-large">