༼ つ ◕_◕ ༽つ Give Storage (#733)

Co-authored-by: Daniel Woelfel <[email protected]>

Author: nezaj

client/packages/admin/src/index.ts

@@ -47,6 +47,11 @@ import {
   type InstantRules,
   type UpdateParams,
   type LinkParams,
+
+  // storage types
+  type FileOpts,
+  type UploadFileResponse,
+  type DeleteFileResponse,
 } from "@instantdb/core";
 
 import version from "./version";
@@ -283,8 +288,8 @@ class InstantAdmin<
    */
   query = <
     Q extends Schema extends InstantGraph<any, any>
-      ? InstaQLParams<Schema>
-      : Exactly<Query, Q>,
+    ? InstaQLParams<Schema>
+    : Exactly<Query, Q>,
   >(
     query: Q,
   ): Promise<QueryResponse<Q, Schema, WithCardinalityInference>> => {
@@ -592,7 +597,6 @@ class Auth {
   }
 }
 
-type UploadMetadata = { contentType?: string } & Record<string, any>;
 type StorageFile = {
   key: string;
   name: string;
@@ -601,6 +605,12 @@ type StorageFile = {
   last_modified: number;
 };
 
+type DeleteManyFileResponse = {
+  data: {
+    ids: string[] | null;
+  };
+};
+
 /**
  * Functions to manage file storage.
  */
@@ -617,12 +627,73 @@ class Storage {
    * @see https://instantdb.com/docs/storage
    * @example
    *   const buffer = fs.readFileSync('demo.png');
-   *   const isSuccess = await db.storage.upload('photos/demo.png', buffer);
+   *   const isSuccess = await db.storage.uploadFile('photos/demo.png', buffer);
+   */
+  uploadFile = async (
+    path: string,
+    file: Buffer,
+    metadata: FileOpts = {},
+  ): Promise<UploadFileResponse> => {
+    const headers = {
+      ...authorizedHeaders(this.config),
+      path,
+      "content-type": metadata.contentType || "application/octet-stream",
+    };
+    if (metadata.contentDisposition) {
+      headers["content-disposition"] = metadata.contentDisposition;
+    }
+
+    const data = await jsonFetch(`${this.config.apiURI}/admin/storage/upload`, {
+      method: "PUT",
+      headers,
+      body: file,
+    });
+
+    return data;
+  };
+
+  /**
+   * Deletes a file by its path name (e.g. "photos/demo.png").
+   *
+   * @see https://instantdb.com/docs/storage
+   * @example
+   *   await db.storage.delete("photos/demo.png");
+   */
+  delete = async (pathname: string): Promise<DeleteFileResponse> => {
+    return jsonFetch(
+      `${this.config.apiURI}/admin/storage/files?filename=${encodeURIComponent(
+        pathname,
+      )}`,
+      {
+        method: "DELETE",
+        headers: authorizedHeaders(this.config),
+      },
+    );
+  };
+
+  /**
+   * Deletes multiple files by their path names (e.g. "photos/demo.png", "essays/demo.txt").
+   *
+   * @see https://instantdb.com/docs/storage
+   * @example
+   *   await db.storage.deleteMany(["images/1.png", "images/2.png", "images/3.png"]);
+   */
+  deleteMany = async (pathnames: string[]): Promise<DeleteManyFileResponse> => {
+    return jsonFetch(`${this.config.apiURI}/admin/storage/files/delete`, {
+      method: "POST",
+      headers: authorizedHeaders(this.config),
+      body: JSON.stringify({ filenames: pathnames }),
+    });
+  };
+
+  /**
+   * @deprecated. This method will be removed in the future. Use `uploadFile`
+   * instead
    */
   upload = async (
     pathname: string,
     file: Buffer,
-    metadata: UploadMetadata = {},
+    metadata: FileOpts = {},
   ): Promise<boolean> => {
     const { data: presignedUrl } = await jsonFetch(
       `${this.config.apiURI}/admin/storage/signed-upload-url`,
@@ -647,15 +718,13 @@ class Storage {
   };
 
   /**
-   * Retrieves a download URL for the provided path.
-   *
-   * @see https://instantdb.com/docs/storage
+   * @deprecated. This method will be removed in the future. Use `query` instead
    * @example
-   *   const url = await db.storage.getDownloadUrl('photos/demo.png');
+   * const files = await db.query({ $files: {}})
    */
-  getDownloadUrl = async (pathname: string): Promise<string> => {
+  list = async (): Promise<StorageFile[]> => {
     const { data } = await jsonFetch(
-      `${this.config.apiURI}/admin/storage/signed-download-url?app_id=${this.config.appId}&filename=${encodeURIComponent(pathname)}`,
+      `${this.config.apiURI}/admin/storage/files`,
       {
         method: "GET",
         headers: authorizedHeaders(this.config),
@@ -665,16 +734,24 @@ class Storage {
     return data;
   };
 
+
   /**
-   * Retrieves a list of all the files that have been uploaded by this app.
-   *
-   * @see https://instantdb.com/docs/storage
-   * @example
-   *   const files = await db.storage.list();
+   * @deprecated. getDownloadUrl will be removed in the future.
+   * Use `query` instead to query and fetch for valid urls
+   *
+   * db.useQuery({
+   *   $files: {
+   *     $: {
+   *       where: {
+   *         path: "moop.png"
+   *       }
+   *     }
+   *   }
+   * })
    */
-  list = async (): Promise<StorageFile[]> => {
+  getDownloadUrl = async (pathname: string): Promise<string> => {
     const { data } = await jsonFetch(
-      `${this.config.apiURI}/admin/storage/files`,
+      `${this.config.apiURI}/admin/storage/signed-download-url?app_id=${this.config.appId}&filename=${encodeURIComponent(pathname)}`,
       {
         method: "GET",
         headers: authorizedHeaders(this.config),
@@ -683,38 +760,6 @@ class Storage {
 
     return data;
   };
-
-  /**
-   * Deletes a file by its path name (e.g. "photos/demo.png").
-   *
-   * @see https://instantdb.com/docs/storage
-   * @example
-   *   await db.storage.delete("photos/demo.png");
-   */
-  delete = async (pathname: string): Promise<void> => {
-    await jsonFetch(
-      `${this.config.apiURI}/admin/storage/files?filename=${encodeURIComponent(pathname)}`,
-      {
-        method: "DELETE",
-        headers: authorizedHeaders(this.config),
-      },
-    );
-  };
-
-  /**
-   * Deletes multiple files by their path names (e.g. "photos/demo.png", "essays/demo.txt").
-   *
-   * @see https://instantdb.com/docs/storage
-   * @example
-   *   await db.storage.deleteMany(["images/1.png", "images/2.png", "images/3.png"]);
-   */
-  deleteMany = async (pathnames: string[]): Promise<void> => {
-    await jsonFetch(`${this.config.apiURI}/admin/storage/files/delete`, {
-      method: "POST",
-      headers: authorizedHeaders(this.config),
-      body: JSON.stringify({ filenames: pathnames }),
-    });
-  };
 }
 
 /**
@@ -955,4 +1000,10 @@ export {
   type InstantRules,
   type UpdateParams,
   type LinkParams,
+
+  // storage types
+  type FileOpts,
+  type UploadFileResponse,
+  type DeleteFileResponse,
+  type DeleteManyFileResponse,
 };

client/packages/core/src/Reactor.js

@@ -1497,7 +1497,7 @@ export default class Reactor {
           appId: this.config.appId,
           refreshToken,
         });
-      } catch (e) {}
+      } catch (e) { }
     }
     await this.changeCurrentUser(null);
   }
@@ -1796,6 +1796,35 @@ export default class Reactor {
   // --------
   // Storage
 
+  async uploadFile(path, file, opts) {
+    const currentUser = await this.getCurrentUser();
+    const refreshToken = currentUser?.user?.refresh_token;
+    return StorageApi.uploadFile({
+      ...opts,
+      apiURI: this.config.apiURI,
+      appId: this.config.appId,
+      path: path,
+      file,
+      refreshToken: refreshToken,
+    });
+  }
+
+  async deleteFile(path) {
+    const currentUser = await this.getCurrentUser();
+    const refreshToken = currentUser?.user?.refresh_token;
+    const result = await StorageApi.deleteFile({
+      apiURI: this.config.apiURI,
+      appId: this.config.appId,
+      path,
+      refreshToken: refreshToken,
+    });
+
+    return result;
+  }
+
+  // Deprecated Storage API (Jan 2025)
+  // ---------------------------------
+
   async upload(path, file) {
     const currentUser = await this.getCurrentUser();
     const refreshToken = currentUser?.user?.refresh_token;
@@ -1824,16 +1853,4 @@ export default class Reactor {
     return url;
   }
 
-  async deleteFile(path) {
-    const currentUser = await this.getCurrentUser();
-    const refreshToken = currentUser?.user?.refresh_token;
-    const result = await StorageApi.deleteFile({
-      apiURI: this.config.apiURI,
-      appId: this.config.appId,
-      path: path,
-      refreshToken: refreshToken,
-    });
-
-    return result;
-  }
 }