wise-white•14mo ago

Save file on Supabase

Hi guys, I'm using refine/antd CRUD to create my page Now I'm create a field to save file name, and the file will be save to a bucket that I create on supabase I'm using <Upload /> component of antd to retrieve a file from user. How can I modify the create button props onClick to save the file on supabase when user click?

16 Replies

kapa.ai•14mo ago

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can modify the onClick event of the create button to handle the file upload to Supabase. Here's how you can do it: First, you need to store the file in a local state when it's selected. You can use the onChange prop of the Upload component to handle this:

const [file, setFile] = useState<File | null>(null);

const handleFileChange = ({ file }: any) => {
  setFile(file);
};

const [file, setFile] = useState<File | null>(null);

const handleFileChange = ({ file }: any) => {
  setFile(file);
};

Then, in the onClick event of the create button, you can upload the file to Supabase:

const handleFinish = async (values: any) => {
  if (file) {
    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) {
      console.error(error);
      return;
    }
  }

  // Call the original onFinish function
  saveButtonProps.onFinish(values);
};

const handleFinish = async (values: any) => {
  if (file) {
    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) {
      console.error(error);
      return;
    }
  }

  // Call the original onFinish function
  saveButtonProps.onFinish(values);
};

Finally, you can pass the handleFinish function to the onFinish prop of the Form component:

<Form {...formProps} onFinish={handleFinish} layout="vertical">

<Form {...formProps} onFinish={handleFinish} layout="vertical">

