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

3 Replies

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•2y 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•2y ago

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

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

Did you find this page helpful?