diff --git a/package-lock.json b/package-lock.json index 69b37cc..fd92c0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-modal": "^3.16.1", - "react-router-dom": "^6.21.1", + "react-router-dom": "^6.21.2", "react-scripts": "^5.0.1", "stream-browserify": "^3.0.0", "url": "^0.11.3", @@ -3904,9 +3904,9 @@ "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, "node_modules/@remix-run/router": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", - "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==", + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz", + "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==", "engines": { "node": ">=14.0.0" } @@ -15726,11 +15726,11 @@ } }, "node_modules/react-router": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", - "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "version": "6.21.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.2.tgz", + "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==", "dependencies": { - "@remix-run/router": "1.14.1" + "@remix-run/router": "1.14.2" }, "engines": { "node": ">=14.0.0" @@ -15740,12 +15740,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz", - "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==", + "version": "6.21.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.2.tgz", + "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==", "dependencies": { - "@remix-run/router": "1.14.1", - "react-router": "6.21.1" + "@remix-run/router": "1.14.2", + "react-router": "6.21.2" }, "engines": { "node": ">=14.0.0" @@ -22671,9 +22671,9 @@ "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, "@remix-run/router": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", - "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==" + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz", + "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==" }, "@rollup/plugin-babel": { "version": "5.3.1", @@ -31220,20 +31220,20 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, "react-router": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", - "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "version": "6.21.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.2.tgz", + "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==", "requires": { - "@remix-run/router": "1.14.1" + "@remix-run/router": "1.14.2" } }, "react-router-dom": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz", - "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==", + "version": "6.21.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.2.tgz", + "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==", "requires": { - "@remix-run/router": "1.14.1", - "react-router": "6.21.1" + "@remix-run/router": "1.14.2", + "react-router": "6.21.2" } }, "react-scripts": { diff --git a/package.json b/package.json index 4d64a0d..f503322 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-modal": "^3.16.1", - "react-router-dom": "^6.21.1", + "react-router-dom": "^6.21.2", "react-scripts": "^5.0.1", "stream-browserify": "^3.0.0", "url": "^0.11.3", diff --git a/src/components/UploadModal.js b/src/components/UploadModal.js index 91887c3..75e2248 100644 --- a/src/components/UploadModal.js +++ b/src/components/UploadModal.js @@ -1,21 +1,23 @@ import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; import { storageRef } from "../firebaseStorage"; import { ref, uploadBytes, getDownloadURL } from "firebase/storage"; import axios from "axios"; import "../css/uploadModal.css"; -//Modal.setAppElement('#root'); //this is so accessibility readers can read the modal - const UploadModal = () => { const [isOpen, setIsOpen] = useState(false); const [selectedFile, setSelectedFile] = useState(null); - const [fileUrl, setFileUrl] = useState(null); + const [fileUrl, setFileUrl] = useState(null); const [title, setTitle] = useState(""); const [blurb, setBlurb] = useState(""); const [altText, setAltText] = useState(''); const [isUploading, setIsUploading] = useState(false); + + const navigate = useNavigate(); + const MAX_FILE_SIZE_MB = 5; // Maximum file size in MB const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024; @@ -24,7 +26,7 @@ const UploadModal = () => { setIsOpen(false); setTitle(""); setBlurb(""); - setFileUrl(null); //reset thumbnail preview + setFileUrl(null); setAltText(""); }; @@ -40,11 +42,9 @@ const UploadModal = () => { setSelectedFile(file); - // Read and display a thumbnail preview of the selected image const reader = new FileReader(); reader.onloadend = () => { - console.log('File read result:', reader.result); // Add this to check the file data URL - + console.log('File read result:', reader.result); setFileUrl(reader.result); }; reader.readAsDataURL(file); @@ -53,43 +53,38 @@ const UploadModal = () => { const handleAltTextChange = (event) => { setAltText(event.target.value); }; - + const handleUpload = async () => { if (!selectedFile) { console.log("Please choose a file to upload."); return; } - + setIsUploading(true); - + try { const fileName = `${Date.now()}_${selectedFile.name}`; const fileRef = ref(storageRef, fileName); - - // Upload the file + const snapshot = await uploadBytes(fileRef, selectedFile); - - // Get the download URL of the uploaded file const downloadURL = await getDownloadURL(fileRef); - + console.log("File uploaded successfully:", snapshot); console.log("Download URL:", downloadURL); - - // Now you can use the downloadURL to make a POST request to your backend + const picturePostData = { - pictures_post_title: title, - pictures_post_blurb: blurb, + pictures_post_title: title, + pictures_post_blurb: blurb, pictures_post_URL: downloadURL, alt_text: altText || "No alt text provided", likes_count: 0, }; - - //POST request to the backend + const response = await axios.post( `${process.env.REACT_APP_API_URL}/pictures`, picturePostData ); - + if (response.data && response.data.success) { console.log("Upload success!", response.data); } else { @@ -101,88 +96,85 @@ const UploadModal = () => { } finally { setIsUploading(false); closeModal(); + navigate("/gallery"); } }; + return (
- - {isOpen && ( -
-
- - × - -
-

Share the Exchange!

-
-
- -
-
- - setTitle(e.target.value)} - required - /> -
-
- -
- - {selectedFile && ( -
- {altText -
- )} -
-
-
- - +
+ + {selectedFile && ( +
+ {altText +
+ )} +
+
+
+ +