skinny-azureS
Refine•3y ago•
8 replies
skinny-azure

Use Base64 string and conversion for simple "upload" Field inside of existing form

Hey everyone, I'm trying to implement a simple Upload-Field inside of an existing form which is using Base64 encoding. So basically I have an API endpoint which takes a string and stores the string inside of a column in the database. Everything is working fine except for the editing part. This seems to me more like a Antd specific question but maybe somebody else has implemented something like this.

Here's a working sample for "multiple image support": https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/upload-antd-base64?from-embed=&file=/src/pages/users/edit.tsx

Taking this example, I want to store the avatar inside the user-table as a simple base64 string. But I cannot find an option to pass an existing base64 string to the Antd Upload component. Currently I'm doing something like this:

<Form.Item label="avatar" name="avatar">
  <Upload.Dragger listType="picture" beforeUpload={() => false} maxCount={1}>
    <p className="ant-upload-text">Drag & drop a file in this area</p>
  </Upload.Dragger>
  {(formProps.initialValues as any)?.avatar != '' && (
    <ImageFieldBase64 data={(formProps.initialValues as any)?.avatar} />
  )}
</Form.Item>


But that seems like a hack to me 🤷 . If somebody knows a better and maybe "accepted" way of doing this, I'd be very glad 😄
CodeSandbox
upload-antd-base64 - CodeSandbox
upload-antd-base64 using @refinedev/antd, @refinedev/cli, @refinedev/core, @refinedev/react-router-v6, @refinedev/simple-rest, @types/node, @types/react, @types/react-dom, antd
upload-antd-base64 - CodeSandbox
Was this page helpful?