diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx
index c569911..9eaa26d 100644
--- a/src/components/UploadProduct/index.jsx
+++ b/src/components/UploadProduct/index.jsx
@@ -8,7 +8,7 @@ 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
 
@@ -143,7 +143,7 @@ export default function UploadProduct() {
     }
     
     let reqData = { // PAYLOAD FOR API CALL
-      file_name: selectedFile.replace(/ /gi, ""),
+      file_name: selectedFile.substring(0,21).replace(/ /gi, ""),//selectedFile.replace(/[ -]/gi, ""),
       file_size: imgDetails.size,
       file_type: imgDetails.type,
       file_data: img,
@@ -158,7 +158,6 @@ export default function UploadProduct() {
     //API CALL TO UPLOAD COMES HERE
     setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE
     apiCall.sendFiles(reqData).then(res=>{
-      console.log('TESTING', res)
       if(res.status != 200 || res.data.internal_return < 0){
         return setRequestStatus({loading: false, status: false, message: 'Something went wrong, try again'})
       }
@@ -264,8 +263,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">
diff --git a/src/views/UploadProductPage.jsx b/src/views/UploadProductPage.jsx
index 5c51b17..52d7dcd 100644
--- a/src/views/UploadProductPage.jsx
+++ b/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} />;
 }