useSWR upload

php/php-dog/getDog.php

@@ -8,7 +8,8 @@ header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers
 session_start();
 
 require __DIR__.'/classes/Database.php';
-require __DIR__.'/classes/lib.php';
+//require_once __DIR__.'/classes/lib.php';
+require __DIR__.'/AuthMiddleware.php';
 
 
 $db_connection = new Database();
@@ -39,9 +40,16 @@ if(!isset($data->qr_id)
 else 
 {
     $qr_id = trim($data->qr_id);
-
     try
     {
+        if(strcmp($qr_id, 'SESS') === 0)
+        {
+            $allHeaders = getallheaders();
+            $auth = new Auth($conn, $allHeaders);
+            $data = json_decode($auth->isValid());
+            $user = $data->data;
+            $qr_id = $user->qr_id;
+        }
         $fetch_user_qr_id = 
         "SELECT id, qr_id, email, name, phone, 
         qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence,

src/components/FileUpload.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import UploadService from "../services/FileUploadService";
+import {upload as ApiUpload} from "../services/PhpApi";
 import IFile from "../types/File";
 import PreviewUpload from "./PreviewUpload";
 
@@ -24,30 +24,30 @@ const FileUpload: React.FC = () =>
     setProgress(0);
     if (!currentFile) return;
 
-    UploadService.upload(currentFile, (event: any) => 
+    ApiUpload(currentFile, '', (event: any) => 
 	{
-      setProgress(Math.round((100 * event.loaded) / event.total));
+		setProgress(Math.round((100 * event.loaded) / event.total));
     })
-      .then((response) => 
+	.then((response) => 
-	  {
+	{
-        setMessage(response.data.message);
+		setMessage(response.data.message);
-        return;
+		return;
-      })
+	})
-      .catch((err) => 
+	.catch((err) => 
-	  {
+	{
-        setProgress(0);
+		setProgress(0);
 
-        if (err.response && err.response.data && err.response.data.message) 
+		if (err.response && err.response.data && err.response.data.message) 
 		{
-          setMessage(err.response.data.message);
+			setMessage(err.response.data.message);
-        } 
+		} 
 		else 
 		{
-          setMessage("Could not upload the File!");
+			setMessage("Could not upload the File!");
-        }
+		}
 
-        setCurrentFile(undefined);
+		setCurrentFile(undefined);
-      });
+	});
   };
 
 

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import './Header.css';
 import '../App.css';
-import {Axios, logOut, sleep} from '../services/PhpApi'
+import {Axios, logOut} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 
 

src/components/Login.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import './Login.css';
-import {getUser, loginUser, sleep} from '../services/PhpApi'
+import {getUser, loginUser} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 import useSWR from 'swr';
 

src/components/PreviewUpload.tsx

@@ -1,28 +1,25 @@
-// import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
-// import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import { ResponseT } from '../context/UserContext';
-// import {Axios} from '../services/PhpApi';
+import {Axios, getDog} from '../services/PhpApi';
+import useSWR from 'swr';
 
-function PreviewUpload({chgFile}:{chgFile: any}) {
+function PreviewUpload({chgFile}:{chgFile: any}) 
-//   const [file, setFile] = useState<string | undefined >(undefined);
+{
-//   const [dimensionWidth, setDimensionWidth] = useState(0);
+  const [file, setFile] = useState<string | undefined >(undefined);
-//   const [dimensionHeight, setDimensionHeight] = useState(0);
+  const [dimensionWidth, setDimensionWidth] = useState(0);
+  const [dimensionHeight, setDimensionHeight] = useState(0);
 
-//   const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+  const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
-//   const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
 
-//   if(user && (dog === undefined || dog.success === undefined))
+  const { data, error, isLoading  } = useSWR(['PreviewUpload', 'SESS'], getDog );
-//   {
+  if (error) return (<div>failed to load</div>);
-// 	  Axios.post<ResponseT>('getDog.php', 
+  if (isLoading) return (<div>loading...</div>);
-// 	  {
+
-// 		  qr_id: user.qr_id
+  console.log('PreviewUpload getDog');
-// 	  })
+  console.log(data);
-// 	  .then((resDog) =>
+  
-// 	  {
+  setDog(data.data);
-// 		  setDog(resDog.data);
+  setFile("./uploads"+ data.data.picture);
-//       setFile("./uploads"+resDog.data.data.picture);
-// 	  })
-// 	  .catch((err) => console.error(err));
-//   }
 
 
 //   const handleChange = async (
@@ -32,7 +29,7 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
 //     // const img = new Image();
 //     const ImageName = event.target.value.split('\\')[2];
 //     const Image = event.target.value;
-//     console.log('Imageon Kevel: ', Image); // Image on Kevel
+//     console.log('Image on Kevel: ', Image); // Image on Kevel
 //     console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
 //     console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
 //     console.log('event current Target files: ', event.target.files![0]);
@@ -92,3 +89,4 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
 //   );
 }
 export default PreviewUpload;
+

src/components/Profil.tsx

@@ -88,8 +88,8 @@ function Profil()
         }
         setFormData(formData);
 
-        update data with phpapi
+        // update data with phpapi
-        mutate
+        // mutate
     }
 
     const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) => 
