fair-rose•11mo ago

Get return value from Edit page

<Edit saveButtonProps={saveButtonProps} >
      <Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
        <Form.Item label="Avatar">
          <Form.Item
            name="avatar"
            valuePropName="file"
            getValueFromEvent={getValueFromEvent}
            noStyle
            rules={[
              {
                required: true,
              },
            ]}

          >
            <Upload
              name="file"
              listType="picture-circle"
              className="avatar-uploader"
              showUploadList={false}
              action={`${apiUrl}/admin/upload`}
              beforeUpload={beforeUpload}
              onChange={handleChange}
              headers={{
                Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
              }}
            >
              {imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
            </Upload>
          </Form.Item>
        </Form.Item>
      
      </Form>
    </Edit >

<Edit saveButtonProps={saveButtonProps} >
      <Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
        <Form.Item label="Avatar">
          <Form.Item
            name="avatar"
            valuePropName="file"
            getValueFromEvent={getValueFromEvent}
            noStyle
            rules={[
              {
                required: true,
              },
            ]}

          >
            <Upload
              name="file"
              listType="picture-circle"
              className="avatar-uploader"
              showUploadList={false}
              action={`${apiUrl}/admin/upload`}
              beforeUpload={beforeUpload}
              onChange={handleChange}
              headers={{
                Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
              }}
            >
              {imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
            </Upload>
          </Form.Item>
        </Form.Item>
      
      </Form>
    </Edit >

I want to get avatar value from Edit page and parse into the Avatar component

2 Replies

kapa.ai•11mo ago

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the avatar value from the Edit page and parse it into the Avatar component, you can use the queryResult from the useForm hook provided by refine. The queryResult contains the data fetched from the API for the record being edited. Here's how you can modify your code:

const { formProps, saveButtonProps, queryResult } = useForm();

// Extract the avatar data from the API response
const avatarData = queryResult?.data?.data?.avatar;

<Edit saveButtonProps={saveButtonProps} >
  <Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
    <Form.Item label="Avatar">
      <Form.Item
        name="avatar"
        valuePropName="file"
        getValueFromEvent={getValueFromEvent}
        noStyle
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Upload
          name="file"
          listType="picture-circle"
          className="avatar-uploader"
          showUploadList={false}
          action={`${apiUrl}/admin/upload`}
          beforeUpload={beforeUpload}
          onChange={handleChange}
          headers={{
            Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
          }}
        >
          {avatarData ? <Avatar src={avatarData} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
        </Upload>
      </Form.Item>
    </Form.Item>
  </Form>
</Edit >

const { formProps, saveButtonProps, queryResult } = useForm();

// Extract the avatar data from the API response
const avatarData = queryResult?.data?.data?.avatar;

<Edit saveButtonProps={saveButtonProps} >
  <Form {...formProps} layout="vertical" onFinish={handleOnFinish}>
    <Form.Item label="Avatar">
      <Form.Item
        name="avatar"
        valuePropName="file"
        getValueFromEvent={getValueFromEvent}
        noStyle
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Upload
          name="file"
          listType="picture-circle"
          className="avatar-uploader"
          showUploadList={false}
          action={`${apiUrl}/admin/upload`}
          beforeUpload={beforeUpload}
          onChange={handleChange}
          headers={{
            Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
          }}
        >
          {avatarData ? <Avatar src={avatarData} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
        </Upload>
      </Form.Item>
    </Form.Item>
  </Form>
</Edit >

In this code, avatarData is the avatar value fetched from the API. This value is then used as the src prop for the Avatar component. Please note that the actual path to the avatar data in the API response may vary depending on your API structure. You may need to adjust the avatarData extraction line accordingly. For more information on the useForm hook and the queryResult it provides, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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