hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

useSWR upload

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-01 15:28:38 +01:00
parent 153d2156e1
commit 6c15821467
9 changed files with 92 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
php/php-dog/getDog.php
View File

@ -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,

4
src/components/FileUpload.tsx
View File

@ -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,7 +24,7 @@ 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));
})

2
src/components/Header.tsx
View File

@ -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';

2
src/components/Login.tsx
View File

@ -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';

44
src/components/PreviewUpload.tsx
View File

@ -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<string | undefined >(undefined);
// const [dimensionWidth, setDimensionWidth] = useState(0);
// const [dimensionHeight, setDimensionHeight] = useState(0);
function PreviewUpload({chgFile}:{chgFile: any})
{
const [file, setFile] = useState<string | undefined >(undefined);
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))
// {
// Axios.post<ResponseT>('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 (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
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;

8
src/components/Profil.tsx
View File

@ -88,8 +88,8 @@ function Profil()
}
setFormData(formData);
update data with phpapi
mutate
// update data with phpapi
// mutate
}
const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) =>
@ -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;

27
src/services/CreateQr.ts
View File

@ -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');
}

28
src/services/FileUploadService.ts
View File

@ -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;

46
src/services/PhpApi.ts
View File

@ -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');
console.log("Api session");
console.log(res);
let formData = new FormData();
const {data} = res;
return data;
}
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);
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));
// };