file upload size validation initiated

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
+import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from 'react-router-dom';
 import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";
 
 function FbookRedirect() {
@@ -22,38 +22,50 @@ function FbookRedirect() {
       console.log(codeResponse);
       
       /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
+      https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/#exchangecode
+      Step 1. Get access token by code
 
-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
+      GET https://graph.facebook.com/v17.0/oauth/access_token?
+        client_id={app-id}
+        &redirect_uri={redirect-uri}
+        &client_secret={app-secret}
+        &code={code-parameter}
+
+      https://developers.facebook.com/docs/facebook-login/guides/access-tokens/get-long-lived
+      Step 2. Get long-lived token by access token
+      
+      curl -i -X GET "https://graph.facebook.com/{graph-api-version}/oauth/access_token?  
+      grant_type=fb_exchange_token&          
+      client_id={app-id}&
+      client_secret={app-secret}&
+      fb_exchange_token={your-access-token}" 
       */
+
+      // process.env.REACT_APP_FACEBOOK_CLIENT_ID
+      // process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE
+      
       var reqData = {
         auth_type: "FACEBOOK",
         code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+        redirect_uri: process.env.REACT_APP_FACEBOOK_REDIRECT_URL,
       };
-    //   userApi
-    //     .authStart(reqData)
-    //     .then((res) => {
-    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-    //         localStorage.setItem("member_id", `${res.data.member_id}`);
-    //         localStorage.setItem("uid", `${res.data.uid}`);
-    //         localStorage.setItem("session_token", `${res.data.session}`);
-    //         dispatch(updateUserDetails({...res.data}));
-    //         navigate('/', {replace: true})
-    //         return
-    //       }
-    //       navigate('/login', {state: {error: true}})
-    //     })
-    //     .catch((error) => {
-    //       navigate('/login', {state: {error: true}})
-    //       console.log(error);
-    //     });
+      userApi
+        .authStart(reqData)
+        .then((res) => {
+          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+            localStorage.setItem("member_id", `${res.data.member_id}`);
+            localStorage.setItem("uid", `${res.data.uid}`);
+            localStorage.setItem("session_token", `${res.data.session}`);
+            dispatch(updateUserDetails({...res.data}));
+            navigate('/', {replace: true})
+            return
+          }
+          navigate('/login', {state: {error: true}})
+        })
+        .catch((error) => {
+          navigate('/login', {state: {error: true}})
+          console.log(error);
+        });
     },[])
   return (
     <AuthLayout>

src/components/UploadProduct/index.jsx

@@ -8,8 +8,10 @@ import ProductUploadField from "./ProductUploadField";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 
-export default function UploadProduct() {
+export default function UploadProduct({uploadTypes}) {
   const apiCall = new usersService()
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''}) // DETERMINES THE STATUS OF UPLOAD
+
   // preview modal
   const [previewProductModal, setPreviewProductModal] = useState(false);
   // cancelUploadModal
@@ -86,7 +88,7 @@ export default function UploadProduct() {
       // most importend
       imgRead.readAsDataURL(e.target.files[0]);
     }
-    if (file) {
+    if (file?.length) {
       if (file[0].name) {
         setSelectedFile(file?.[0].name);
         setImgDetails(file?.[0])
@@ -100,7 +102,6 @@ export default function UploadProduct() {
     }
   };
 
-  const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''})
   //FUNCTION TO UPLOAD ITEM
   const uploadItem = () => {
     let errorArr = []
@@ -119,13 +120,6 @@ export default function UploadProduct() {
     // TEST TO SEE IF FIELDS ARE EMPTY
     if(errorArr.length){
       let message = ''
-      // for(let i = 0; i<errorArr.length; i++){
-      //   if(errorArr.includes('img')){
-      //     message+='Please select file to upload'
-      //   }else{
-      //     message+='Item name or decription cannot be empty'
-      //   }
-      // }
       if(errorArr.length == 1 && errorArr.includes('img')){
         message='Please select file to upload'
       }else if (errorArr.length == 1 && !errorArr.includes('img')){
@@ -140,16 +134,9 @@ export default function UploadProduct() {
         setRequestStatus({loading: false, status: false, message: ''})
       },5000)
     }
-
-    if(imgDetails.size > 2097152){ // CHECKS IF IMAGE SIZE IS MORE THAN "MB"
-      setRequestStatus({loading: false, status: null, message: 'Image must be less than 2MB'})
-      return setTimeout(()=>{
-        setRequestStatus({loading: false, status: false, message: ''})
-      },5000)
-    }
     
     let reqData = { // PAYLOAD FOR API CALL
-      file_name: selectedFile,
+      file_name: selectedFile.substring(0,21).replace(/ /gi, ""),//selectedFile.replace(/[ -]/gi, ""),
       file_size: imgDetails.size,
       file_type: imgDetails.type,
       file_data: img,
@@ -159,16 +146,39 @@ export default function UploadProduct() {
       // action: 'WRENCHBOARD_RESOURCE_MYFILES',
       action: 11307
     }
-    console.log('TESTING', reqData)
-    setRequestStatus({loading: true, status: null, message: ''})
+
+    if(!isValidFile(imgDetails, uploadTypes?.data)){ // FUNCTION TO CHECK IF FILE TYPE IS VALID
+      setRequestStatus({loading: false, status: null, message: 'File type not supported'})
+      return setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      },5000)
+    }
+
+    // let validSize = isValidFileSize(imgDetails, uploadTypes?.data) // FUNCTION TO CHECK IF FILE SIZE IS VALID
+    // if(!validSize.status){
+    //   setRequestStatus({loading: false, status: null, message: validSize.message})
+    //   return setTimeout(()=>{
+    //     setRequestStatus({loading: false, status: false, message: ''})
+    //   },5000)
+    // }
     
     //API CALL TO UPLOAD COMES HERE
-    setTimeout(()=>{
-      setRequestStatus({loading: false, status: true, message: 'Bad'})
-    },3000)
-    setTimeout(()=>{
-      setRequestStatus({loading: false, status: false, message: ''})
-    },7000)
+    setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE
+    apiCall.sendFiles(reqData).then(res=>{
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status: false, message: 'Something went wrong, try again'})
+      }
+      setRequestStatus({loading: false, status: true, message: 'Uploaded successfully'})
+      setImg('')
+      setItemName('')
+      setDescription('')
+    }).catch(error=>{
+      setRequestStatus({loading: false, status: false, message: 'Network error, try again'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      },5000)
+    })
   }
     
   //   drop event
