From 9015f4d7c5f90c538ebec8566f5b794e43039748 Mon Sep 17 00:00:00 2001
From: Brian Litwin <brianlitwin@Brians-MBP.attlocal.net>
Date: Wed, 6 Mar 2024 12:59:23 -0500
Subject: [PATCH] upload image

---
 src/App.jsx | 55 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b8b8473..9f86790 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,31 +3,42 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
-function App() {
-  const [count, setCount] = useState(0)
+function ImageUpload() {
+  const [image, setImage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState('');
+
+  const handleImageChange = (event) => {
+    if (event.target.files && event.target.files[0]) {
+      const file = event.target.files[0];
+
+      setImage(file);
 
+      // Create a preview URL for the selected image
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreviewUrl(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleImageChange} />
+      {previewUrl && (
+        <div>
+          <img src={previewUrl} alt="Preview" style={{width: '100%', height: 'auto'}} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+
+function App() {
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <ImageUpload/>
     </>
   )
 }