Merge pull request #28 from sharmine-s/image-api

Cloudinary upload widget

frontend/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "proxy": "http://localhost:8080",
   "dependencies": {
+    "@cloudinary/react": "^1.11.2",
+    "@cloudinary/url-gen": "^1.10.1",
     "cypress": "^10.7.0",
     "eslint": "^8.23.0",
     "jwt-decode": "^3.1.2",

frontend/public/index.html

@@ -10,6 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- 
+      This includes cloudinary widget javascript file
+    -->
+    <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

frontend/src/components/app/App.js

@@ -11,19 +11,19 @@ import {
 } from "react-router-dom";
 
 const App = () => {
-    return (
-        <> 
-          <div className='logo'>
-          <img src="https://www.dropbox.com/s/j7fqdd02ttkt97a/acebook-logos_white.png?raw=1" alt="Logo" />
-          </div>
-          <Routes>
-            <Route path='/'  element={ <Navigate to="/posts"/> }/>
-            <Route path='/posts'  element={<Feed navigate={ useNavigate() }/>}/>
-            <Route path='/login'  element={<LoginForm  navigate={ useNavigate() }/>}/>
-            <Route path='/signup' element={<SignUpForm navigate={ useNavigate() }/>}/>
-          </Routes>
-        </>
-    );
+  return (
+      <> 
+        <div className='logo'>
+        <img src="https://www.dropbox.com/s/j7fqdd02ttkt97a/acebook-logos_white.png?raw=1" alt="Logo" />
+        </div>
+        <Routes>
+          <Route path='/'  element={ <Navigate to="/posts"/> }/>
+          <Route path='/posts'  element={<Feed navigate={ useNavigate() }/>}/>
+          <Route path='/login'  element={<LoginForm  navigate={ useNavigate() }/>}/>
+          <Route path='/signup' element={<SignUpForm navigate={ useNavigate() }/>}/>
+        </Routes>
+      </>
+  );
 }
 
 export default App;

frontend/src/components/cloudinary/CloudinaryUploadWidget.js

@@ -0,0 +1,70 @@
+// This is a multipurpose template. 
+// No integration solutions are fully tested.
+// To use this file, create a copy, rename it,
+// and build from there.
+
+// If you are using this as a child component to a POST form,
+// you will need to pass `imageUrl` up to the parent
+// via a `useState` callback passed in by parent
+// and used on line 6.
+
+const CloudinaryUploadWidget = () => {
+
+  // Depending on your use case, you may need to wrap this in a useEffect?
+  // In which case, the nature of the return may need to change.
+  // When we had this on /signup without a useEffect, 
+  // clicking the widget button sent the parent form data if
+  // it was valid (so a user was created as if they had clicked 'Sign Up'.
+
+  // Cloudinary says:
+  // Remove the comments from the code below to add
+  // additional functionality.
+  // Note that these are only a few examples, to see
+  // the full list of possible parameters that you
+  // can add see:
+  //   https://cloudinary.com/documentation/upload_widget_reference
+
+  const openWidget = () => { window.cloudinary.createUploadWidget(
+    {
+      cloudName: "acebook",
+      uploadPreset: "acebook_unsigned_preset",
+      cropping: true, //add a cropping step
+      multiple: false,  //restrict upload to a single file
+      // showAdvancedOptions: true,  //add advanced options (public_id and tag)
+      // sources: [ "local", "url"], // restrict the upload sources to URL and local files
+      // folder: "user_images", //upload files to the specified folder
+      // tags: ["users", "profile"], //add the given tags to the uploaded files
+      // context: {alt: "user_uploaded"}, //add the given context data to the uploaded files
+      // clientAllowedFormats: ["images"], //restrict uploading to image files only
+      // maxImageFileSize: 2000000,  //restrict file size to less than 2MB
+      // maxImageWidth: 2000, //Scales the image down to a width of 2000 pixels before uploading
+      // theme: "purple", //change to a purple theme
+    },
+    (error, result) => {
+      if (!error && result && result.event === "success") {
+        console.log("Done! Here is the image info: ", result.info);
+        // To capture the url from the result:
+        // const imageUrl = result.info.secure_url;
+
+        // add backend fetch here, for example
+        // If you were to modify the user:avatar, you could do:
+
+        // fetch('/users', {
+        //   method: 'patch',
+        //   headers: {
+        //     "Content-Type": "application/json",
+        //   },
+        //   body: JSON.stringify({ imageURL: imageUrl }),
+        // })
+      }
+    }).open();
+  };
+
+  return (
+    <div>
+      <button onClick={openWidget}>Choose an image to upload as your avatar</button>
+    </div>
+  );
+}
+
+export default CloudinaryUploadWidget;

frontend/src/components/post/Post.js

@@ -43,8 +43,8 @@ const Post = ({post, userId}) => {
     minute: 'numeric',
   });
 
-// The default image is accessed in the public folder, 
-// refactoring needed when upload image API is implimented
+  // The default image is accessed in the public folder, 
+  // refactoring needed when upload image API is implimented
   return(
     <article className="post" data-cy="post" key={ post._id }>
       <img className="avatar" src={ process.env.PUBLIC_URL + post.user.avatar } alt='avatar' width='50'></img> 

frontend/src/components/user/SignUpForm.js

@@ -101,10 +101,7 @@ const SignUpForm = ({ navigate }) => {
           <label htmlFor="password"></label>
           <input placeholder="Password" id="password" type="password" value={password} onChange={handlePasswordChange} />
           <p className="validation-error">{validationError?.password}</p>
-        </div>
-
-        <div>
-        <input id="submit" type="submit" value="Sign Up" />
+          <input id="submit" type="submit" value="Sign Up" />
         </div>
       </form>
          </div>