add category checkboxes to upload outfit

client/components/AllOutfits.jsx

@@ -34,6 +34,7 @@ const AllOutfits = ({ SSID }) => {
   console.log('outfitImage:', outfitImage);
   console.log('outfitDes:', outfitDes);
 
+  // get the image and description data, as well as the category information from the server!
   const array = [];
   for (let i = 0; i < outfitImage.length; i++) {
     array.push(

client/components/UploadOutfit.jsx

@@ -8,16 +8,29 @@ const UploadOutfit = ({ SSID }) => {
   const [file, setFile] = useState(undefined);
   const [description, setDescription] = useState('');
   const [images, setImages] = useState([]);
+  // checkboxes!
+  const [categories, setCategories] = useState({
+    casual: false,
+    smartCasual: false,  
+    businessAttire: false,
+    formal: false,
+    athleisure: false,
+  });
 
   const [imagePath, setImagePath] = useState('');
   const [imageDescription, setImageDescription] = useState('');
 
   // SEND IMAGE AS FORM DATA
-  async function postImage({ image, description, SSID }) {
+  async function postImage({ image, description, SSID, categories }) {
     const formData = new FormData();
     formData.append('image', image);
     formData.append('description', description);
     formData.append('SSID', SSID);
+    formData.append('casual', categories.casual);
+    formData.append('smart-casual', categories.smartCasual);
+    formData.append('business-attire', categories.businessAttire);
+    formData.append('formal', categories.formal);
+    formData.append('athleisure', categories.athleisure);
 
     const result = await axios.post('/outfits/upload', formData, {
       headers: { 'Content-Type': 'multipart/form-data' },
@@ -29,7 +42,7 @@ const UploadOutfit = ({ SSID }) => {
   // SUBMIT IMAGE BUTTON
   const submitImage = async (e) => {
     e.preventDefault();
-    const result = await postImage({ image: file, description, SSID });
+    const result = await postImage({ image: file, description, SSID, categories });
     console.log('Result after submiting image: ', result);
 
     // setImages([result.image, ...images]);
@@ -43,6 +56,16 @@ const UploadOutfit = ({ SSID }) => {
     setFile(file);
   };
 
+  // checkboxes!
+  const handleCheckChange = (event) => {
+    const { name, value, checked } = event.target;
+    if (name === 'categories') {
+      setCategories(
+        {...categories, [value]:checked},
+      )
+    }
+  }
+
   return (
     <>
       <div
@@ -84,6 +107,67 @@ const UploadOutfit = ({ SSID }) => {
             type="text"
             placeholder="description..."
           />
+
+          <div>
+            <input 
+              type="checkbox"
+              id="casual"
+              value="casual"
+              name="categories"
+              checked={categories.casual}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="casual">Casual</label>
+          </div>
+
+          <div>
+            <input 
+              type="checkbox"
+              id="smartCasual"
+              value="smartCasual"
+              name="categories"
+              checked={categories.smartCasual}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="smartCasual">Smart Casual</label>
+          </div>
+
+          <div>
+            <input 
+              type="checkbox"
+              id="businessAttire"
+              value="businessAttire"
+              name="categories"
+              checked={categories.businessAttire}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="businessAttire">Business Attire</label>
+          </div>
+
+          <div>
+            <input 
+              type="checkbox"
+              id="formal"
+              value="formal"
+              name="categories"
+              checked={categories.formal}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="formal">Formal</label>
+          </div>
+
+          <div>
+            <input 
+              type="checkbox"
+              id="athleisure"
+              value="athleisure"
+              name="categories"
+              checked={categories.athleisure}
+              onChange={handleCheckChange}
+            />
+            <label htmlFor="athleisure">Athleisure</label>
+          </div>
+
           <input
             style={{
               height: '40px',