Route Handler giving 405 Error
Answered
Arinji posted this in #help-forum
ArinjiOP
Heya so i am getting a image from the client, converting it to base 64 and uploading it to imagekit and storing its link and other info in Supabase, However when i call the api route i get a
This is my code
Button in Client
PS: Data when i console.log it is
route handler code below since messsage limit
GET http://localhost:3000/api/uploadImage 405 (Method Not Allowed)This is my code
Button in Client
onClick={async () => {
if (name === "") {
setError({ ...error, name: true });
return;
}
if (day === "") {
setError({ ...error, day: true });
return;
}
setError({ ...error, name: false, day: false });
setLoading(true);
if (file == undefined) return;
const image = (await toBase64(file)) as string;
const data = {
file: image.split(",")[1],
name: name.replace(/\s+/g, "-").toLowerCase(),
day: day,
tripId: tripId,
};
console.log(data);
await fetch("/api/uploadImage"),
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
setLoading(false);
router.push(`/trip/${tripId}`);
}}PS: Data when i console.log it is
file: 'iVBORw0KGgoAAAANSUhEUgAABaAAAAP4CAYAAAArrVtoAAAACXerJ33iDAAAAAAAKji/wHadIjNRh7u8AAAAABJRU5ErkJggg==',
name: 'testinggggg',
day: '1',
tripId: '286510'route handler code below since messsage limit
40 Replies
ArinjiOP
app/api/uploadImage/route.ts
I have added console logs in the route itself so if there was a issue in imagekit and supabase i would see it.. but it seems like the route itself isnt being called. Any idea?
(Adding code here since message limit)
import { imagekit } from "@/utils/imagekitClient";
import { auth } from "@clerk/nextjs";
import { getClerkToken } from "@/utils/supabaseToken";
import { supabaseClient } from "@/utils/supabaseClient";
export async function POST(request: Request) {
const data: {
file: string;
name: string;
tripId: string;
day: string;
} = await request.json();
const { userId } = auth();
const token = await getClerkToken();
const supabase = await supabaseClient(token);
if (
!data.name.includes(".jpg") &&
!data.name.includes(".png") &&
!data.name.includes(".jpeg")
)
data.name = data.name + ".jpg";
const imageKitFile = await imagekit.upload({
file: data.file,
fileName: data.name,
folder: "/Travel_Note",
useUniqueFileName: true,
});
console.log(imageKitFile);
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const currentDate = `${year}-${month}-${day}`;
const name = imageKitFile.name.split(".")[0];
const SupabaseData = await supabase.from("images").insert({
id: Math.random().toString(36).substring(2),
uploaded_at: currentDate,
tripId: data.tripId,
userId: userId,
name: name,
day: data.day,
link: imageKitFile.url,
height: imageKitFile.height,
width: imageKitFile.width,
fileId: imageKitFile.fileId,
});
console.log(SupabaseData.data, SupabaseData.error);
return new Response("E");
}I have added console logs in the route itself so if there was a issue in imagekit and supabase i would see it.. but it seems like the route itself isnt being called. Any idea?
(Adding code here since message limit)
ArinjiOP
I don't really know why I'm getting a 405 error tbh lol
@Kokoni you used POST in the fetch
ArinjiOP
So shld I do put?
Kokoni
you made a GET request
GET http://localhost:3000/api/uploadImage 405 (Method Not Allowed)
ArinjiOP
But my code has the post method
Kokoni
yeah but you are reporting that you can't make a GET request
ArinjiOP
Like the client button
Kokoni
and your code can makes a POST request
@Kokoni yeah but you are reporting that you can't make a GET request
ArinjiOP
That's the error I'm getting so .. but yea I didn't see that the error was reporting a get error
Soo.. what shld I change?
Kokoni
You said you got an error when making the GET request, right? In your code in the fetch you have put that you can only make with the POST method, edit it and put GET if you want to use the GET.
ArinjiOP
No i want a post request, idk why im getting a get error lol
Kokoni
await fetch("/api/uploadImage"),
{
method: "POST", //GET
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};ArinjiOP
because even if that was just an error and the actual thing runs... i shld have gotten the console logs
but im not getting anything logged or anything inserted anywhere
@Arinji No i want a post request, idk why im getting a get error lol
Kokoni
but you aren't making a get request?
you are using the browser?
ArinjiOP
nope, post request.. lemme show you
await fetch("/api/uploadImage"),
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
thats the button
which calls the api
Kokoni
How are you making the request?
thunder client, browser..
ArinjiOP
export async function POST(request: Request) {
const data: {
file: string;
name: string;
tripId: string;
day: string;
} = await request.json();
The api
const data: {
file: string;
name: string;
tripId: string;
day: string;
} = await request.json();
The api
@Kokoni thunder client, browser..
ArinjiOP
uh browser ig
coz its a website...
remove the ) at the end
ArinjiOP
oh
GET by default so
fetch("/api/uploadImage") makes a GET@Arinji coz its a website...
Kokoni
but if you're accessing the API by the browser the browser makes a GET call, not a POST
ArinjiOP
await fetch("/api/uploadImage",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
better?
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
better?
Kokoni
also see what joulev is telling you