55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { useMutation } from "@tanstack/react-query";
|
|
import { useAuthToken } from "../hooks/use-root-data";
|
|
import {
|
|
ImageUploadResponse,
|
|
MediaUploadImageUsageEnum,
|
|
} from "../../src/api/types";
|
|
import { createMediaManagementApi } from "~/utils/api-client-factory";
|
|
|
|
interface ImageUploadParams {
|
|
file: File;
|
|
usageType: MediaUploadImageUsageEnum;
|
|
}
|
|
|
|
/**
|
|
* Custom hook to upload image using React Query
|
|
*/
|
|
export const useImageUpload = () => {
|
|
const token = useAuthToken();
|
|
|
|
return useMutation({
|
|
mutationFn: async ({
|
|
file,
|
|
usageType,
|
|
}: ImageUploadParams): Promise<ImageUploadResponse> => {
|
|
if (!token) throw new Error("Authentication required");
|
|
|
|
const api = createMediaManagementApi(token);
|
|
|
|
// Create FormData for file upload
|
|
const formData = new FormData();
|
|
formData.append("file", file, file.name);
|
|
formData.append("usageType", usageType);
|
|
|
|
// Use the generated API method with custom init overrides to handle multipart/form-data
|
|
return await api.mediaUploadImage(
|
|
{
|
|
file: formData as unknown as Blob,
|
|
usage: usageType,
|
|
},
|
|
async (context) => {
|
|
// Remove Content-Type header to let browser set it with boundary
|
|
const { "Content-Type": _, ...otherHeaders } =
|
|
context.init.headers || {};
|
|
|
|
return {
|
|
...context.init,
|
|
headers: otherHeaders,
|
|
body: formData,
|
|
};
|
|
}
|
|
);
|
|
},
|
|
});
|
|
};
|