Add features for v2.3.0

changelog.md

@@ -1,3 +1,8 @@
+### Version 2.3.0
+
+-    Added support for drag and drop of image in file based scanner.
+-    Info UI updated.
+
 ### Version 2.2.8
 
 #### Custom camera labels when not available.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-qrcode",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",

src/strings.ts

@@ -156,13 +156,21 @@ export class Html5QrcodeScannerStrings {
     public static anonymousCameraPrefix(): string {
         return "Anonymous Camera";
     }
+
+    public static dragAndDropMessage(): string {
+        return "Or drop an image to scan";
+    }
+
+    public static dragAndDropMessageOnlyImages(): string {
+        return "Or drop an image to scan (other files not supported)";
+    }
 }
 
 /** Strings used in {@class LibraryInfoDiv} */
 export class LibraryInfoStrings {
 
-    public static builtUsing(): string {
-        return "Built using ";
+    public static poweredBy(): string {
+        return "Powered by ";
     }
 
     public static reportIssues(): string {

src/ui.ts

@@ -30,15 +30,20 @@ class LibraryInfoDiv {
         this.infoDiv.style.zIndex = "2";
         this.infoDiv.style.display = "none";
         this.infoDiv.style.padding = "5pt";
-        this.infoDiv.style.border = "1px solid silver";
+        this.infoDiv.style.border = "1px solid #171717";
         this.infoDiv.style.fontSize = "10pt";
-        this.infoDiv.style.background = "rgb(248 248 248)";
+        this.infoDiv.style.background = "rgb(0 0 0 / 69%)";
+        this.infoDiv.style.borderRadius = "5px";
+        this.infoDiv.style.textAlign = "center";
+        this.infoDiv.style.fontWeight = "400";
+        this.infoDiv.style.color = "white";
 
-        this.infoDiv.innerText = LibraryInfoStrings.builtUsing();
+        this.infoDiv.innerText = LibraryInfoStrings.poweredBy();
         const projectLink = document.createElement("a");
-        projectLink.innerText = "html5-qrcode";
-        projectLink.href = "https://github.com/mebjas/html5-qrcode";
+        projectLink.innerText = "ScanApp";
+        projectLink.href = "https://scanapp.org";
         projectLink.target = "new";
+        projectLink.style.color = "white";
         this.infoDiv.appendChild(projectLink);
 
         const breakElemFirst = document.createElement("br");
@@ -50,6 +55,7 @@ class LibraryInfoDiv {
         reportIssueLink.innerText = LibraryInfoStrings.reportIssues();
         reportIssueLink.href = "https://github.com/mebjas/html5-qrcode/issues";
         reportIssueLink.target = "new";
+        reportIssueLink.style.color = "white";
         this.infoDiv.appendChild(reportIssueLink);
 
         parent.appendChild(this.infoDiv);

src/ui/scanner/file-selection-ui.ts

@@ -31,8 +31,7 @@ export class FileSelectionUi {
         parentElement: HTMLDivElement,
         showOnRender: boolean,
         onFileSelected: OnFileSelected) {
-        this.fileBasedScanRegion = document.createElement("div");
-        this.fileBasedScanRegion.style.textAlign = "center";
+        this.fileBasedScanRegion = this.createFileBasedScanRegion();
         this.fileBasedScanRegion.style.display
             = showOnRender ? "block" : "none";
         parentElement.appendChild(this.fileBasedScanRegion);
@@ -80,8 +79,84 @@ export class FileSelectionUi {
 
             onFileSelected(file);
         });
+
+        // Render drag and drop label
+        let dragAndDropMessage = this.createDragAndDropMessage();
+        this.fileBasedScanRegion.appendChild(dragAndDropMessage);
+
+        this.fileBasedScanRegion.addEventListener("dragenter", function(event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+
+            event.stopPropagation();
+            event.preventDefault();
+        });
+
+        this.fileBasedScanRegion.addEventListener("dragleave", function(event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+
+            event.stopPropagation();
+            event.preventDefault();
+        });
+
+        this.fileBasedScanRegion.addEventListener("dragover", function(event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+
+            event.stopPropagation();
+            event.preventDefault();
+        });
+
+        /*eslint complexity: ["error", 10]*/
+        this.fileBasedScanRegion.addEventListener("drop", function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+
+            var dataTransfer = event.dataTransfer;
+            if (dataTransfer) {
+                let files = dataTransfer.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+                let isAnyFileImage = false;
+                for (let i = 0; i < files.length; ++i) {
+                    let file = files.item(i);
+                    if (!file) {
+                        continue;
+                    }
+                    let imageType = /image.*/;
+
+                    // Only process images.
+                    if (!file.type.match(imageType)) {
+                        continue;
+                    }
+
+                    isAnyFileImage = true;
+                    let fileName = file.name;
+                    $this.setImageNameToButton(fileName);
+
+                    onFileSelected(file);
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings.dragAndDropMessage();
+                    break;
+                }
+
+                // None of the files were images.
+                if (!isAnyFileImage) {
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings
+                            .dragAndDropMessageOnlyImages();
+                }
+            }
+
+        });
     }
 
+    //#region Public APIs.
     /** Hide the file selection UI. */
     public hide() {
         this.fileBasedScanRegion.style.display = "none";
@@ -104,6 +179,38 @@ export class FileSelectionUi {
         this.fileScanInput.value = "";
         this.setInitialValueToButton();
     }
+    //#endregion
+
+    //#region private APIs
+    private createFileBasedScanRegion(): HTMLDivElement {
+        let fileBasedScanRegion = document.createElement("div");
+        fileBasedScanRegion.style.textAlign = "center";
+        fileBasedScanRegion.style.margin = "auto";
+        fileBasedScanRegion.style.width = "80%";
+        fileBasedScanRegion.style.maxWidth = "600px";
+        fileBasedScanRegion.style.border
+            = this.fileBasedScanRegionDefaultBorder();
+        fileBasedScanRegion.style.padding = "10px";
+        fileBasedScanRegion.style.marginBottom = "10px";
+        return fileBasedScanRegion;
+    }
+
+    private fileBasedScanRegionDefaultBorder() {
+        return "6px dashed #ebebeb";
+    }
+
+    /** Border when a file is being dragged over the file scan region. */
+    private fileBasedScanRegionActiveBorder() {
+        return "6px dashed rgb(153 151 151)";
+    }
+
+    private createDragAndDropMessage(): HTMLDivElement {
+        let dragAndDropMessage = document.createElement("div");
+        dragAndDropMessage.innerText
+            = Html5QrcodeScannerStrings.dragAndDropMessage();
+        dragAndDropMessage.style.fontWeight = "400";
+        return dragAndDropMessage;
+    }
 
     private setImageNameToButton(imageFileName: string) {
         const MAX_CHARS = 20;
@@ -133,6 +240,7 @@ export class FileSelectionUi {
     private getFileScanInputId(): string {
         return "html5-qrcode-private-filescan-input";
     }
+    //#endregion
 
     /**
      * Creates a file selection UI and renders.