Adds the ability to paste images into the website (#27)

* Create imagepaste.ts

Like DragDrop but allows you to paste an image

* Update avatarcropper.ts

Allow an image to be pasted with the ImagePasted class

* Update imagepaste.ts

* Renaming and slight modification

Renamed the file for better consistency, also fixed a small mistake

* Renaming a file

src/js/avatarcropper.ts

@@ -14,6 +14,7 @@ import { doFooterThings, showTutorial } from './footer'
 import { GlobalEvents } from './eventclass'
 import { TextDialog } from './textdialog'
 import { DragDrop } from './dragdrop'
+import { ImagePasted } from './imagepasted'
 import { Point } from './point'
 import { KeyManager } from './keymanager'
 import { Border, GradientInfo } from './borders'
@@ -117,6 +118,7 @@ export class AvatarCropper extends Widget {
         this.textOverlay.setAttribute('for', 'openInput')
 
         let dragDrop = new DragDrop(this.textOverlay)
+
         dragDrop.on('drop', file => {
             this.openFile(file)
         })
@@ -126,6 +128,12 @@ export class AvatarCropper extends Widget {
             }
         })
 
+        let imagePaste = new ImagePasted(this.textOverlay)
+
+        imagePaste.on('imagepasted', file => {
+            this.openFile(file)
+        })        
+
         document.body.appendChild(this.textOverlay)
 
         if (getIEVersion() !== false && !AvatarCropper.settings.dismissedIE) {

src/js/imagepasted.ts

@@ -0,0 +1,34 @@
+import { hideElement } from "./util";
+import { EventClass } from "./eventclass";
+
+export class ImagePasted extends EventClass {
+    private tempText: string = null;
+
+    constructor(overlay: HTMLElement) {
+        super();
+
+        let imgpasted = this; // Setting "imgpasted" to "this" so that we can use it in the onpaste and other events, since "this" would mean something else there.
+
+        imgpasted.createEvent("imagepasted");
+
+        document.onpaste = function (e) {
+
+            var files: FileList = (e.clipboardData).files; // Check to see if there are files in the clipboard data
+
+            if (files.length) { // If there are files, paste the first file.
+                let file: File = files[0];
+                if (!file?.type.includes("image")) return; // If it's not an image, return.
+                imgpasted.emitEvent("imagepasted", files[0])
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            hideElement(overlay);
+            overlay.innerText = imgpasted.tempText;
+            overlay.style.zIndex = "";
+            imgpasted.tempText = null;
+
+        };
+    }
+}