Merge pull request #142 from supabase/refactor/storage-client

refactor: SupabaseStorageClient

Author: kiwicopple

example/next-storage/components/Account.tsx

@@ -39,9 +39,11 @@ export default function Account({
       const file = event.target.files[0]
       const fileExt = file.name.split('.').pop()
       const fileName = `${session?.user.id}${Math.random()}.${fileExt}`
-      const filePath = `${DEFAULT_AVATARS_BUCKET}/${fileName}`
+      const filePath = `${fileName}`
 
-      let { error: uploadError } = await supabase.storage.uploadFile(filePath, file)
+      let { error: uploadError } = await supabase.storage
+        .from(DEFAULT_AVATARS_BUCKET)
+        .upload(filePath, file)
 
       if (uploadError) {
         throw uploadError

example/next-storage/components/Avatar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { supabase } from '../lib/api'
+import { DEFAULT_AVATARS_BUCKET } from '../lib/constants'
 
 export default function Avatar({ url, size }: { url: string | null; size: number }) {
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
@@ -10,7 +11,7 @@ export default function Avatar({ url, size }: { url: string | null; size: number
 
   async function downloadImage(path: string) {
     try {
-      const { data, error } = await supabase.storage.downloadFile(path)
+      const { data, error } = await supabase.storage.from(DEFAULT_AVATARS_BUCKET).download(path)
       if (error) {
         throw error
       }

src/SupabaseClient.ts

@@ -71,7 +71,7 @@ export default class SupabaseClient {
    * Supabase Storage allows you to manage user-generated content, such as photos or videos.
    */
   get storage() {
-    return this._initStorageClient()
+    return new SupabaseStorageClient(this.storageUrl, this._getAuthHeaders())
   }
 
   /**
@@ -167,10 +167,6 @@ export default class SupabaseClient {
     })
   }
 
-  private _initStorageClient() {
-    return new SupabaseStorageClient(this.storageUrl, this._getAuthHeaders())
-  }
-
   private _getAuthHeaders(): { [key: string]: string } {
     const headers: { [key: string]: string } = {}
     const authBearer = this.auth.session()?.access_token ?? this.supabaseKey

src/lib/SupabaseStorageClient.ts

@@ -1,7 +1,16 @@
-import { StorageApi } from './storage'
+import { StorageBucketApi, StorageFileApi } from './storage'
 
-export class SupabaseStorageClient extends StorageApi {
+export class SupabaseStorageClient extends StorageBucketApi {
   constructor(url: string, headers: { [key: string]: string } = {}) {
     super(url, headers)
   }
+
+  /**
+   * Perform file operation in a bucket.
+   *
+   * @param id The bucket id to operate on.
+   */
+  from(id: string): StorageFileApi {
+    return new StorageFileApi(this.url, this.headers, id)
+  }
 }

src/lib/storage/StorageBucketApi.ts

@@ -0,0 +1,85 @@
+import { get, post, remove } from './fetch'
+import { Bucket } from './types'
+
+export class StorageBucketApi {
+  protected url: string
+  protected headers: { [key: string]: string }
+
+  constructor(url: string, headers: { [key: string]: string } = {}) {
+    this.url = url
+    this.headers = headers
+  }
+
+  /**
+   * Retrieves the details of all Storage buckets within an existing product.
+   */
+  async listBuckets(): Promise<{ data: Bucket[] | null; error: Error | null }> {
+    try {
+      const data = await get(`${this.url}/bucket`, { headers: this.headers })
+      return { data, error: null }
+    } catch (error) {
+      return { data: null, error }
+    }
+  }
+
+  /**
+   * Retrieves the details of an existing Storage bucket.
+   *
+   * @param id The unique identifier of the bucket you would like to retrieve.
+   */
+  async getBucket(id: string): Promise<{ data: Bucket | null; error: Error | null }> {
+    try {
+      const data = await get(`${this.url}/bucket/${id}`, { headers: this.headers })
+      return { data, error: null }
+    } catch (error) {
+      return { data: null, error }
+    }
+  }
+
+  /**
+   * Retrieves the details of an existing Storage bucket.
+   *
+   * @param id A unique identifier for the bucket you are creating.
+   */
+  async createBucket(id: string): Promise<{ data: Bucket | null; error: Error | null }> {
+    try {
+      const data = await post(`${this.url}/bucket`, { id, name: id }, { headers: this.headers })
+      return { data, error: null }
+    } catch (error) {
+      return { data: null, error }
+    }
+  }
+
+  /**
+   * Removes all objects inside a single bucket.
+   *
+   * @param id The unique identifier of the bucket you would like to empty.
+   */
+  async emptyBucket(
+    id: string
+  ): Promise<{ data: { message: string } | null; error: Error | null }> {
+    try {
+      const data = await post(`${this.url}/bucket/${id}/empty`, {}, { headers: this.headers })
+      return { data, error: null }
+    } catch (error) {
+      return { data: null, error }
+    }
+  }
+
+  /**
+   * Deletes an existing bucket. A bucket can't be deleted with existing objects inside it.
+   * You must first `empty()` the bucket.
+   *
+   * @param id The unique identifier of the bucket you would like to delete.
+   */
+  async deleteBucket(
+    id: string
+  ): Promise<{ data: { message: string } | null; error: Error | null }> {
+    try {
+      const data = await remove(`${this.url}/bucket/${id}`, {}, { headers: this.headers })
+      return { data, error: null }
+    } catch (error) {
+      return { data: null, error }
+    }
+  }
+}