feat: sdk storage support (refinedev#2522)

* feat(sdk): upload and getPublicUrl support

* chore(cloud-example): add upload example

* chore(sdk): changeset

* chore(sdk): refactor applicationClientId data

.changeset/happy-monkeys-hang.md

@@ -0,0 +1,5 @@
+---
+"@pankod/refine-sdk": minor
+---
+
+Add storage support

examples/cloud/src/pages/posts/create.tsx

@@ -1,15 +1,25 @@
 import React, { useState } from "react";
 import { IResourceComponentsProps } from "@pankod/refine-core";
-import { Create, Form, Input, Select } from "@pankod/refine-antd";
+import {
+    Create,
+    Form,
+    Input,
+    RcFile,
+    Select,
+    Upload,
+} from "@pankod/refine-antd";
 import { useForm, useSelect } from "@pankod/refine-antd";
 import ReactMarkdown from "react-markdown";
 import ReactMde from "react-mde";
 import "react-mde/lib/styles/css/react-mde-all.css";
+import { useSdk } from "@pankod/refine-cloud";
 
+import { normalizeFile } from "utility/normalize";
 import { IPost, ICategory } from "interfaces";
 
 export const PostCreate: React.FC<IResourceComponentsProps> = () => {
     const { formProps, saveButtonProps } = useForm<IPost>();
+    const { sdk } = useSdk();
 
     const { selectProps: categorySelectProps } = useSelect<ICategory>({
         resource: "categories",
@@ -88,6 +98,51 @@ export const PostCreate: React.FC<IResourceComponentsProps> = () => {
                         }
                     />
                 </Form.Item>
+                <Form.Item label="Images">
+                    <Form.Item
+                        name="images"
+                        valuePropName="fileList"
+                        normalize={normalizeFile}
+                        noStyle
+                    >
+                        <Upload.Dragger
+                            name="file"
+                            listType="picture"
+                            multiple
+                            customRequest={async ({
+                                file,
+                                onError,
+                                onSuccess,
+                            }) => {
+                                const bucket = "test1";
+                                try {
+                                    await sdk.storage.upload({
+                                        bucket,
+                                        file,
+                                    });
+
+                                    // get uploaded file url
+                                    const path = (file as RcFile).name;
+                                    const { url } =
+                                        await sdk.storage.getPublicUrl({
+                                            bucket,
+                                            path,
+                                        });
+
+                                    const xhr = new XMLHttpRequest();
+                                    onSuccess && onSuccess({ url }, xhr);
+                                } catch (error) {
+                                    onError &&
+                                        onError(new Error("Upload Error"));
+                                }
+                            }}
+                        >
+                            <p className="ant-upload-text">
+                                Drag & drop a file in this area
+                            </p>
+                        </Upload.Dragger>
+                    </Form.Item>
+                </Form.Item>
             </Form>
         </Create>
     );

examples/cloud/src/pages/posts/edit.tsx

@@ -1,15 +1,28 @@
 import React, { useState } from "react";
 import { IResourceComponentsProps } from "@pankod/refine-core";
-import { Edit, Form, Input, Select, Row, Col } from "@pankod/refine-antd";
+import {
+    Edit,
+    Form,
+    Input,
+    Select,
+    Row,
+    Col,
+    Upload,
+    RcFile,
+} from "@pankod/refine-antd";
 import { useForm, useSelect } from "@pankod/refine-antd";
 import { LogList } from "@pankod/refine-antd-audit-log";
 import ReactMarkdown from "react-markdown";
+import { useSdk } from "@pankod/refine-cloud";
 import ReactMde from "react-mde";
 import "react-mde/lib/styles/css/react-mde-all.css";
 
+import { normalizeFile } from "utility/normalize";
 import { IPost, ICategory } from "interfaces";
 
 export const PostEdit: React.FC<IResourceComponentsProps> = () => {
+    const { sdk } = useSdk();
+
     const { formProps, saveButtonProps, queryResult } = useForm<IPost>({
         warnWhenUnsavedChanges: true,
     });
@@ -97,6 +110,54 @@ export const PostEdit: React.FC<IResourceComponentsProps> = () => {
                                 }
                             />
                         </Form.Item>
+                        <Form.Item label="Images">
+                            <Form.Item
+                                name="images"
+                                valuePropName="fileList"
+                                normalize={normalizeFile}
+                                noStyle
+                            >
+                                <Upload.Dragger
+                                    name="file"
+                                    listType="picture"
+                                    multiple
+                                    customRequest={async ({
+                                        file,
+                                        onError,
+                                        onSuccess,
+                                    }) => {
+                                        const bucket = "test1";
+                                        try {
+                                            await sdk.storage.upload({
+                                                bucket,
+                                                file,
+                                            });
+
+                                            // get uploaded file url
+                                            const path = (file as RcFile).name;
+                                            const { url } =
+                                                await sdk.storage.getPublicUrl({
+                                                    bucket,
+                                                    path,
+                                                });
+
+                                            const xhr = new XMLHttpRequest();
+                                            onSuccess &&
+                                                onSuccess({ url }, xhr);
+                                        } catch (error) {
+                                            onError &&
+                                                onError(
+                                                    new Error("Upload Error"),
+                                                );
+                                        }
+                                    }}
+                                >
+                                    <p className="ant-upload-text">
+                                        Drag & drop a file in this area
+                                    </p>
+                                </Upload.Dragger>
+                            </Form.Item>
+                        </Form.Item>
                     </Form>
                 </Edit>
             </Col>

examples/cloud/src/utility/normalize.ts

@@ -0,0 +1,27 @@
+import { UploadFile } from "@pankod/refine-antd";
+
+interface UploadResponse {
+    url: string;
+}
+interface EventArgs<T = UploadResponse> {
+    file: UploadFile<T>;
+    fileList: Array<UploadFile<T>>;
+}
+
+export const normalizeFile = (event: EventArgs) => {
+    const { fileList } = event;
+
+    return fileList.map((item) => {
+        const { uid, name, type, size, response, percent, status } = item;
+
+        return {
+            uid,
+            name,
+            url: item.url || response?.url,
+            type,
+            size,
+            percent,
+            status,
+        };
+    });
+};

packages/sdk/src/client.ts

@@ -8,7 +8,14 @@ import createAuthRefreshInterceptor, {
     AxiosAuthRefreshRequestConfig,
 } from "axios-auth-refresh";
 
-import { Auth, Log, DraftResource, Config, CloudQuery } from "./services";
+import {
+    Auth,
+    Log,
+    DraftResource,
+    Config,
+    CloudQuery,
+    Storage,
+} from "./services";
 
 class Client {
     private baseUrl: string;
@@ -137,6 +144,10 @@ class Client {
         return new CloudQuery(this);
     }
 
+    get storage(): Storage {
+        return new Storage(this);
+    }
+
     async call<D>(payload: {
         method:
             | "get"
@@ -152,13 +163,7 @@ class Client {
         skipAuthRefresh?: boolean;
         headers?: AxiosRequestHeaders;
     }): Promise<D> {
-        const { params, method, url, skipAuthRefresh, headers } = payload;
-        let { data } = payload;
-
-        data = {
-            ...data,
-            applicationClientId: this.clientId,
-        };
+        const { params, method, url, skipAuthRefresh, headers, data } = payload;
 
         const config: AxiosAuthRefreshRequestConfig = {
             baseURL: this.baseUrl,

packages/sdk/src/services/auth.ts

@@ -21,6 +21,7 @@ class Auth {
                 data: {
                     email,
                     password,
+                    applicationClientId: this.client.getClientId(),
                 },
             });
         }
@@ -45,7 +46,10 @@ class Auth {
         return await this.client.call({
             method: "post",
             url: "/auth/register",
-            data,
+            data: {
+                ...data,
+                applicationClientId: this.client.getClientId(),
+            },
         });
     }
 

packages/sdk/src/services/draft-resource.ts

@@ -15,7 +15,10 @@ class DraftResource {
         return await this.client.call({
             method: "post",
             url: "/draft-resource/client",
-            data,
+            data: {
+                ...data,
+                applicationClientId: this.client.getClientId(),
+            },
             headers: {
                 "x-refine-cloud-token": refineCloudToken || "",
             },

packages/sdk/src/services/index.ts

@@ -4,3 +4,4 @@ export * from "./log";
 export * from "./draft-resource";
 export * from "./config";
 export * from "./cloud-query";
+export * from "./storage";

packages/sdk/src/services/log.ts

@@ -26,7 +26,10 @@ class Log {
         return await this.client.call({
             method: "post",
             url: "/log/client",
-            data,
+            data: {
+                ...data,
+                applicationClientId: this.client.getClientId(),
+            },
         });
     }
 
@@ -58,7 +61,10 @@ class Log {
         return await this.client.call({
             method: "patch",
             url: `/log/client/${id}`,
-            data,
+            data: {
+                ...data,
+                applicationClientId: this.client.getClientId(),
+            },
         });
     }
 }

packages/sdk/src/services/storage.ts

@@ -0,0 +1,65 @@
+import { Client } from "../client";
+
+class Storage {
+    private client: Client;
+
+    constructor(client: Client) {
+        this.client = client;
+    }
+
+    async getPublicUrl(payload: {
+        bucket: string;
+        path: string;
+    }): Promise<{ url: string }> {
+        const { bucket, path } = payload;
+
+        return await this.client.call({
+            method: "post",
+            url: `/storage/generate-public-url/${bucket}`,
+            data: {
+                path,
+            },
+        });
+    }
+
+    async upload(payload: {
+        bucket: string;
+        file:
+            | ArrayBuffer
+            | ArrayBufferView
+            | Blob
+            | Buffer
+            | File
+            | FormData
+            | NodeJS.ReadableStream
+            | ReadableStream<Uint8Array>
+            | URLSearchParams
+            | string;
+    }): Promise<any> {
+        const { bucket, file } = payload;
+
+        let body;
+        if (typeof Blob !== "undefined" && file instanceof Blob) {
+            body = new FormData();
+            body.append("file", file);
+        } else if (
+            typeof FormData !== "undefined" &&
+            file instanceof FormData
+        ) {
+            body = file;
+        } else {
+            body = file;
+        }
+
+        return await this.client.call({
+            method: "post",
+            url: `/storage/upload/${bucket}`,
+            data: body,
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+    }
+}
+
+export { Storage };