Client code

// Client code || app/upload/page.tsx
"use client"
import React, { useState } from 'react'

const UploadPage: React.FC = () => {
    const [file, setFile] = useState<File | null>(null)
    const [company, setCompany] = useState("")
    const [companies, setCompanies] = useState<string[]>(["Empresa 1", "Empresa 2", "Empresa 3"])
    const [success, setSuccess] = useState(false)
    const [error, setError] = useState<string | null>(null)
    const [otherCompany, setOtherCompany] = useState('')

    const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFile(e.target.files![0])
    }

    const handleCompanyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setCompany(e.target.value)
    }

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        try {
            // send the file and company to the API
            const data = new FormData()
            data.append("file", file!)
            if (company === "other") {
                data.append("company", otherCompany)
            } else {
                data.append("company", company)
            }
            const response = await fetch('/api/upload2', {
                method: 'POST',
                body: data,
            })
            if (!response.ok) throw new Error(await response.text())
            setSuccess(true)
        } catch (err) {
            setError(err.message)
        }
    }

    return (
        <div>
            {success && <div>Upload Successful!</div>}
            {error && <div>Error: {error}</div>}
            <form onSubmit={handleSubmit}>
                <div>
                    <input
                        type="file"
                        accept=".xml, .zip"
                        onChange={handleFileUpload}
                    />
                </div>
                <div>
                    <select value={company} onChange={handleCompanyChange}>
                        <option value="" disabled>
                            Selecciona una empresa
                        </option>
                        {companies.map(c => (
                            <option key={c} value={c}>
                                {c}
                            </option>
                        ))}
                        <option value="other">Otra</option>
                    </select>
                    {company === "other" && (
                        <input
                            type="text"
                            placeholder="Escribir empresa manualmente"
                            value={otherCompany}
                            onChange={e => setOtherCompany(e.target.value)}
                        />
                    )}
                </div>
                <button type="submit">Upload</button>
            </form>
        </div>
    )
}

export default UploadPage