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

3 Replies

kapa.ai•16mo 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•16mo 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•16mo ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below