Seeking guidance on structuring files in Nextjs for handling multiple URL parameters. Can anyone offer advice?
The given URL structure is:
/api/upload?file=${filename}&fileType=${fileType}This is the current file structure:
app
api
upload
[filename]
[fileType]
route.ts
Despite following this directory layout, encountering the following error:
- error No HTTP methods exported in 'C:\Users\Alex\Documents\GitHub\procore-new\app\api\upload\route.ts'. Export a named export for each HTTP method.
Below is the code snippet from the route file:
import S3 from "aws-sdk/clients/s3";
import { NextResponse } from "next/server";
interface IParams {
filename: string;
fileType: string;
}
export async function GET(request: Request, { params }: { params: IParams }) {
const { filename, fileType } = params;
const s3 = new S3({
signatureVersion: "v4",
region: "us-east-2",
accessKeyId: process.env.ACCESS_KEY,
secretAccessKey: process.env.SECRET_KEY,
});
const preSignedUrl = await s3.getSignedUrl("putObject", {
Bucket: process.env.BUCKET_NAME,
Key: filename,
ContentType: fileType,
Expires: 5 * 60,
});
return NextResponse.json({ preSignedUrl });
}
Here's the frontend request logic:
"use client";
import axios from "axios";
import { toast } from "react-hot-toast";
const ImageUpload = () => {
const uploadPhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]!;
const filename = file.name;
const fileType = file.type;
console.log(file, filename, fileType);
const res = await axios(
`/api/upload?file=${filename}&fileType=${fileType}`
);
const { url } = await res.data;
const config = {
headers: {
"Content-Type": fileType,
},
};
const upload = await axios.put(url, file, config);
if (upload.status === 200) {
console.log("Uploaded successfully!");
} else {
console.error("Upload failed.");
}
const s3FileUrl = `https://<nextjspractice>.s3.us-east-2.amazonaws.com/${filename}`;
console.log("file url: ", s3FileUrl);
};
return (
<input type="file" accept="image/png, image/jpeg" onChange={uploadPhoto} />
);
};
export default ImageUpload;
Considering using the spread operator on the folder like [...params], unsure if that's the right approach. Any insights are highly appreciated!