> ## Documentation Index
> Fetch the complete documentation index at: https://docs.readdy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Create File Upload Function

> Create a file upload and display system with Supabase in your Readdy project

You might want to build a file upload and display system to handle various file types (such as PDFs, images, documents).\
Let's use **Supabase** as the backend and integrate it into your Readdy project.

## File Upload and Display System

<Steps>
  <Step title="Preparation">
    Before you start, make sure you have the following ready:

    * **Project Environment**\
      Create a **React-Next.js** project, or a **React** project.
          <Frame>
            <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/Creat-project.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=ad76e0d997d511e3645bb7dde229b1cf" width="1280" height="709" data-path="images/Creat-project.png" />
          </Frame>
    * **Backend Service**\
      Use **Supabase** as your backend.\
      Please check **[How to connect Supabase](/integrations/supabase)** first.
  </Step>

  <Step title="Create the File Upload System">
    In Readdy, enter the requirement:

    ```
    Design a file upload and display system
    ```
  </Step>

  <Step title="Define the Prompt">
    Add the following functional requirements as your **Prompt**:

    ```
    I need a backend to upload papers in PDF format.
    After the PDF is successfully uploaded, the uploaded PDF needs to be displayed on the front-end interface.
    ```
  </Step>

  <Step title="Add Tips">
    To ensure proper configuration, add these **Tips**:

    ```
    - Set strict check constraints in Supabase.
    - Pay attention to creating buckets and setting correct RLS permissions.
    - Set default database form data.
    ```
  </Step>

  <Step title="Check the Implementation">
    After development, verify your implementation in three ways:

    **1. Check prompt execution**: Confirm Readdy generated the correct logic.

    <Frame>
      <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/Upload-Check.PNG?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=1fbc8e0e26f9390ef3468e8128a9875a" width="1280" height="709" data-path="images/Upload-Check.PNG" />
    </Frame>

    **2. Check functionality**: Verify upload, display, and download work correctly.

    <Frame>
      <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/Upload-Check1.PNG?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=310ac5aea4f5d18f5ca453cd19dc724d" width="1280" height="709" data-path="images/Upload-Check1.PNG" />
    </Frame>

    **3. Check Supabase data**: Ensure the bucket and database contain the uploaded records.

    <Frame>
      <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/Upload-Check2.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=e3e5be415710671e2f7f63d78159080a" width="1280" height="709" data-path="images/Upload-Check2.png" />
    </Frame>
  </Step>

  <Step title="Error Handling">
    If the feature fails, handle errors as follows:

    * Copy the error message (see example below).
          <Frame>
            <img src="https://mintcdn.com/readdy/VnlR53FYyZzKKyTQ/images/Upload-Error.png?fit=max&auto=format&n=VnlR53FYyZzKKyTQ&q=85&s=0149b4dd448c2aa9ac62f9ae2be19f39" width="1280" height="709" data-path="images/Upload-Error.png" />
          </Frame>
    * In Readdy, enter:
      ```
      Error Report: [your error message]
      Review all code and fix all issues
      ```
  </Step>
</Steps>