nextjs antd image upload

is there an example of an image upload for nextjs antd image upload

2 Replies

Hi @Pops. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the information provided does not include an example of an image upload for Next.js with Ant Design. However, Refine does provide examples of file upload with Ant Design in the context of a React application, not specifically Next.js. For instance, there's an example of how to upload files to Strapi using Ant Design Form, React Hook Form, and Mantine Form. Here's a snippet of the code:

import { Edit, useForm } from "@refinedev/antd";  
import { getValueProps, mediaUploadMapper } from "@refinedev/strapi-v4";  
import { Form, Upload } from "antd";  
  
import { TOKEN_KEY, API_URL } from "../../constants";  
import { IPost } from "../interfaces";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>({  
 metaData: { populate: ["cover"] },  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form  
 {...formProps}  
 layout="vertical"  
 onFinish={(values) => {  
 formProps.onFinish?.(mediaUploadMapper(values));  
 }}  
 >  
 <Form.Item label="Cover">  
 <Form.Item  
 name="cover"  
 valuePropName="fileList"  
 getValueProps={(data) => getValueProps(data, API_URL)}  
 noStyle  
 >  
 <Upload.Dragger  
 name="files"  
 action={`${API_URL}/api/upload`}  
 headers={{  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 }}  
 listType="picture"  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

import { Edit, useForm } from "@refinedev/antd";  
import { getValueProps, mediaUploadMapper } from "@refinedev/strapi-v4";  
import { Form, Upload } from "antd";  
  
import { TOKEN_KEY, API_URL } from "../../constants";  
import { IPost } from "../interfaces";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>({  
 metaData: { populate: ["cover"] },  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form  
 {...formProps}  
 layout="vertical"  
 onFinish={(values) => {  
 formProps.onFinish?.(mediaUploadMapper(values));  
 }}  
 >  
 <Form.Item label="Cover">  
 <Form.Item  
 name="cover"  
 valuePropName="fileList"  
 getValueProps={(data) => getValueProps(data, API_URL)}  
 noStyle  
 >  
 <Upload.Dragger  
 name="files"  
 action={`${API_URL}/api/upload`}  
 headers={{  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 }}  
 listType="picture"  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

You can find more details about this in the Strapi v4 > File Upload Part 1 (https://refine.dev/docs/data/packages/strapi-v4#file-upload) section of the Refine documentation. Please note that while this example is not specifically for Next.js, the principles of file upload with Ant Design should be similar across different React-based frameworks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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