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:
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
4 Replies
Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can use the
file2Base64
function from refine to convert the file to a Base64 string and store it in the user table. Here's an example of how to implement this using Ant Design's Upload component:
This code is taken from the refine Base64 Upload documentation (https://refine.dev/docs/advanced-tutorials/upload/base64-upload). The file2Base64
function is used to convert the uploaded file to a Base64 string, which can then be stored in the user table.
For displaying the existing Base64 string as an image, you can use the Image
component from Ant Design:
This way, you can display the existing Base64 string as an image without using a separate ImageFieldBase64
component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@317433576721219584> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•16mo ago
i think it's a good approach. probably I would do the same thing 🤔
national-gold•16mo ago
Alright @alicanerdurmaz thanks for the immediate feedback!
Hey @alicanerdurmaz , sorry to bug you with this one again. I've create a
Base64Upload
component to handle the input and output as a simple string and have kind of a translation in between. The only thing missing here is >passing the converted value back to the form<, so to say a way to bring the value back to my formProps inside of the original form. You don't happen to know how that could be done?
The usage could be much cleaner this way:
This is missing an "onChange" event of some sorts to let my form know I updated the value.
Here's the result if anybody is interested:
I'm passing in form from useForm()
and also the name of the property. This enables treating a Base64 image like a string column.
IMPORTANT: Don't use this for large images :), we use it for images that are 1-2 kb in size, which works perfectly fine with strings.