qr uload

.env.hope-fly

@@ -1 +1,2 @@
-REACT_APP_PHP_ROOT = https://hope-fly.de/dog/php-dog/
+REACT_APP_PHP_ROOT = "https://hope-fly.de/dog/php-dog/"
+REACT_APP_WWW_ROOT = "https://hope-fly.de/dog/"

.env.local

@@ -1 +1,2 @@
-REACT_APP_PHP_ROOT = http://localhost/dog/php-dog/
+REACT_APP_PHP_ROOT = "http://localhost/dog/php-dog/"
+REACT_APP_WWW_ROOT = "http://localhost/dog/"

php/php-dog/upload.php

@@ -5,10 +5,67 @@ header("Access-Control-Allow-Methods: POST");
 header("Content-Type: application/json; charset=UTF-8");
 header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
 
+require __DIR__ . '/classes/Database.php';
+require __DIR__ . '/classes/lib.php';
+
+
+function deleteOldPic($qr_id, $qr)
+{
+    // get old pic_path
+    try
+    {
+        echo "qr_id   ". $qr_id . "\n";
+        echo "qr_set   ". $qr . "\n";
+        echo "isset qr_set   ". isset($qr) . "\n";
+        $db_connection = new Database();
+        //$conn = $db_connection->dbConnection();
+
+        echo "db_connection   ". $db_connection . "\n";
+        //echo "conn   ". $conn . "\n";
+
+
+
+        // $fetch_user_qr_id = 
+        // "SELECT id, qr_code, picture FROM `dogs` WHERE `qr_id`=:qr_id";
+        // $query_stmt = $conn->prepare($fetch_user_qr_id);
+        // echo "query_stmt   ". $query_stmt . "\n";
+        // $query_stmt->bindValue(':qr_id', $qr_id,PDO::PARAM_STR);
+        // echo "bindValue   ". "\n";
+        // $query_stmt->execute();
+        // echo "execute   ". "\n";
+
+        // // IF THE dog IS FOUNDED BY qr_id
+        // if($query_stmt->rowCount())
+        // {
+        //     $row = $query_stmt->fetch(PDO::FETCH_ASSOC);
+        //     $file2del = "../uploads/";
+        //     if($qr_set)
+        //     {
+        //         $file2del += $row["qr_code"];
+        //     }
+        //     else
+        //     {
+        //         $file2del += $row["picture"];
+        //     }
+        //     if (file_exists($file2del))
+        //     {
+        //         unlink($file2del);
+        //     }
+        //     $result = new CMsg(1,200,'get old pic_path',null,$row);
+        // }
+        // else
+        // {
+        //     $result = new CMsg(0,422,'no dog',null);
+        // }
+    }
+    catch(PDOException $e)
+    {
+        $result = new CMsg(0,500,"deleteOldPic ".$e->getMessage());
+        echo $result->jsonarray();
+    }
+}
 
 try {
-
-
     session_start();
 
 //     $resp = json_decode('
@@ -24,8 +81,6 @@ try {
 
 //     $_SESSION["user"] = $resp["user"];
 
-    require __DIR__ . '/classes/Database.php';
-    require __DIR__ . '/classes/lib.php';
 
     $result = new CMsg(0);
 
@@ -63,7 +118,7 @@ try {
         echo $result->jsonarray();
         return $result->jsonarray();
     }
-
+    deleteOldPic($user["qr_id"], $_POST["qr"]);
     $newFilename = getNewFilename($targetDir, $fileType, 20);
 
 //    echo "newFilename    ".$newFilename . "\n";

src/components/Profil.tsx

@@ -81,6 +81,8 @@ function Profil()
             <div>
                 {dog.data && <Img pth={dog.data.picture} className=''/>}
                 <Link to={'/upload'}>Bild ändern</Link>
+                {dog.data && <Img pth={dog.data.qr_code} className=''/>}
+                <div id="canvas"></div>
             </div>
             <form onSubmit={submitForm}>
                 <div className='neben'>

src/services/CreateQr.ts

@@ -24,8 +24,9 @@ const upload = (file: File): Promise<any> =>
     return uploadRes;
   };
 
-export default function CreateQr({qr_id}:{qr_id: string | undefined}) 
+export default async function CreateQr({qr_id}:{qr_id: string | undefined}) 
 {
+    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
     const qrCode = new QRCodeStyling(
     {
         width: 200,
@@ -33,7 +34,7 @@ export default function CreateQr({qr_id}:{qr_id: string | undefined})
         type: 'canvas',
         image:
             "",
-            data: 'https://hope-fly.de/dog/'+ qr_id,
+            data: WWW_ROOT + qr_id,
             dotsOptions: 
             {
                 color: "#000",
@@ -49,18 +50,16 @@ export default function CreateQr({qr_id}:{qr_id: string | undefined})
             type: "extra-rounded",
         }
     });    
+    document.getElementById("canvas")!.innerHTML = "";
+    qrCode.append(document.getElementById("canvas") as HTMLElement);
 
-    let canv: any = qrCode._canvas!.getCanvas() as HTMLCanvasElement;
+    let qr_el:HTMLCanvasElement = await qrCode._getElement() as unknown as HTMLCanvasElement;
-    canv.toBlob(({blob}:{blob: Blob | MediaSource}) => 
+    let file: File;
+
+	qr_el.toBlob((blob) => 
     {
-        const file = URL.createObjectURL(blob);
+        file = new File([blob!], 'qr_blob.png', { type: 'image/png' });
-        console.log(blob);
+        console.log(file); 
-        console.log(file); // this line should be here
+        upload(file);
     }, 'image/png');
-
-
-
-
-//    upload(qrCode._svg as File);
-    console.log(qrCode);
 }