molecular-blue•3w ago

antd edit form uploads default values

@kapa.ai How can I render default values for uploads (thumbUrl, name, etc) using antd useDrawerForm and antd Upload component?

3 Replies

kapa.ai•3w ago

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To render default values for uploads (such as thumbUrl, name, etc.) using the antd useDrawerForm and Upload component, you can follow these steps: 1. Set up the useDrawerForm with defaultFormValues: You can use the defaultFormValues property to pre-populate the form with data. This can be done either synchronously or asynchronously. 2. Configure the Upload component: Use the Upload.Dragger component within the form and set the fileList property to the default values. Here is an example of how you can achieve this:

import { useForm } from "@refinedev/antd";
import { Upload, Form, Input, Drawer } from "antd";
import { RcFile } from "antd/lib/upload";

export const PostEdit: React.FC = () => {
  const { formProps, saveButtonProps, defaultFormValuesLoading } = useForm({
    defaultFormValues: async () => {
      const response = await fetch("<https://api.fake-rest.refine.dev/posts/1">);
      const data = await response.json();
      return data;
    },
  });
return (
    <Drawer {...formProps} title="Edit Post" visible={true}>
      <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={(e) => e.fileList}
            noStyle
          >
            <Upload.Dragger
              name="file"
              action="<https://api.fake-rest.refine.dev/media/upload">
              listType="picture"
              defaultFileList={[
                {
                  uid: "1",
                  name: "example.png",
                  status: "done",
                  url: "<https://example.com/example.png",>
                },
              ]}
            >
              <p className="ant-upload-text">Drag & drop a file in this area</p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Drawer>
  );
};

import { useForm } from "@refinedev/antd";
import { Upload, Form, Input, Drawer } from "antd";
import { RcFile } from "antd/lib/upload";

export const PostEdit: React.FC = () => {
  const { formProps, saveButtonProps, defaultFormValuesLoading } = useForm({
    defaultFormValues: async () => {
      const response = await fetch("<https://api.fake-rest.refine.dev/posts/1">);
      const data = await response.json();
      return data;
    },
  });
return (
    <Drawer {...formProps} title="Edit Post" visible={true}>
      <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={(e) => e.fileList}
            noStyle
          >
            <Upload.Dragger
              name="file"
              action="<https://api.fake-rest.refine.dev/media/upload">
              listType="picture"
              defaultFileList={[
                {
                  uid: "1",
                  name: "example.png",
                  status: "done",
                  url: "<https://example.com/example.png",>
                },
              ]}
            >
              <p className="ant-upload-text">Drag & drop a file in this area</p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Drawer>
  );
};

Explanation: 1. useForm Hook: The useForm hook is used to manage the form state. The defaultFormValues property is set to an asynchronous function that fetches the default values from an API. 2. Form Layout: The Form component from antd is used to create the form layout. The Form.Item components are used to define individual form fields. 3. Upload Component: The Upload.Dragger component is used for file uploads. The defaultFileList property is set to an array of file objects that represent the default files to be displayed in the upload list. By following this approach, you can render default values for uploads in an antd form using the useDrawerForm hook and the Upload component. For more details, you can refer to the useDrawerForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form/#defaultformvalues) and the Upload component documentation (https://ant.design/components/upload/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

molecular-blue•2w ago

for anyone who comes across this: use itemRender prop on antd Upload