preview upload php

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;