From b1bb730c7d97727ee7c903d43c76adbf3b8bff40 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 9 Aug 2023 17:01:38 +0100 Subject: [PATCH 1/5] made file name in upload not to have spaces --- src/components/UploadProduct/index.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 67cd95b..c569911 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -88,7 +88,7 @@ export default function UploadProduct() { // most importend imgRead.readAsDataURL(e.target.files[0]); } - if (file.length) { + if (file?.length) { if (file[0].name) { setSelectedFile(file?.[0].name); setImgDetails(file?.[0]) @@ -143,7 +143,7 @@ export default function UploadProduct() { } let reqData = { // PAYLOAD FOR API CALL - file_name: selectedFile, + file_name: selectedFile.replace(/ /gi, ""), file_size: imgDetails.size, file_type: imgDetails.type, file_data: img, @@ -158,6 +158,7 @@ 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'}) } -- 2.34.1 From 68e709f34b2ba2548bf8b5b33b17156b0db7b3bc Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 9 Aug 2023 18:19:34 +0100 Subject: [PATCH 2/5] list of supported uploads add --- src/components/UploadProduct/index.jsx | 16 +++++++++++----- src/views/UploadProductPage.jsx | 20 ++++++++++++++++++-- 2 files changed, 29 insertions(+), 7 deletions(-) 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

- File types supported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM, - OGG, GLB, GLTF + File types supported: {uploadTypes.loading && loading...} + {/* 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 + }

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 ; + 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 ; } -- 2.34.1 From 59a370d7630415a315d3026f3f14a84059e465d9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 9 Aug 2023 19:34:35 +0100 Subject: [PATCH 3/5] enforces user upload supported file before proceeding to upload --- src/components/UploadProduct/index.jsx | 38 +++++++++++++++++++++----- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 9eaa26d..2590ae4 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -134,13 +134,6 @@ export default function UploadProduct({uploadTypes}) { 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.substring(0,21).replace(/ /gi, ""),//selectedFile.replace(/[ -]/gi, ""), @@ -153,6 +146,21 @@ export default function UploadProduct({uploadTypes}) { // action: 'WRENCHBOARD_RESOURCE_MYFILES', action: 11307 } + + if(!isValidFile(reqData.file_type, 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) + } + + 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) + } + // console.log('TESTING',isValidFile(reqData.file_type, uploadTypes?.data)) // console.log('TESTING', reqData) //API CALL TO UPLOAD COMES HERE @@ -568,3 +576,19 @@ export default function UploadProduct({uploadTypes}) { ); } + + + + +//FUNCTIONS to check if file upload type is valid +const isValidFile = (file, supportedFile=[]) => { + let fileToCheck = file.split("/")[1] + let valid = supportedFile.filter(item => ( + item.name.toLowerCase() == fileToCheck.toLowerCase() + )) + if(valid.length){ + return true + }else{ + return false + } +} -- 2.34.1 From 07a443d082445bab40cd121b3708804b9a0d382a Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 9 Aug 2023 20:28:19 +0100 Subject: [PATCH 4/5] file upload size validation initiated --- src/components/UploadProduct/index.jsx | 43 ++++++++++++++++++-------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 2590ae4..0e1893e 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -147,21 +147,20 @@ export default function UploadProduct({uploadTypes}) { action: 11307 } - if(!isValidFile(reqData.file_type, uploadTypes?.data)){ // FUNCTION TO CHECK IF FILE TYPE IS VALID + 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) } - - 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) - } - // console.log('TESTING',isValidFile(reqData.file_type, uploadTypes?.data)) - // console.log('TESTING', reqData) + + // 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 setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE @@ -430,7 +429,7 @@ export default function UploadProduct({uploadTypes}) {
{/* heading */} -
+

Item Privew

@@ -582,9 +581,9 @@ export default function UploadProduct({uploadTypes}) { //FUNCTIONS to check if file upload type is valid const isValidFile = (file, supportedFile=[]) => { - let fileToCheck = file.split("/")[1] + let fileType = file.type.split("/")[1]; let valid = supportedFile.filter(item => ( - item.name.toLowerCase() == fileToCheck.toLowerCase() + item.name.toLowerCase() == fileType.toLowerCase() )) if(valid.length){ return true @@ -592,3 +591,21 @@ const isValidFile = (file, supportedFile=[]) => { 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 + } +} -- 2.34.1 From 330f47baa768fc6e7f145f70f0294bdee8ae75f4 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 9 Aug 2023 21:23:51 +0100 Subject: [PATCH 5/5] updated upload payloads --- src/components/UploadProduct/index.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/UploadProduct/index.jsx b/src/components/UploadProduct/index.jsx index 0e1893e..25a5a80 100644 --- a/src/components/UploadProduct/index.jsx +++ b/src/components/UploadProduct/index.jsx @@ -140,8 +140,8 @@ export default function UploadProduct({uploadTypes}) { file_size: imgDetails.size, file_type: imgDetails.type, file_data: img, - item_name: itemName, - item_description: description, + title: itemName, + description: description, msg_type: 'FILE', // action: 'WRENCHBOARD_RESOURCE_MYFILES', action: 11307 @@ -154,13 +154,13 @@ export default function UploadProduct({uploadTypes}) { },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) - // } + 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 setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE -- 2.34.1