import React, { useEffect, useRef, useState } from "react"; import { Link } from "react-router-dom"; import PreviewProductCardStyleOne from "../Cards/PreviewProductCardStyleOne"; import ModalCom from "../Helpers/ModalCom"; import Layout from "../Partials/Layout"; // import DropFileWidget from "./DropFileWidget"; import ProductUploadField from "./ProductUploadField"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import usersService from "../../services/UsersService"; import { useNavigate } from "react-router-dom"; export default function UploadProduct({uploadTypes}) { const apiCall = new usersService() const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''}) // DETERMINES THE STATUS OF UPLOAD const navigate = useNavigate() // preview modal const [previewProductModal, setPreviewProductModal] = useState(false); // cancelUploadModal const [cancelUploadModal, setCancelUploadModal] = useState(false); const cancelUploadModalHandler = () => { setCancelUploadModal(!cancelUploadModal); }; // price type const [priceType, setPriceType] = useState("fixed"); const changePriceTypeHandler = (value) => { setPriceType(value); }; // item name const [itemName, setItemName] = useState(""); const changeItemNameHandler = (e) => { setItemName(e.target.value); }; // link const [link, setLink] = useState(""); const linkHandler = (e) => { setLink(e.target.value); }; // price const [price, setPrice] = useState(""); const pricehandler = (e) => { setPrice(e.target.value); }; // description const [description, setDescription] = useState(""); const descriptionHandler = (e) => { setDescription(e.target.value); }; // royalties const [royalties, setRoyalties] = useState(""); const royaltiesHandler = (e) => { setRoyalties(e.target.value); }; // propertiesKey const [propertiesKey, setPropertiesKey] = useState(""); const propertiesKeyHandler = (e) => { setPropertiesKey(e.target.value); }; // propertiesValue const [propertiesValue, setPropertiesValue] = useState(""); const propertiesValueHandler = (e) => { setPropertiesValue(e.target.value); }; // unlock purchase enable const [purchase, setPurchase] = useState(false); const purchaseValueHandler = () => { setPurchase(!purchase); }; const previewProductToggleHandler = () => { setPreviewProductModal(!previewProductModal); }; const previewUploadProduct = () => { setPreviewProductModal(!previewProductModal); }; const fileSelect = useRef(null); const fileRef = useRef(null); const [selectedFile, setSelectedFile] = useState(''); // const [selectedFile, setSelectedFile] = useState({name: '', size: ''}); const [img, setImg] = useState(null); const [imgDetails, setImgDetails] = useState('') const changeFile = (e, file) => { if (e) { let uploadedFileType = e.target.files[0].type.split("/")[0].toLowerCase(); setSelectedFile(e.target.files[0].name); setImgDetails(e?.target?.files[0]) const imgRead = new FileReader(); imgRead.onload = (event) => { // setImg(event.target.result); setImg({ type: uploadedFileType, file: event.target.result }); }; // most importend imgRead.readAsDataURL(e.target.files[0]); } if (file?.length) { let uploadedFileType = file[0].type.split("/")[0].toLowerCase(); if (file[0].name) { setSelectedFile(file?.[0].name); setImgDetails(file?.[0]) const imgRead = new FileReader(); imgRead.onload = (event) => { // setImg(event.target.result); setImg({ type: uploadedFileType, file: event.target.result }); }; // most importend imgRead.readAsDataURL(file[0]); } } }; //FUNCTION TO UPLOAD ITEM const uploadItem = () => { let errorArr = [] let uploadInfo = { // SUBMITTED DETAILS FROM USER img, itemName, description } //LOOPS THROUGH ITEM DETAILS FOR EMPTINESS for(let info in uploadInfo){ if(!uploadInfo[info]){ errorArr.push(info) } } // TEST TO SEE IF FIELDS ARE EMPTY if(errorArr.length){ let message = '' if(errorArr.length == 1 && errorArr.includes('img')){ message='Please select file to upload' }else if (errorArr.length == 1 && !errorArr.includes('img')){ message='Item name or description cannot be empty' }else if (errorArr.length > 1 && errorArr.includes('img')){ message='Please select file to upload & Item name/description cannot be empty' }else { message='Item name/description cannot be empty' } setRequestStatus({loading: false, status: null, message}) 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, ""), file_size: imgDetails.size, file_type: imgDetails.type, file_data: img.file, title: itemName, description: description, msg_type: 'FILE', // action: 'WRENCHBOARD_RESOURCE_MYFILES', action: 11307 } 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 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 function handleDrop(e) { const dt = e.dataTransfer; const { files } = dt; changeFile(false, files); } // for stopPropagation and preventDefault function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } function highlight() { fileSelect.current.classList.add("highlight"); } function unhighlight() { fileSelect.current.classList.remove("highlight"); } const browseImg = () => { fileRef.current.click(); }; useEffect(() => { // drop event fileSelect.current.addEventListener("drop", handleDrop, false); // for stopPropagation and preventDefault ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => { fileSelect.current.addEventListener(eventName, preventDefaults, false); }); // for highlight ["dragenter", "dragover"].forEach((eventName) => { fileSelect.current.addEventListener(eventName, highlight, false); }); ["dragleave", "drop"].forEach((eventName) => { fileSelect.current.addEventListener(eventName, unhighlight, false); }); }); // data sorted const data = { priceType, itemName, link, description, price, royalties, propertiesKey, propertiesValue, purchase, username: "Bilout", profile_img: "profile.png", thumbnil: "tranding-2.jpg", remaing: "2023-03-04 4:00:00", }; const deleteData = () => { setItemName(""); setLink(""); setPrice(""); setDescription(""); setRoyalties(""); setPropertiesKey(""); setPropertiesValue(""); setPurchase(false); cancelUploadModalHandler(); setImg(null); }; return ( <>
{/* heading */}

{requestStatus.status == null ? 'Create new item' : 'Upload new item'}

{/** TODO: upload product main widget */}
{/* section-heading */}

Image,Video,Audio or Documents

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 }

{img ? (
{img.type === "image" ? ( ) : img.type === "video" ? ( ) : img.type != null ? (

{selectedFile}

) : null} changeFile(e)} />
) : (
browseImg()} >

Drag files to upload or Browse

changeFile(e)} />
)}
{/* product upload field */}
{/* bottom action */}

{requestStatus.message && requestStatus.message}

{/* previewUploadProduct(data)}*/} {/* type="button"*/} {/* className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center border-gradient sm:text-18 text-sm rounded-full text-back"*/} {/*>*/} {/* Preview*/} {/**/} {requestStatus.loading ? : }
{/* === action modals === */} {/* TODO: preview modal */} {previewProductModal && (
{/* heading */}

Item Privew

Create Now
)} {/* TODO: cancel modal */} {cancelUploadModal && (

Confirm

Are you sure you want to Navigate away from this page?

)}
); } //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 } }