diff --git a/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx b/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx index 43bdb85..c10085a 100644 --- a/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx +++ b/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useRef } from "react"; -import { updateUser, getUsersId, postMediaUpload } from "../../api"; +import { updateUser, getUsersId } from "../../api"; import { useNavigate } from "react-router-dom"; import { useCookies } from 'react-cookie'; @@ -48,39 +48,46 @@ export const SettingsPage: React.FC = () => { }, [userId]); // Обработка загрузки файла - const handleFileChange = async (e: React.ChangeEvent) => { +const handleFileChange = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setUploading(true); setError(null); - // Создаем FormData строго по спецификации + // Создаем стандартный объект FormData const formData = new FormData(); + // Ключ "image" соответствует вашему OpenAPI formData.append("image", file); try { - // Используем fetch напрямую или убеждаемся, что клиент принимает FormData - const res = await postMediaUpload({ - // @ts-ignore - обходим строгую типизацию тела, если она ожидает объект - body: formData, + // Используем нативный fetch вместо сгенерированного postMediaUpload + const response = await fetch("/api/v1/media/upload", { + method: "POST", + body: formData, headers: { - // УДАЛЯЕМ Content-Type вообще. - // Если оставить undefined, некоторые клиенты могут подставить 'application/json'. - // Нам нужно, чтобы заголовок отсутствовал в объекте headers, - // тогда fetch сам выставит multipart/form-data с boundary. - "X-XSRF-TOKEN": xsrfToken, + // Важно: НЕ УКАЗЫВАЕМ Content-Type. + // Браузер сам добавит multipart/form-data и сгенерирует boundary. + "X-XSRF-TOKEN": xsrfToken || "", }, }); - if (res.data && res.data.id) { - setAvatarId(res.data.id); - setAvatarUrl(res.data.image_path ?? null); + if (!response.ok) { + const errorText = await response.text(); + throw new Error(errorText || "Upload failed"); + } + + // Ответ должен соответствовать схеме Image.yaml + const data = await response.json(); + + if (data && data.id) { + setAvatarId(data.id); + setAvatarUrl(data.image_path ?? null); setSuccess("Image uploaded!"); } } catch (err: any) { console.error("Upload error:", err); - setError("Upload failed. Check if the file is an image."); + setError(err.message || "Failed to upload image"); } finally { setUploading(false); }