Please note that you need to replace supabaseClient with your actual Supabase client instance. For more information, you can refer to the Refine documentation on file uploads (https://refine.dev/docs/advanced-tutorials/upload/base64-upload/) and the Supabase documentation on file uploads (https://supabase.io/docs/guides/storage). Here is the source of the information: Discord support thread: Dragger on drop = false still calling api on drag (https://discord.com/channels/837692625737613362/1155918052597170236) and Documentation > Docs > Packages > Documentation > Data-providers > Supabase > Adding CRUD pages > Adding an Edit page (https://refine.dev/docs/packages/documentation/data-providers/supabase/#adding-an-edit-page). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

wise-whiteOP•14mo ago

@kapa.ai onFinish is declare on this type onFinish: ( values?: TVariables, ) => Promise<CreateResponse<TResponse> | UpdateResponse<TResponse> | void>; I can save the file, but when I modify onfinish, only file is save, I want to save my record too.

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can modify the onFinish function to handle both the file upload and the record creation. Here's how you can do it: First, you need to store the file in a local state when it's selected. You can use the onChange prop of the Upload component to handle this:

const [file, setFile] = useState<File | null>(null);

const handleFileChange = (info: any) => {
  setFile(info.file.originFileObj);
};

const [file, setFile] = useState<File | null>(null);

const handleFileChange = (info: any) => {
  setFile(info.file.originFileObj);
};

Then, in the onFinish function, you can upload the file to Supabase and create the record:

const onFinish = async (values: any) => {
  if (file) {
    const fileUrl = `public/${file.name}`;

    const { error } = await supabaseClient.storage.from("refine").upload(fileUrl, file, {
      cacheControl: "3600",
      upsert: true,
    });

    if (error) {
      console.error(error);
      return;
    }

    // Add the file URL to the record values
    values.fileUrl = fileUrl;
  }

  // Call the original onFinish function
  return saveButtonProps.onFinish(values);
};

const onFinish = async (values: any) => {
  if (file) {
    const fileUrl = `public/${file.name}`;

    const { error } = await supabaseClient.storage.from("refine").upload(fileUrl, file, {
      cacheControl: "3600",
      upsert: true,
    });

    if (error) {
      console.error(error);
      return;
    }

    // Add the file URL to the record values
    values.fileUrl = fileUrl;
  }

  // Call the original onFinish function
  return saveButtonProps.onFinish(values);
};

Finally, you can pass the onFinish function to the onFinish prop of the Form component:

<Form {...formProps} onFinish={onFinish} layout="vertical">

<Form {...formProps} onFinish={onFinish} layout="vertical">

kapa.ai•14mo ago

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

wise-whiteOP•14mo ago

@kapa.ai how to get user_id of supabase inside a create page of a table?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can get the user's ID from the authProvider's getPermissions() method. Here's an example of how you can do this:

import { useAuthProvider } from "@pankod/refine";

const { authProvider } = useAuthProvider();

const user = await authProvider.getPermissions();
const userId = user?.id;

import { useAuthProvider } from "@pankod/refine";

const { authProvider } = useAuthProvider();

const user = await authProvider.getPermissions();
const userId = user?.id;

In this example, authProvider.getPermissions() returns the user's data, and user?.id gives you the user's ID. Please note that you need to ensure that the user's ID is available when calling the create method. This could be done by storing the user's ID in the application state when they log in, for example. Here is the source of the information: Blog > Blog > Implementing Role Based Access Control > User Permissions with Supabase in Refine (https://refine.dev/blog/refine-pixels-6/) and Discord support thread: Automatically assigning users to a resource (https://discord.com/channels/837692625737613362/1128505507708149821). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

wise-whiteOP•14mo ago

@kapa.ai

    const handleFinish = async (values: any) => {
      if (file) {
        const rcFile = file as RcFile;
        const fileUrl = `public/${rcFile.name}`;
    
        const { error } = await supabaseClient.storage.from("project_proposal").upload(fileUrl, file);
    
        if (error) {
          console.error(error);
          return;
        }
      }
    
      // Call the original onFinish function
      saveButtonProps.onFinish(values);
    };

    const handleFinish = async (values: any) => {
      if (file) {
        const rcFile = file as RcFile;
        const fileUrl = `public/${rcFile.name}`;
    
        const { error } = await supabaseClient.storage.from("project_proposal").upload(fileUrl, file);
    
        if (error) {
          console.error(error);
          return;
        }
      }
    
      // Call the original onFinish function
      saveButtonProps.onFinish(values);
    };

I have call the save button like this, but I have typescript inside my project, so what type should I declare on the value? Property 'onFinish' does not exist on type 'ButtonProps & { onClick: () => void; }'

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The onFinish function is not a part of the saveButtonProps. Instead, it's a part of the formProps returned by the useForm hook. The onFinish function is called when the form is submitted. It will call the appropriate mutation based on the action property. The values parameter in the onFinish function should be of the type that represents the form values. If you have a type for the form values, you can use that. If not, you can use any or Record<string, any> as a general type. Here's an example:

const handleFinish = async (values: Record<string, any>) => {
  // ...
  saveButtonProps.onClick();
};

const handleFinish = async (values: Record<string, any>) => {
  // ...
  saveButtonProps.onClick();
};

In this example, values is of the type Record<string, any>, which represents an object with string keys and values of any type. Please note that you should call saveButtonProps.onClick() instead of saveButtonProps.onFinish(values). Here is the source of the information: Documentation > Docs > Packages > Documentation > React-hook-form > useForm > Return Values > saveButtonProps (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#savebuttonprops) and Documentation > Docs > Api-reference > Antd > Hooks > Form > useForm > API Reference > Return values (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#return-values-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

wise-whiteOP•13mo ago

@kapa.ai I have a list of text inside supabase, but when I use auto generate code in create and edit page, there is nothing to add to that field, how can I insert to a list field?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To insert into a list field, you can use the Select component from Ant Design, which is already integrated with Refine. You can populate the Select options with the list of text from your Supabase database. Here's an example of how you can do this:

import { Select } from "antd";
import { useSelect } from "@refinedev/antd";

// ...

const { selectProps } = useSelect({
  resource: "yourResource", // replace with your resource name
});

// ...

<Form.Item label="Your Field" name="yourField">
  <Select {...selectProps} />
</Form.Item>

import { Select } from "antd";
import { useSelect } from "@refinedev/antd";

// ...

const { selectProps } = useSelect({
  resource: "yourResource", // replace with your resource name
});

// ...

<Form.Item label="Your Field" name="yourField">
  <Select {...selectProps} />
</Form.Item>

In this example, useSelect is used to fetch the data from the resource. The resource prop should be replaced with the name of your resource. The selectProps are then spread into the Select component to populate its options. Please note that you need to replace "yourResource" and "yourField" with your actual resource and field names. Here is the source of the information: Documentation > Docs > Packages > Data-providers > Supabase > Adding CRUD pages > Adding a Create page (https://refine.dev/docs/packages/data-providers/supabase/#adding-a-create-page) and Documentation > Docs > Packages > Data-providers > Supabase > Adding CRUD pages > Adding an Edit page (https://refine.dev/docs/packages/data-providers/supabase/#adding-an-edit-page). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

wise-whiteOP•13mo ago

@kapa.ai the problem is your select is select record from another table, I just have a list of text, and I want to insert to this

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: @tandeptraiso1 That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Save file on Supabase

Did you find this page helpful?