import Link from “next/link”;
import { useState, useEffect } from “react”;
import axios from “axios”;
const Form = ({ post, handler, setPost, type, submitting, setSubmitting,handleUpload,imagePreview,setImagePreview }) => {
return (
<>
Upload thumbnail
<input type="file onChange={handleUpload} />
{imagePreview && }
Cancel
<input
type=“submit”
value={submitting ? type + “…” : type}
className=“cursor-pointer px-12 bg-orange-600 fourth-text py-1 rounded”
/>
</>
);
};
export default Form;
…above is my form component and i try to upload image on onChange event listener
i have a handleupload function that creates the path of the image
const handleUpload = async (e) => {
const file = e.target.files[0];
try {
const data = new FormData();
data.append(“file”, file);
console.log(“data”, data);
const res = await fetch(“/api/upload”, {
method: “POST”,
body: data,
});
if (!res.ok) throw new Error(await res.text());
console.log(“resssssss”, res);
} catch (error) {
console.log(error);
}
};
…and this is my server code for /api/upload
import { writeFile } from “fs/promises”;
import { NextResponse } from “next/server”;
import { join } from “path”;
export async function POST(req) {
try {
const data = await req.formData();
const file = data.get(“file”);
console.log(“reqqqqqqqqqqqqqqqqqq”, file);
if (!file) {
console.log(“No fileeeeee”);
return NextResponse.json({ success: false });
}
const bytes = await file.arrayBuffer();
const buffer = Buffer.from(bytes);
console.log("file", file);
const path = join("/", "tmp", file.name);
await writeFile(path, buffer);
console.log("path:", `${path}`);
return NextResponse.json({ success: true });
} catch (error) {
console.log(error);
}
}…
server is also throwing this
[Error: ENOENT: no such file or directory, open ‘F:\tmp\chirag.png’] {
errno: -4058,
code: ‘ENOENT’,
syscall: ‘open’,
path: ‘F:\tmp\photo.png’
}