import { useEffect, useState } from "react"; import Upload from 'rc-upload'; import * as XLSX from 'xlsx'; import { checkedImage, convertBase64 } from "@/helpers/convertBase64"; export const UploadForm = ({ submitCount, errors, touched, name, title, value, remove, index, values, insert }: { submitCount: number; errors: any, touched: any, name: string; title: string; value?: any, remove: any, index: number, values: any, insert: any }) => { const [upLoading, setUpLoading] = useState(false); const [image, setImage] = useState(value); let pathArr = name.split('.'); let errorValue = pathArr.reduce((prev, curr) => prev && prev[curr], errors); // let touchedValue = pathArr.reduce((prev, curr) => prev && prev[curr], touched); useEffect(() => { if (value) { if (value instanceof File) { convertBase64(value).then((res) => { setImage(res); }); } else { setImage(value); } } }, [value]); return ( <>
{ const { type, size }: any = checkedImage(file); if (type & size) { const base64: any = await convertBase64(file); setUpLoading((upLoading) => !upLoading); setTimeout(() => { insert(index, { id: values.voyageImgs[index]?.id, img: file, type: "new" }) setImage(base64); setUpLoading((upLoading) => !upLoading); }, 500); } return false; }} style={{ display: 'inline-block' }} >
{!upLoading ? ( image ? ( profile { setImage(undefined) }} /> ) : (

Click or drag file to this area to upload

) ) : (
)}
{submitCount ? errorValue &&
{errorValue}
: ''}
); }; export const UploadSingleForm = ({ setFieldValue, name, title, value, submitCount, errors, touched }: { setFieldValue: any; name: string; title: string; value?: any, submitCount: number; errors: any; touched: any; }) => { const [upLoading, setUpLoading] = useState(false); const [image, setImage] = useState(value); useEffect(() => { if (value) { if (value instanceof File) { convertBase64(value).then((res) => { setImage(res); }); } else { setImage(value); } } }, [value]); return (
{ const { type, size }: any = checkedImage(file); if (type & size) { const base64: any = await convertBase64(file); setUpLoading((upLoading) => !upLoading); setTimeout(() => { setFieldValue(name, file); setImage(base64); setUpLoading((upLoading) => !upLoading); }, 500); } return false; }} style={{ display: 'inline-block' }} >
{!upLoading ? ( image ? ( profile { setImage(undefined) }} /> ) : (

Click or drag file to this area to upload

) ) : (
)}
{submitCount ? errors[name] && touched[name] &&
{errors[name]}
: ''}
); }; export const UploadSingleFileForm = ({ setFieldValue, name, title, value, submitCount, errors, touched }: { setFieldValue: any; name: string; title: string; value?: string, submitCount: number; errors: any; touched: any; }) => { const [upLoading, setUpLoading] = useState(false); const [image, setImage] = useState(value); return (
{ if (file) { setUpLoading((upLoading) => !upLoading); setTimeout(async () => { setFieldValue(name, file); const getData = (file: any) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target!.result as ArrayBuffer); const workbook = XLSX.read(data, { type: 'array' }); // Process the workbook data const nestedArray = workbook.SheetNames.map((name) => { const worksheet = workbook.Sheets[name]; const jsonData: any[][] = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); return jsonData }) const flatArray = nestedArray.flatMap((subArray, indexArray) => [...indexArray == 0 ? subArray : subArray.filter((it, index) => index != 0)]); resolve(flatArray); }; reader.readAsArrayBuffer(file); reader.onerror = (error) => { reject(error); }; }); }; const data: any = await getData(file); setFieldValue("column", data[0]); setImage('/assets/images/csv.png'); setUpLoading((upLoading) => !upLoading); }, 500); } return false; }} multiple={false} style={{ display: 'inline-block' }} >
{!upLoading ? ( image ? ( profile { setImage(undefined) }} /> ) : (

Click or drag file to this area to upload

) ) : (
)}
{submitCount ? errors[name] && touched[name] &&
{errors[name]}
: ''}
); };