uss-js-sdk

uss web js sdk.

Installation

• import from cdn

<script src="https://unpkg.com/uss-js-sdk/dist/uss-js-sdk.js"></script>

USS object will be set in window.

• install from npm

yarn config set registry https://npm.shopee.io
yarn add uss-js-sdk

Getting Started

• npm

1. Construct uss object.

import USS, { UploaderEvents } from 'uss-js-sdk'
// by appId and appSecret

const uss = new USS({
  appId: 'xxxxx',
  appSecret: 'xxxxx',
  baseUrl: 'xxxxx'
})

// by appId and token
const uss = new USS({
  appId: 'xxxxx',
  token: 'xxxxx',
  baseUrl: 'xxxxx'
})

2. init uss

// it is a async function, we must run it
await uss.init()

3. create bucket

// it is a async function, we must to run it when we don't have a bucket
await uss.createBucket('test')

// other:
// bucket list
await uss.getBucketList()
// delete bucket
await uss.deleteBucket('test')

4. init uploader

const uploader = uss.initUploader({
  bucket: 'test'
})

5. upload a file

// it isn't required
uploader.on(UploaderEvents.fileProgress, (info) => {
  console.log(info)
})

// get file by element id
const file = document.querySelector('#fileId').file.files[0]

const result = await uploader.putFile({
  file,
  // it isn't required
  onUploadProgress: (event) => {
    uploader.emit(UploaderEvents.fileProgress, event)
  }
})

6. upload a buffer

import { getArrayBuffer } from 'uss-js-sdk'

// it isn't required
uploader.on(UploaderEvents.fileProgress, (info) => {
  console.log(info)
})

// get file by element id
const file = document.querySelector('#fileId').file.files[0]
// get buffer by file
const buffer = await getArrayBuffer(file)

const result = await uploader.putBuffer({
  fileBuffer: buffer,
  contentType: 'application/pdf',
  fileName: 'test',
  // it isn't required
  onUploadProgress: (event) => {
    uploader.emit(UploaderEvents.fileProgress, event)
  }
})

API Documentation

• Get upload progress

import { UploaderEvents, IUploadProgressInfo } from 'uss-js-sdk'

// ...

function handleUploadProgress(info: IUploadProgressInfo) {
  console.log(info)
}

// Get upload progress
uploader.on(UploaderEvents.fileProgress, handleUploadProgress)

const result = await uploader.putFile({
  // ...
  onUploadProgress: (event) => {
    uploader.emit(UploaderEvents.fileProgress, event)
  }
})
// `uploader.putFile` return a Promise, resolved when upload success, rejected when upload failed.

• Cancel upload

  The cancel method support resume from breakpoint

uploader.cancel()

• Resume upload

  The resume should be called when request is canceled.

uploader.resume()

• Resume from breakpoint

  The SDK supports automatic breakpoint continuation function without additional operations. When the upload is unexpectedly terminated (e.g. browser closed, network interrupted, etc.), you can upload the file again and continue from the interrupted point, reducing the repeated upload time.

API Definition

new USS

| Param | Required | Type | Description | | --------- | -------- | ------ | ----------------- | | appId | true | string | app id | | appSecret | true | string | app secret | | baseUrl | true | string | server domain | | timeout | false | number | Request timed out |

uss.createBucket

| Param | Required | Type | Description | | ---------- | -------- | ------ | ----------- | | bucketName | true | string | bucket name |

uss.deleteFile

| Param | Required | Type | Description | | ---------- | -------- | -------- | ----------- | | bucketName | true | string | bucket name | | fileFids | true | string[] | fid list |

uss.initUploader

| Param | Required | Type | Description | | ------------- | -------- | ------ | ------------- | | bucketName | true | string | bucket name | | authorization | false | string | authorization | | sliceSize | false | number | slice size | | uploadDomain | false | string | upload domain | | domain | false | string | server domain | | concurrency | false | number | concurrency |

uploader.putFile

| Param | Required | Type | Description | | ---------------- | -------- | -------- | ----------------------------- | | file | true | File | File object | | contentType | false | MIME | file type | | fileName | false | string | file name | | onUploadProgress | false | function | callback file upload progress |

uploader.putBuffer

| Param | Required | Type | Description | | ---------------- | -------- | -------- | ----------------------------- | | file | true | File | File object | | contentType | true | MIME | file type | | fileName | true | string | file name | | onUploadProgress | false | function | callback file upload progress |

uploader.on

| Param | Required | Type | Description | | --------- | -------- | -------- | -------------- | | eventName | true | string | event name | | callback | true | function | callback event |

uploader.emit

| Param | Required | Type | Description | | --------- | -------- | ------ | ------------- | | eventName | true | string | event name | | data | false | object | callback data |

Related Docs

• USS API 文档
• USS 接入文档