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"; export default function UploadProduct() { // 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 [img, setImg] = useState(null); const changeFile = (e, file) => { if (e) { const imgRead = new FileReader(); imgRead.onload = (event) => { setImg(event.target.result); }; // most importend imgRead.readAsDataURL(e.target.files[0]); } if (file) { if (file[0].name) { setSelectedFile(file[0].name); const imgRead = new FileReader(); imgRead.onload = (event) => { setImg(event.target.result); }; // most importend imgRead.readAsDataURL(file[0]); } } }; // 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 */}

Create new item

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

Image,Video,Audio or 3D Model

File types suppported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM, OGG, GLB, GLTF. Max Size : 100 MB

{img ? (
changeFile(e)} />
) : (
browseImg()} >

Drag files to upload or Browse

changeFile(e)} />
)}
{/* product upload field */}
{/* bottom action */}
Create Now
{/* === 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?

)}
); }