Невозможно установить метаданные при загрузке видео через API Youtube. ⇐ Javascript

[Anonymous]

Я пытался настроить модальную загрузку видео на Youtube с помощью Uppy v5.1.6 и Next.js с Mantine. Загрузка видеофайла прошла успешно, но я думаю, что браузер, возможно, не смог прочитать файл метаданных, который я уже настроил, поэтому Youtube по умолчанию сделал статус конфиденциальности общедоступным, в полезной нагрузке в сети консоли это выглядит так:
------WebKitFormBoundarykzTAZdzxpxr6yNSq
Content-Disposition: form-data; name="metadata"
undefined
------WebKitFormBoundarykzTAZdzxpxr6yNSq
Content-Disposition: form-data; name="video"; filename="test_video.mp4"
Content-Type: video/mp4

и вот мой полный код, вы можете увидеть непосредственно в части XHRUpload внутри useEffect:
//* INIT
import { useEffect, useRef, useState } from 'react';
import useGlobalState from '@/state/global'
import { useMutationPost, useListFetcher } from '@/hooks/request';
//* INIT

//* UI
import {
Box,
Modal,
LoadingOverlay
} from '@mantine/core';
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';
import 'uppy/dist/uppy.min.css';
import { dateToSystemDate } from '@/lib/helper';
//* UI

export default function CourseVideoModal(props) {

const uppyRef = useRef(null);
const uppyContainerRef = useRef(null);
const [isInitializing, setIsInitializing] = useState(false);

const { selDataView } = useGlobalState();

//* GET Access Token
const { refetch: refetchToken } = useListFetcher(
'/admin/setting_option/google-upload-token',
['google:upload:token'],
{
enabled : false,
retry : false,
staleTime: 0,
cacheTime: 0,
}
);

//* POST Commit Video to DB
const { submitData: commitVideoToDb } = useMutationPost({
endpoint : '/admin/course/video/add',
methodName: 'course:video:add',
successMsg: 'Video added to course',
onSuccess : () => {
props.refetchCourse();
props.handlers.close();
},
});

useEffect(() => {
if (!props.opened || !uppyContainerRef.current) return;
if (uppyRef.current) return;

const initializeUppy = async () => {
setIsInitializing(true);

let accessToken;
try {
const { data } = await refetchToken();
accessToken = data?.accessToken;
if (!accessToken) throw new Error('Access token was empty');
} catch (err) {
console.error('Error fetching upload token:', err);
setIsInitializing(false);
return;
}

const uppy = new Uppy({
restrictions: {
maxFileSize : 5 * 1024 * 1024 * 1024,
allowedFileTypes: ['video/*'],
maxNumberOfFiles: 1,
},
autoProceed: false,
});

uppy.use(Dashboard, {
inline: true,
target: uppyContainerRef.current,
});

uppy.use(XHRUpload, {
id : 'XHRUpload',
endpoint : 'https://www.googleapis.com/upload/youtu ... =multipart',
method : 'POST',
formData : true,
fieldName : 'video',
allowedMetaFields: ['metadata'],
headers : {
'Authorization': `Bearer ${accessToken}`
},
setFormData(formData) {
const metadata = {
snippet: {
title : 'Beta Test Video',
description: '',
categoryId : '27',
},
status: { privacyStatus: 'unlisted' },
};
const metadataBlob = new Blob(
[JSON.stringify(metadata)],
{ type: 'application/json' }
);
formData.append('metadata', metadataBlob, 'metadata.json');
return formData;
},
});

uppy.on('upload-success', (file, response) => {
const videoId = response?.body?.id;
if (!videoId) {
uppy.info('No video ID returned from YouTube.', 'error', 5000);
return;
}
commitVideoToDb({
id_course : selDataView.course_id,
youtube_id : videoId,
title : file.meta.title || file.name,
description: file.meta.description || '',
});
});

uppyRef.current = uppy;
setIsInitializing(false);
};
initializeUppy();

return () => {
if (uppyRef.current) {
uppyRef.current.close?.();
uppyRef.current.destroy();
uppyRef.current = null;
}
};
}, [props.opened]);

return (
props.handlers.close()}
size = "sm"
centered
keepMounted
>



);
}



Подробнее здесь: https://stackoverflow.com/questions/797 ... outube-api