Feat/upload progress (#529)

* chore: Install superagent

* feat: Support upload progress

* feat: Compatibility with Nodejs and Browser

* chore: Update example

* Create lucky-insects-reply.md

.changeset/lucky-insects-reply.md

@@ -0,0 +1,6 @@
+---
+"@demo/wallet": patch
+"@bnb-chain/greenfield-js-sdk": patch
+---
+
+feat: Uploading progress

examples/nextjs/src/components/feegrant/createObj.tsx

@@ -1,12 +1,16 @@
 import { client } from '@/client';
 import { ACCOUNT_PRIVATEKEY } from '@/config/env';
 import {
+  bytesFromBase64,
   GRNToString,
+  Long,
   MsgCreateObjectTypeUrl,
   newBucketGRN,
   newObjectGRN,
   PermissionTypes,
+  RedundancyType,
   toTimestamp,
+  VisibilityType,
 } from '@bnb-chain/greenfield-js-sdk';
 import { Wallet } from '@ethersproject/wallet';
 import { ChangeEvent, useState } from 'react';
@@ -135,16 +139,16 @@ export const CreateObj = () => {
               creator: granteeAddr,
               bucketName: bucketName,
               objectName: objectName,
-              visibility: 'VISIBILITY_TYPE_PUBLIC_READ',
-              redundancyType: 'REDUNDANCY_EC_TYPE',
-              contentLength: fileBytes.byteLength,
-              expectCheckSums,
-              fileType: file.type,
-            },
-            {
-              type: 'ECDSA',
-              privateKey: privateKey,
+              visibility: VisibilityType.VISIBILITY_TYPE_PRIVATE,
+              redundancyType: RedundancyType.REDUNDANCY_EC_TYPE,
+              payloadSize: Long.fromInt(fileBytes.byteLength),
+              expectChecksums: expectCheckSums.map((x) => bytesFromBase64(x)),
+              contentType: file.type,
             },
+            // {
+            //   type: 'ECDSA',
+            //   privateKey: privateKey,
+            // },
           );
 
           const simulateInfo = await createObjectTx.simulate({

examples/nextjs/src/components/object/create/index.tsx

@@ -6,6 +6,7 @@ import {
   RedundancyType,
   VisibilityType,
 } from '@bnb-chain/greenfield-js-sdk';
+import { OnProgressEvent } from '@bnb-chain/greenfield-js-sdk/src/types/common';
 import { ReedSolomon } from '@bnb-chain/reed-solomon';
 import { ChangeEvent, useState } from 'react';
 import { useAccount } from 'wagmi';
@@ -122,6 +123,9 @@ export const CreateObject = () => {
                 body: file,
                 txnHash: txHash,
                 duration: 20000,
+                onProgress: (e: OnProgressEvent) => {
+                  console.log('progress: ', e.percent);
+                },
               },
               {
                 type: 'EDDSA',
@@ -197,6 +201,9 @@ export const CreateObject = () => {
                 delegatedOpts: {
                   visibility: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
                 },
+                onProgress: (e: OnProgressEvent) => {
+                  console.log('progress: ', e.percent);
+                },
               },
               {
                 type: 'EDDSA',
@@ -230,6 +237,7 @@ export const CreateObject = () => {
                 bucketName: createObjectInfo.bucketName,
                 objectName: createObjectInfo.objectName,
                 body: file,
+                timeout: 20000,
                 delegatedOpts: {
                   visibility: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
                 },

packages/js-sdk/package.json

@@ -80,7 +80,9 @@
     "lodash.set": "^4.3.2",
     "lodash.sortby": "^4.7.0",
     "long": "^5.2.1",
+    "mime-types": "^2.1.35",
     "reflect-metadata": "^0.1.13",
+    "superagent": "^8.1.2",
     "tsyringe": "^4.8.0"
   },
   "devDependencies": {
@@ -93,6 +95,8 @@
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.sortby": "^4.7.7",
     "@types/mime": "^3.0.1",
+    "@types/mime-types": "^2.1.4",
+    "@types/superagent": "^8.1.6",
     "@types/xml2js": "^0.4.11",
     "dotenv": "^16.0.3",
     "jest": "^29.5.0",

packages/js-sdk/rollup.config.js

@@ -52,7 +52,7 @@ export default async () => {
       ],
     },
     {
-      input: './src/index.ts',
+      input: ['./src/index.ts', './src/node/adapter.ts'],
       output: {
         dir: './dist/cjs',
         format: 'cjs',

packages/js-sdk/src/api/objects.ts

@@ -1,24 +1,5 @@
-import {
-  getDelegatedCreateFolderMetaInfo,
-  parseDelegatedCreateFolderResponse,
-} from '@/clients/spclient/spApis/delegatedCreateFolder';
-import {
-  getObjectOffsetInfo,
-  parseObjectOffsetResponse,
-} from '@/clients/spclient/spApis/getObjectOffset';
-import {
-  getObjectStatusInfo,
-  parseObjectStatusResponse,
-} from '@/clients/spclient/spApis/getObjectStatus';
 import { getResumablePutObjectMetaInfo } from '@/clients/spclient/spApis/resumablePutObject';
-import { DelegatedOpts } from '@/types/sp/Common';
-import {
-  DelegateCreateFolderRepsonse,
-  DelegatedCreateFolderRequest,
-} from '@/types/sp/DelegateCreateFolder';
-import { DelegatedPubObjectRequest } from '@/types/sp/DelegatedPubObject';
-import { UploadProgressResponse } from '@/types/sp/UploadProgress';
-import { assertAuthType, assertStringRequire } from '@/utils/asserts/params';
+import { DelegatedOpts, UploadFile } from '@/types/sp/Common';
 import {
   ActionType,
   Principal,
@@ -56,16 +37,28 @@ import {
 } from '..';
 import { RpcQueryClient } from '../clients/queryclient';
 import {
+  HTTPHeaderRegPubKey,
   encodePath,
   getAuthorization,
   getSortQuery,
-  HTTPHeaderRegPubKey,
 } from '../clients/spclient/auth';
+import {
+  getDelegatedCreateFolderMetaInfo,
+  parseDelegatedCreateFolderResponse,
+} from '../clients/spclient/spApis/delegatedCreateFolder';
 import { getGetObjectMetaInfo } from '../clients/spclient/spApis/getObject';
 import {
   getObjectMetaInfo,
   parseGetObjectMetaResponse,
 } from '../clients/spclient/spApis/getObjectMeta';
+import {
+  getObjectOffsetInfo,
+  parseObjectOffsetResponse,
+} from '../clients/spclient/spApis/getObjectOffset';
+import {
+  getObjectStatusInfo,
+  parseObjectStatusResponse,
+} from '../clients/spclient/spApis/getObjectStatus';
 import {
   getListObjectPoliciesMetaInfo,
   parseGetListObjectPoliciesResponse,
@@ -94,14 +87,22 @@ import {
   ListObjectsByIDsResponse,
   Long,
   ObjectStatus,
+  OnProgress,
   SpResponse,
   TxResponse,
   UploadOffsetResponse,
 } from '../types';
+import {
+  DelegateCreateFolderRepsonse,
+  DelegatedCreateFolderRequest,
+} from '../types/sp/DelegateCreateFolder';
+import { DelegatedPubObjectRequest } from '../types/sp/DelegatedPubObject';
 import { GetObjectRequest } from '../types/sp/GetObject';
 import { GetObjectMetaRequest, GetObjectMetaResponse } from '../types/sp/GetObjectMeta';
 import { ListObjectsByBucketNameResponse } from '../types/sp/ListObjectsByBucketName';
 import { PutObjectRequest } from '../types/sp/PutObject';
+import { UploadProgressResponse } from '../types/sp/UploadProgress';
+import { assertAuthType, assertFileType, assertStringRequire } from '../utils/asserts/params';
 import {
   checkObjectName,
   generateUrlByBucketName,
@@ -249,7 +250,15 @@ export class Objects implements IObject {
   }
 
   public async delegateUploadObject(params: DelegatedPubObjectRequest, authType: AuthType) {
-    const { bucketName, objectName, body, resumableOpts, timeout = 30000, delegatedOpts } = params;
+    const {
+      bucketName,
+      objectName,
+      body,
+      resumableOpts,
+      timeout = 30000,
+      delegatedOpts,
+      onProgress,
+    } = params;
 
     assertAuthType(authType);
     verifyBucketName(bucketName);
@@ -280,8 +289,9 @@ export class Objects implements IObject {
         body,
         authType,
         delegatedOpts,
-        timeout,
+        duration: timeout,
         txnHash: '',
+        onProgress,
       });
     }
 
@@ -292,6 +302,7 @@ export class Objects implements IObject {
       body,
       partSize,
       authType,
+      timeout,
       delegatedOpts,
     );
   }
@@ -300,7 +311,7 @@ export class Objects implements IObject {
     params: PutObjectRequest,
     authType: AuthType,
   ): Promise<SpResponse<null>> {
-    const { bucketName, objectName, body, duration = 30000, resumableOpts } = params;
+    const { bucketName, objectName, body, duration = 30000, resumableOpts, onProgress } = params;
     assertAuthType(authType);
     verifyBucketName(bucketName);
     verifyObjectName(objectName);
@@ -341,7 +352,8 @@ export class Objects implements IObject {
         body,
         txnHash,
         authType,
-        timeout: duration,
+        duration,
+        onProgress,
       });
     }
 
@@ -352,31 +364,34 @@ export class Objects implements IObject {
       body,
       partSize,
       authType,
+      duration,
     );
   }
 
   private async putObject(params: {
     endpoint: string;
     bucketName: string;
     objectName: string;
-    body: File;
+    body: UploadFile;
     txnHash: string;
     authType: AuthType;
     delegatedOpts?: DelegatedOpts;
-    timeout: number;
+    duration: number;
+    onProgress?: OnProgress;
   }): Promise<SpResponse<null>> {
     const {
       authType,
       body,
       bucketName,
       delegatedOpts,
-      timeout: duration,
+      duration,
       endpoint,
       objectName,
       txnHash,
+      onProgress,
     } = params;
 
-    const { reqMeta, optionsWithOutHeaders, url } = await getPutObjectMetaInfo(endpoint, {
+    const { reqMeta, optionsWithOutHeaders, url, file } = await getPutObjectMetaInfo(endpoint, {
       bucketName,
       objectName,
       contentType: body.type,
@@ -387,14 +402,19 @@ export class Objects implements IObject {
     const signHeaders = await this.spClient.signHeaders(reqMeta, authType);
 
     try {
-      const result = await this.spClient.callApi(
+      const result = await this.spClient.upload(
         url,
         {
           ...optionsWithOutHeaders,
           headers: signHeaders,
         },
         duration,
+        file,
+        {
+          onProgress,
+        },
       );
+
       const { status } = result;
 
       return { code: 0, message: 'Put object success.', statusCode: status };
@@ -426,9 +446,10 @@ export class Objects implements IObject {
     endpoint: string,
     bucketName: string,
     objectName: string,
-    body: File,
+    body: UploadFile,
     partSize: number,
     authType: AuthType,
+    timeout: number,
     delegatedOpts?: DelegatedOpts,
   ) {
     let offset = 0;
@@ -444,11 +465,12 @@ export class Objects implements IObject {
     const { totalPartsCount } = this.splitPartInfo(body.size, partSize);
 
     // split file
+    const file = assertFileType(body) ? body.content : body;
     const chunks = [];
     for (let i = 0; i < totalPartsCount; i++) {
       const start = i * partSize;
       const end = Math.min(start + partSize, body.size);
-      const chunk = body.slice(start, end);
+      const chunk = file.slice(start, end);
       chunks.push(chunk);
     }
 
@@ -478,7 +500,7 @@ export class Objects implements IObject {
             ...optionsWithOutHeaders,
             headers: signHeaders,
           },
-          30000,
+          timeout,
         );
       } catch (error: any) {
         return {
@@ -918,7 +940,7 @@ export class Objects implements IObject {
     const signHeaders = await this.spClient.signHeaders(reqMeta, authType);
 
     try {
-      const result = await this.spClient.callApi(
+      const result = await this.spClient.callApiV2(
         url,
         {
           ...optionsWithOutHeaders,
@@ -928,7 +950,8 @@ export class Objects implements IObject {
       );
       const { status } = result;
 
-      const xmlData = await result.text();
+      //@ts-ignore
+      const xmlData = result.text;
       const res = parseDelegatedCreateFolderResponse(xmlData);
 
       return { code: 0, message: 'Create folder success.', statusCode: status, body: res };

packages/js-sdk/src/clients/spclient/spApis/putObject.ts

@@ -1,5 +1,6 @@
 import { EMPTY_STRING_SHA256, METHOD_PUT } from '@/constants';
 import { ReqMeta, VisibilityType } from '@/types';
+import { UploadFile } from '@/types/sp/Common';
 import { generateUrlByBucketName } from '@/utils/asserts/s3';
 import { encodePath, getSortQueryParams } from '../auth';
 
@@ -10,7 +11,7 @@ export const getPutObjectMetaInfo = async (
     objectName: string;
     bucketName: string;
     contentType: string;
-    body: File;
+    body: UploadFile;
     txnHash?: string;
     delegatedOpts?: {
       visibility: VisibilityType;
@@ -48,12 +49,12 @@ export const getPutObjectMetaInfo = async (
 
   const optionsWithOutHeaders: Omit<RequestInit, 'headers'> = {
     method: METHOD_PUT,
-    body,
   };
 
   return {
     url: url.href,
     optionsWithOutHeaders,
     reqMeta,
+    file: body,
   };
 };