Merge pull request #385 from nishant0708/scanqr

Needs to enable browse file button in the Scan QR page. #374

backend/package.json

@@ -21,11 +21,7 @@
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.4.0",
-<<<<<<< HEAD
-    "nodemailer": "^6.9.13",
-=======
     "nodemailer": "^6.9.14",
->>>>>>> 53b4556520ccfc77bbb053ad39f15f4f69ced03a
     "nodemon": "^3.1.1",
     "twilio": "^5.1.1"
   },

src/pages/QR.js

@@ -12,6 +12,7 @@ const QRCodeVerification = () => {
   const [productInfo, setProductInfo] = useState(null);
   const [error, setError] = useState(null);
   const [isScannerOpen, setIsScannerOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(null);
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
   const requestRef = useRef(null);
@@ -100,6 +101,35 @@ const QRCodeVerification = () => {
     setError("Error scanning code: " + err.message);
   };
 
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const image = new Image();
+        image.onload = () => {
+          const canvas = canvasRef.current;
+          if (canvas) { // Ensure canvas is not null
+            const context = canvas.getContext("2d");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            context.drawImage(image, 0, 0, canvas.width, canvas.height);
+            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+            const code = jsQR(imageData.data, imageData.width, imageData.height);
+            if (code) {
+              handleScan(code.data);
+            } else {
+              setError("No QR code found in the selected image.");
+            }
+          } 
+        };
+        image.src = reader.result;
+        setSelectedImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
   return (
     <>
       <div className="bg-white">
@@ -130,9 +160,7 @@ const QRCodeVerification = () => {
               <img
                 src="https://i.postimg.cc/PJghMmyQ/9427512-4149572-removebg-preview-1-1.jpg"
                 alt="Phone with QR codes"
-                className={`h-full w-full ${
-                  isImageLoading ? "hidden" : "block"
-                }`}
+                className={`h-full w-full ${isImageLoading ? "hidden" : "block"}`}
                 width="300"
                 height="300"
                 style={{ objectFit: "cover" }}
@@ -154,6 +182,11 @@ const QRCodeVerification = () => {
                 <canvas ref={canvasRef} style={{ display: "none" }} />
               </div>
             )}
+            {selectedImage && (
+              <div className="mt-4">
+                <img src={selectedImage} alt="Selected QR code" className="w-full h-auto mb-6" />
+              </div>
+            )}
             {productInfo && (
               <div className="mt-4 p-4 border rounded-md shadow-md">
                 <h2 className="text-2xl font-bold">
@@ -178,6 +211,19 @@ const QRCodeVerification = () => {
               >
                 {isScannerOpen ? "Close Scanner" : "Scan Now"}
               </button>
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                className="hidden"
+                id="file-input"
+              />
+              <label
+                htmlFor="file-input"
+                className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 md:w-auto cursor-pointer"
+              >
+                Browse QR
+              </label>
             </div>
           </div>
         </section>