Need help with STORAGE (no tutorials online)

const uploadPage = () => {
    const [file, setFile] = useState<File | null>(null);

    const handleFileChange = (e:any) => {
        setFile(e.target.files[0]);
        console.log(file)
    };

    const handleSubmit = async (e:any) => {
        if (file) {
            const response = await appwriteFunctions.uploadFile(file);
            console.log(response);
        }
    }

return (
        <>
            <span className="font-bold text-4xl">Controls</span>
            <div className="flex flex-col items-end justify-end gap-4">
                <Label htmlFor="picture" className="text-xl">Upload ISO</Label>
                <form onSubmit={handleSubmit} className="w-full flex items-end justify-end">
                    <Input
                       onChange={handleFileChange}
                        id="file"
                        type="file"
                        ref="file"
                        value="Reset"
                        className="w-[19%] border-none h-fit px-5 py-3 text-md outline-dashed outline-1 hover:outline-yellow-100"
                    />
                    <Button type="submit" className="text-white px-4 py-2 rounded">
                        Upload File
                    </Button>
                    {file && <p className="text-sm mt-2">File selected: {file.name}</p>}
                </form>
            </div>
        </>