Untitled

update the below code to follow the below:

Excel upload->validation->[(SUCCESS)convert to JSON->call API to insert data]/[(ERROR) show particular error msg for certain cell where it failed]

import React, { useRef, useState } from 'react';
import { AppContext, useAppState } from '@d-lift/core';
import {
    SimpleFileUpload,
    Label,
    Button,
    Group,
    Section,
    ListItem,
    List,
    Modal,
    Para,
    LineBreak,
    Grid,
    Row,
    Column,
} from '@d-lift/uxcomponents';

const ExcelUpload = () => {
    const [status, setStatus] = useState('initial');
    const [uploadedFiles, setUploadedFiles] = useState([]);
    const fileInputRef = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileChange = (e) => {
        if (Array.isArray(e) && e.length > 0) {
            const newFile = e[0];
            setSelectedFile(newFile);
            handleUpload(newFile);
        } else {
            console.log('No file selected');
        }
    };

    const handleUpload = async (file) => {
        try {
            if (!file) {
                console.error('No file selected');
                setStatus('fail');
                return;
            }

            console.log('Processing file:', file);

            setUploadedFiles((prevFiles) => [
                ...prevFiles,
                {
                    id: Math.random() * 100 + 1,
                    name: file.name,
                    // type: file.type,
                    // size: file.size,
                },
            ]);

            //document.getElementById('root').scrollIntoView();

            setStatus('success');
        } catch (error) {
            console.error(error);
            setStatus('fail');
        }
    };

    const excelSheetValidator = (file) => {
        if (file.name.length > maxLength) {
            return {
                code: 'name-too-large',
                message: `Name is larger than ${maxLength} characters`,
            };
        }
        return null;
    };

    return (
        <>
            <div className="ux-rfi-attachment-container ux-rfi-green-border">
                <Label
                    className="mb-0"
                    model="AddAttachments.fileList"
                    labelKey="attachments"></Label>
                <Section className="pt-4">
                    <List>
                        {uploadedFiles.length > 0 ? (
                            uploadedFiles.map((file) => (
                                <ListItem key={file.id} iconKey={null}>
                                    {/* {file.type}  */}
                                    {file.name}
                                    {/* - {file.size} bytes */}
                                </ListItem>
                            ))
                        ) : (
                            <ListItem iconKey={null} labelKey="empty_err"></ListItem>
                        )}
                    </List>
                    <SimpleFileUpload
                        model="AddAttachments.uploadedFiles"
                        allowDragAndDrop={false}
                        inputDisplayType="custom"
                        ref={fileInputRef}
                        style={{ display: 'none' }}
                        onDropAccepted={handleFileChange}
                        validator={excelSheetValidator}
                        accept=".xls,.xlsx">
                        <Button
                            size="small"
                            click={() => fileInputRef.current && fileInputRef.current.click()}
                            className="ux-rfi-green-button">
                            <Group width="1,10">
                                <i className="fa fa-plus" aria-hidden="true"></i>Add Attachment
                            </Group>
                        </Button>
                    </SimpleFileUpload>
                </Section>
            </div>
        </>
    );
};

export default ExcelUpload;