foreign-sapphire
foreign-sapphire14mo ago

How to handle image upload on create page with Node JS API?

How to handle image upload on create page with Node JS API?
3 Replies
kapa.ai
kapa.ai14mo ago
Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle image upload on the create page with a Node.js API, you can use the Multipart Upload method in refine. Here's an example of how to add an image field to the post creation form:
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const apiUrl = useApiUrl();

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};

interface IPost {
id: number;
title: string;
image: [
{
uid: string;
name: string;
url: string;
status: "error" | "success" | "done" | "uploading" | "removed";
},
];
}
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

const apiUrl = useApiUrl();

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};

interface IPost {
id: number;
title: string;
image: [
{
uid: string;
name: string;
url: string;
status: "error" | "success" | "done" | "uploading" | "removed";
},
];
}
In this example, the Upload.Dragger component is used to handle the file upload. The action prop is set to the API URL for handling the file upload (${apiUrl}/media/upload). You can find more information about Multipart Upload in refine from this source (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload).
kapa.ai
kapa.ai14mo ago
For the Node.js API part, you'll need to implement an endpoint to handle the file upload. You can use libraries like Multer (https://www.npmjs.com/package/multer) to handle the file upload on the server-side. However, the provided extracts do not include information about implementing the Node.js API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
npm
multer
Middleware for handling multipart/form-data.. Latest version: 1.4.5-lts.1, last published: 10 months ago. Start using multer in your project by running npm i multer. There are 3701 other projects in the npm registry using multer.
kapa.ai
kapa.ai14mo ago
<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below