Cloudinary secure_url возвращает неопределенное значение, но img поэтому загружается в Cloudinary ⇐ Javascript

[Anonymous]

в NEXTJS v15 Cloudinary secure_url возвращает неопределенное значение, но img загружается в Cloudinary

• Консоль IMG: полная функция onUpload< /p>
• Консоль IMG: полный результат onUpload

Код Проблема:
const onUpload = (result: { info?: string | { secure_url?: string } }) => {
console.log('Upload result:', result); // Debug log
const secureUrl = typeof result.info === 'string' ? result.info : result.info?.secure_url;
if (secureUrl) {
onChange(secureUrl);
} else {
console.error('secure_url not found in upload result:', result);
}
};

Image-upload.tsx
'use client';
// global import
import React, { useEffect, useState } from 'react';

import { CldUploadWidget } from 'next-cloudinary'; // Replace 'some-library' with the actual library name

// local import
import { Button } from '@/components/ui/button';
import { ImagePlusIcon, Trash } from 'lucide-react';
import Image from 'next/image';

interface ImageUploadProps {
disabled?: boolean;
onChange: (value: string) => void;
onRemove: (value: string) => void;
value: string[];
}

const ImageUpload: React.FC = ({
disabled,
onChange,
onRemove,
value,
}) => {
// State to track if the component is mounted
const [isMounted, setIsMounted] = useState(false);

// useEffect hook to set the isMounted state to true after the component mounts
useEffect(() => {
setIsMounted(true);
}, []);

const onUpload = (result: { info?: string | { secure_url?: string } }) => {
console.log('Upload result:', result); // Debug log
const secureUrl = typeof result.info === 'string' ? result.info : result.info?.secure_url;
if (secureUrl) {
onChange(secureUrl);
} else {
console.error('secure_url not found in upload result:', result);
}
};

// If the component is not mounted, return null to prevent server-side rendering
if (!isMounted) return null;

return (

{/* Display the uploaded images */}

{value.map(url => (


{
onRemove(url);
}}
variant='destructive'
size='sm'
>



{url && (

)}

))}

{/* this is to open the image upload widget */}

{({ open }) => {
const onClick = () => {
open();
};
return (


Upload Image

);
}}


);
};

export default ImageUpload;


**Использование**
const formSchema = z.object({
label: z
.string()
.nonempty('Billboard label is required')
.min(3, 'Billboard label is too short'),
imageUrl: z.string().nonempty('Billboard image is required'),
});

type BillboardFormValues = z.infer;

const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: initialData || { label: '', imageUrl: '' },
});

(


Background image


image.url)
: []
}
disabled={loading}
onChange={url => {
const newValue = Array.isArray(field.value)
? [...field.value, { url }]
: [{ url }];
field.onChange(newValue);
}}
onRemove={url => {
const newValue = Array.isArray(field.value)
? field.value.filter(
(current: { url: string }) => current.url !== url,
)
: [];
field.onChange(newValue);
}}
/>



)}
/>



Подробнее здесь: https://stackoverflow.com/questions/793 ... in-cloudin