From 6c158214677daefb0896408710cf007151a356b0 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Wed, 1 Feb 2023 15:28:38 +0100 Subject: [PATCH] useSWR upload --- php/php-dog/getDog.php | 12 ++++++-- src/components/FileUpload.tsx | 36 ++++++++++++------------ src/components/Header.tsx | 2 +- src/components/Login.tsx | 2 +- src/components/PreviewUpload.tsx | 44 ++++++++++++++--------------- src/components/Profil.tsx | 8 +++--- src/services/CreateQr.ts | 27 ++---------------- src/services/FileUploadService.ts | 28 ------------------- src/services/PhpApi.ts | 46 +++++++++++++++++++++++-------- 9 files changed, 92 insertions(+), 113 deletions(-) delete mode 100644 src/services/FileUploadService.ts diff --git a/php/php-dog/getDog.php b/php/php-dog/getDog.php index c525871..4dbc515 100644 --- a/php/php-dog/getDog.php +++ b/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, diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 789ac89..ddfaf2b 100644 --- a/src/components/FileUpload.tsx +++ b/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) => - { - setMessage(response.data.message); - return; - }) - .catch((err) => - { - setProgress(0); + .then((response) => + { + setMessage(response.data.message); + return; + }) + .catch((err) => + { + 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); + }); }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a8e10c7..3028ba8 100644 --- a/src/components/Header.tsx +++ b/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'; diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 2b50b3e..90f84fc 100644 --- a/src/components/Login.tsx +++ b/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'; diff --git a/src/components/PreviewUpload.tsx b/src/components/PreviewUpload.tsx index def4644..4f76469 100644 --- a/src/components/PreviewUpload.tsx +++ b/src/components/PreviewUpload.tsx @@ -1,28 +1,25 @@ -// import React, { useContext, useState } from 'react'; -// import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext'; -// import {Axios} from '../services/PhpApi'; +import React, { useState } from 'react'; +import { ResponseT } from '../context/UserContext'; +import {Axios, getDog} from '../services/PhpApi'; +import useSWR from 'swr'; -function PreviewUpload({chgFile}:{chgFile: any}) { -// const [file, setFile] = useState(undefined); -// const [dimensionWidth, setDimensionWidth] = useState(0); -// const [dimensionHeight, setDimensionHeight] = useState(0); +function PreviewUpload({chgFile}:{chgFile: any}) +{ + const [file, setFile] = useState(undefined); + const [dimensionWidth, setDimensionWidth] = useState(0); + const [dimensionHeight, setDimensionHeight] = useState(0); -// const { user } = useContext(UserCtx) as UserCtxT; -// const [dog, setDog] = useState({}); // local dog not the dog in UserContext + const [dog, setDog] = useState({}); // local dog not the dog in UserContext -// if(user && (dog === undefined || dog.success === undefined)) -// { -// Axios.post('getDog.php', -// { -// qr_id: user.qr_id -// }) -// .then((resDog) => -// { -// setDog(resDog.data); -// setFile("./uploads"+resDog.data.data.picture); -// }) -// .catch((err) => console.error(err)); -// } + const { data, error, isLoading } = useSWR(['PreviewUpload', 'SESS'], getDog ); + if (error) return (
failed to load
); + if (isLoading) return (
loading...
); + + console.log('PreviewUpload getDog'); + console.log(data); + + setDog(data.data); + setFile("./uploads"+ data.data.picture); // 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; + diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index e3d6d8b..a879ddc 100644 --- a/src/components/Profil.tsx +++ b/src/components/Profil.tsx @@ -88,8 +88,8 @@ function Profil() } setFormData(formData); - update data with phpapi - mutate + // update data with phpapi + // mutate } const qr_refresh = (e: React.MouseEvent) => @@ -99,8 +99,8 @@ function Profil() setFormData(formData); showData(data/*, e*/); - update data with phpapi - mutate + // update data with phpapi + // mutate } formData.email = data.data.email; formData.name = data.data.name; diff --git a/src/services/CreateQr.ts b/src/services/CreateQr.ts index 453b20c..6a3be84 100644 --- a/src/services/CreateQr.ts +++ b/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 => -{ - 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'); } diff --git a/src/services/FileUploadService.ts b/src/services/FileUploadService.ts deleted file mode 100644 index 69f981f..0000000 --- a/src/services/FileUploadService.ts +++ /dev/null @@ -1,28 +0,0 @@ -//import http from "../http-common"; - -import { Axios } from './PhpApi'; - -const upload = (file: File, onUploadProgress: any): Promise => { - 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; \ No newline at end of file diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts index c17b675..7bad494 100644 --- a/src/services/PhpApi.ts +++ b/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 => { - const res = await Axios.get('session.php'); - console.log("Api session"); - console.log(res); + let formData = new FormData(); + + formData.append("file", file); + 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); - const {data} = res; - return data; -} + 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) => -{ - return new Promise((resolve) => setTimeout(resolve, ms)); -}; +// export const sleep = (ms: number) => +// { +// return new Promise((resolve) => setTimeout(resolve, ms)); +// };