@@ -99,8 +99,8 @@ function Profil()
         setFormData(formData);
         showData(data/*, e*/);
 
-        update data with phpapi
+        // update data with phpapi
-        mutate
+        // mutate
     }
     formData.email = data.data.email;
     formData.name = data.data.name;

src/services/CreateQr.ts

@@ -1,31 +1,8 @@
-import { Axios } from './PhpApi';
+import { upload } from './PhpApi';
 
 import React from 'react'
 import QRCodeStyling from 'qr-code-styling';
 
-
-const upload = (file: File): Promise<any> => 
-{
-    let formData = new FormData();
-  
-    formData.append("file", file);
-    formData.append("submit", "1");
-    formData.append("qr", "1");
-  
-    let uploadRes = Axios.post("upload.php", formData, {
-      headers: 
-      {
-        "Content-Type": "multipart/form-data",
-      }
-    });
-    console.log('CreateQr upload');
-    console.log(uploadRes);    
-
-    // let a: number = 1+3;
-    // a++;
-    return uploadRes;
-  };
-
 export default async function CreateQr({qr_id}:{qr_id: string | undefined}) 
 {
     const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
@@ -61,6 +38,6 @@ export default async function CreateQr({qr_id}:{qr_id: string | undefined})
     {
         file = new File([blob!], 'qr_blob.png', { type: 'image/png' });
         console.log(file); 
-        upload(file);
+        upload(file, '1');
     }, 'image/png');
 }

src/services/FileUploadService.ts

@@ -1,28 +0,0 @@
-//import http from "../http-common";
-
-import { Axios } from './PhpApi';
-
-const upload = (file: File, onUploadProgress: any): Promise<any> => {
-  let formData = new FormData();
-
-  formData.append("file", file);
-  formData.append("submit", "1");
-
-  let uploadRes = Axios.post("upload.php", formData, {
-    headers: {
-      "Content-Type": "multipart/form-data",
-    },
-    onUploadProgress,
-  });
-
-  // let a: number = 1+3;
-  // a++;
-  return uploadRes;
-};
-
- 
-  const FileUploadService = {
-    upload
-  };
-  
-  export default FileUploadService;

src/services/PhpApi.ts

@@ -149,15 +149,39 @@ export const getUser = async () =>
     return data;
 }
 
-export const session = async () => 
+export const upload = (file: File, qr: string = '', onUploadProgress: any = null): Promise<any> => 
 {
-    const res = await Axios.get('session.php');
+    let formData = new FormData();
-    console.log("Api session");
-    console.log(res);
   
-    const {data} = res;
+    formData.append("file", file);
-    return data;
+    formData.append("submit", "1");
-}
+    if(qr !== '')
+    {
+        formData.append("qr", "1");
+    }
+    let uploadRes = Axios.post("upload.php", formData, 
+    {
+      headers: 
+      {
+        "Content-Type": "multipart/form-data",
+      },
+      onUploadProgress
+    });
+    console.log('Api upload qr = ' + qr);
+    console.log(uploadRes);    
+
+    return uploadRes;
+};
+
+// export const session = async () => 
+// {
+//     const res = await Axios.get('session.php');
+//     console.log("Api session");
+//     console.log(res);
+
+//     const {data} = res;
+//     return data;
+// }
 
 export const logOut = () =>
 {
@@ -170,8 +194,8 @@ export const logOut = () =>
     .catch((err) => console.error(err));
 }
 
-export const sleep = (ms: number) => 
+// export const sleep = (ms: number) => 
-{
+// {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+//     return new Promise((resolve) => setTimeout(resolve, ms));
-};
+// };