How to upload images using antd and supabase?

How to multipart upload images using antd and supabase?

2 Replies

Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can upload images using Ant Design (antd) and Supabase in Refine by using the Multipart Upload logic. Here's a basic example of how you can do this: Firstly, you need to set up your project with Refine and Supabase. You can do this using the create refine-app CLI tool. During the setup, choose Supabase as your backend service and Ant Design as your UI Framework.

npm create refine-app@latest pixels

npm create refine-app@latest pixels

Then, you can use the Upload.Dragger component from Ant Design for the file input. You can use the customRequest prop to handle the file upload. In the customRequest function, you can use the upload method from Supabase's storage API to upload the file. Here's an example of how you can do this:

<Upload.Dragger  
 name="file"  
 listType="picture"  
 multiple  
 customRequest={async ({ file, onError, onSuccess }) => {  
 const rcFile = file as RcFile;  
 const fileUrl = `public/${rcFile.name}`;  
  
 const { error } = await supabaseClient.storage  
 .from("refine")  
 .upload(fileUrl, file, {  
 cacheControl: "3600",  
 upsert: true,  
 });  
  
 if (error) {  
 return onError?.(error);  
 }  
 const { data, error: urlError } = await supabaseClient.storage  
 .from("refine")  
 .getPublicUrl(fileUrl);  
  
 if (urlError) {  
 return onError?.(urlError);  
 }  
  
 onSuccess?.({ url: data?.publicUrl }, new XMLHttpRequest());  
 }}  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>

<Upload.Dragger  
 name="file"  
 listType="picture"  
 multiple  
 customRequest={async ({ file, onError, onSuccess }) => {  
 const rcFile = file as RcFile;  
 const fileUrl = `public/${rcFile.name}`;  
  
 const { error } = await supabaseClient.storage  
 .from("refine")  
 .upload(fileUrl, file, {  
 cacheControl: "3600",  
 upsert: true,  
 });  
  
 if (error) {  
 return onError?.(error);  
 }  
 const { data, error: urlError } = await supabaseClient.storage  
 .from("refine")  
 .getPublicUrl(fileUrl);  
  
 if (urlError) {  
 return onError?.(urlError);  
 }  
  
 onSuccess?.({ url: data?.publicUrl }, new XMLHttpRequest());  
 }}  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>

This code will create a drag and drop area for file upload. When a file is dropped, it will be uploaded to Supabase's storage. For a more detailed example, you can check out the Multipart Upload documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload/) or the source code of the Multipart Upload example (https://github.com/refinedev/refine/tree/master/examples/upload-antd-multipart) in the Refine repository. To run the example on your local machine, you can use the following command:

npm create refine-app@latest -- --example upload-antd-multipart

npm create refine-app@latest -- --example upload-antd-multipart

Sources: - Refine Docs - Adding an Edit Page (https://refine.dev/docs/data/packages/supabase#adding-an-edit-page) - Refine Docs - Multipart Upload (https://refine.dev/docs/examples/upload/antd/multipart) - Refine Docs - Advanced Tutorials - Multipart Upload (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload#example) - Refine Blog - Setting Up the Client App (https://refine.dev/blog/refine-pixels-2#project-setup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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