preview upload php

src/App.tsx

@@ -33,7 +33,7 @@ const App: React.FC = () =>
                   <Route path="/login" element={<Login/>} />
                   <Route path="/reg" element={<Register/>} />
                   <Route path="/impressum" element={<Impressum/>} />
-                  <Route path="/upload" element={<FileUpload/>} />
+                  {user && <Route path="/upload" element={<FileUpload/>} />}
               </Routes>
               <Footer/>
             </BrowserRouter>

src/components/FileUpload.tsx

@@ -1,13 +1,13 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import UploadService from "../services/FileUploadService";
 import IFile from "../types/File";
+import PreviewUpload from "./PreviewUpload";
 
 const FileUpload: React.FC = () => 
 {
   const [currentFile, setCurrentFile] = useState<File>();
   const [progress, setProgress] = useState(0);
   const [message, setMessage] = useState("");
-  const [fileInfos, setFileInfos] = useState([]);
 
   
   const selectFile = (event: React.ChangeEvent<HTMLInputElement>) => 
@@ -30,11 +30,7 @@ const FileUpload: React.FC = () =>
       .then((response) => 
 	  {
         setMessage(response.data.message);
-        return UploadService.getFiles();
-      })
-      .then((files) => 
-	  {
-        setFileInfos(files.data);
+        return;
       })
       .catch((err) => 
 	  {
@@ -53,25 +49,17 @@ const FileUpload: React.FC = () =>
       });
   };
 
-  useEffect(() => 
-  {
-    UploadService.getFiles().then((response) => 
-	{
-      setFileInfos(response.data);
-    });
-  }, []);
-
 
 
   return (
   <div>
 	<div className="row">
 	  <div className="col-8">
-		<label className="btn btn-default p-0">
+	    <PreviewUpload chgFile={selectFile} />
+		{/* <label className="btn btn-default p-0">
 		  <input type="file" onChange={selectFile} />
-		</label>
+		</label> */}
 	  </div>
-
 	  <div className="col-4">
 		<button
 		  className="btn btn-success btn-sm"
@@ -104,17 +92,6 @@ const FileUpload: React.FC = () =>
 	  </div>
 	)}
 
-	<div className="card mt-3">
-	  <div className="card-header">List of Files</div>
-	  <ul className="list-group list-group-flush">
-		{/* {fileInfos &&
-		  fileInfos.map((file: IFile, index: number) => (
-			<li className="list-group-item" key={index}>
-			  <a href={file.url}>{file.name}</a>
-			</li>
-		  ))} */}
-	  </ul>
-	</div>
   </div>
 	
   );

src/components/PreviewUpload.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+function PreviewUpload({chgFile}:{chgFile: any}) {
+  const [file, setFile] = useState<string | undefined >(undefined);
+  const [dimensionWidth, setDimensionWidth] = useState(0);
+  const [dimensionHeight, setDimensionHeight] = useState(0);
+
+  const handleChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): Promise<any> => {
+    // const { target } = event;
+    // 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('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]);
+
+    const fileLoaded = URL.createObjectURL(event.target.files![0]);
+    const files = event.target.files;
+
+    console.log('files: ', files);
+    const dimensions = await someFunction(fileLoaded);
+    setDimensionWidth(dimensions.width);
+    setDimensionHeight(dimensions.height);
+    console.log('dimensions: ', dimensions);
+    console.log('dimensions width: ', dimensions.width);
+    console.log('dimensions height: ', dimensions.height);
+    setFile(fileLoaded);
+
+    chgFile(event);
+  };
+  const getHeightAndWidthFromDataUrl = (dataURL: string) =>
+    new Promise<{height: number, width: number}>((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({
+          height: img.height,
+          width: img.width,
+        });
+      };
+      img.src = dataURL;
+    });
+  // Get dimensions
+  const someFunction = async (file: any) => {
+    console.log('file: ', file);
+    const dimensions = await getHeightAndWidthFromDataUrl(file);
+    return dimensions;
+  };
+
+  return (
+    <div>
+      <input
+        type="file"
+        onChange={handleChange}
+        accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
+      />
+      <img
+        src={file}
+        style={{
+          display: 'flex',
+          border: '2px solid tomato',
+          maxWidth: '300px',
+          maxHeight: '300px',
+        }}
+      />
+      {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
+    </div>
+  );
+}
+export default PreviewUpload;

src/services/FileUploadService.ts

@@ -20,13 +20,9 @@ const upload = (file: File, onUploadProgress: any): Promise<any> => {
   return uploadRes;
 };
 
-const getFiles = () : Promise<any> => {
-    return Axios.get("/files");
-  };
-  
+ 
   const FileUploadService = {
-    upload,
-    getFiles,
+    upload
   };
   
   export default FileUploadService;