@@ -260,8 +270,15 @@ export default function UploadProduct() {
                     Image,Video,Audio or Documents
                   </h1>
                   <p className="text-thin-light-gray text-base tracking-wide font-medium">
-                    File types supported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM,
-                    OGG, GLB, GLTF
+                    File types supported: {uploadTypes.loading && <span className="italic">loading...</span>}
+                    {/* JPG, PNG, GIP, SVG, MP4, MP3, WEBM, OGG, GLB, GLTF */}
+                    {uploadTypes?.data?.length ?
+                    uploadTypes?.data?.map((item, index) => {
+                      return index != uploadTypes.data.length-1 ? `${item.name}, ` : `${item.name}`
+                    })
+                    :
+                    null
+                    }
                   </p>
                 </div>
                 <div className="main-content w-full lg:flex justify-between lg:px-9 px-4">
@@ -412,7 +429,7 @@ export default function UploadProduct() {
                     <div className="preview-upload-product lg:w-[580px] lg:h-[622px] w-full h-full bg-white dark:bg-[#11131F]   lg:rounded-2xl">
                       <div className="w-full h-full flex flex-col justify-between">
                         {/* heading */}
-                        <div className="lg:px-[40px] lg:py-[33px] px-[30px] py-[23px] flex justify-between border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  mb-4 lg:mb-0">
+                        <div className="lg:px-[40px] lg:py-[33px] px-[30px] py-[23px] flex justify-between border-b border-light-purple dark:border-[#5356fb29]  mb-4 lg:mb-0">
                           <h1 className="text-dark-gray dark:text-white tracking-wide text-26 font-bold">
                             Item Privew
                           </h1>
@@ -558,3 +575,37 @@ export default function UploadProduct() {
     </>
   );
 }
+
+
+
+
+//FUNCTIONS to check if file upload type is valid
+const isValidFile = (file, supportedFile=[]) => {
+  let fileType = file.type.split("/")[1];
+  let valid = supportedFile.filter(item => (
+    item.name.toLowerCase() == fileType.toLowerCase()
+  ))
+  if(valid.length){
+    return true
+  }else{
+    return false
+  }
+}
+
+//FUNCTIONS TO CHECK IF FILE SIZE IS VALID
+const isValidFileSize = (file, supportedFile=[]) => {
+  let fileType = file.type.split("/")[1];
+  let fileSize = file.size;
+  let valid = supportedFile.filter(item => (
+    item.name.toLowerCase() == fileType.toLowerCase()
+  ))
+  if(valid.length){
+    if((Number(valid[0].max_size_mb) * 1048576) >= fileSize){
+      return {status: true}
+    }else{
+      return {status: false, message: `File must not exceed ${valid[0].max_size_mb}MB`}
+    }
+  }else{
+    return false
+  }
+}

src/views/UploadProductPage.jsx

@@ -1,6 +1,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import UploadProduct from "../components/UploadProduct";
+import usersService from "../services/UsersService";
 
 export default function UploadProductPage() {
-  return <UploadProduct />;
+  const [uploadTypes, setUploadTypes] = useState({loading: true, data: []});
+  const api = new usersService();
+
+  const getUploadTypes = async () => {
+    try {
+      const res = await api.getResourceList();
+      setUploadTypes({loading: false, data: res?.data?.upload_types.data});
+    } catch (error) {
+      setUploadTypes({loading: false, data: []});
+      throw new Error("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getUploadTypes();
+  }, []);
+  return <UploadProduct uploadTypes={uploadTypes} />;
 }