init #

初始化Web component

基本使用範例 #

以下範例的參數為必填

其餘的參數皆為選填

可依照專案需求自行設定

window.$microMediaSimpleUploader.init({
  apiKey: 'ad0sf3=2n&42cx8/y013',
  apiEndpoint: 'http://localhost:3000',
})

apiKey #

Required/String

API Gateway API Key

apiEndpoint #

Required/String

API Gateway endpoint

maxSize #

Optional/Number

檔案大小限制(bytes)

預設50MB

最多100MB

不可小於等於0

eventOnFileChose #

Optional/Function

檔案已經被選擇的event hook

可用來跳出popup或顯示讓User知道目前選擇的檔案、類型等資訊

您更可以自行加入檔案限制規則

若不合規則只要拋出Error

Web component只要catch到error將不會載入User選取的檔案

function可用參數 #

• file: File/null, js的File介面

範例 #

window.$microMediaSimpleUploader.init({
  eventOnFileChose: (file) => {
    if(!file.name.includes('video')) {
      alert(`檔案名稱必須包含video字串`)
      throw new Error('filename invalid') // 拋出error讓web component不要載入這個檔案
    }
  },
})

eventOnFileChange #

Optional/Function

檔案更新event hook

跟上面的eventOnFileChose event hook用途不同

eventOnFileChose event hook主要是User選取到檔案的時候才會出發

eventOnFileChange除了User選取到檔案後觸發之外

Web Component遇到檔案類型、大小不符合限制而移除檔案

或是User自行移除檔案的時候

也會觸發此event hook

function可用參數 #

• file: File/null, js的File介面, 或是null(User移除檔案的時候)

eventOnLoadingChange #

Optional/Function

web component loading狀態改變event hook

外部可用來決定是否顯示loading

function可用參數 #

• status: Boolean, 當status為true代表web component正在上傳檔案中, false則反之

eventOnUploadRejectedForFileEmpty #

Optional/Function

因為沒選擇檔案導致上傳被拒絕的event hook

外部可用來顯示錯誤訊息提示User要先選取檔案

範例 #

window.webComponentInstance.init({
  eventOnUploadRejectedForFileEmpty: () => alert('請先選擇檔案'),
})

eventOnUploadRejectedForUploading #

Optional/Function

因為還有檔案在上傳中導致上傳被拒絕的event hook

外部可用來顯示錯誤訊息提示User目前還有檔案正在上傳中無法上傳

範例 #

window.webComponentInstance.init({
  eventOnUploadRejectedForUploading: () => alert('還有檔案正在上傳中'),
})

eventOnUploadRejectedForOverSize #

Optional/Function

上傳被拒絕, 因為檔案超過限制

function可用參數 #

• file: File, js的File介面
• maxSize: Number, 檔案大小限制(bytes)
• maxSizePretty: String, 易讀的檔案大小, 單位將自行變動, 例如: 395KB, 10.3MB, 1.5GB

範例 #

window.webComponentInstance.init({
  eventOnUploadRejectedForOverSize: (file, maxSize, maxSizePretty) => alert('還有檔案正在上傳中'),
})

eventOnUploadStatusChange #

Optional/Function

上傳狀態改變event hook

function可用參數 #

• status: Boolean, 是否正在上傳檔案

範例 #

window.webComponentInstance.init({
  eventOnUploadStatusChange: (status) => {
    if(status) {
      alert('檔案上傳中')
    } else {
      alert('檔案上傳結束')
    }
  },
})

eventOnUploadProgress #

Optional/Function

上傳進度改變的event hook

function可用參數 #

• progressEvent: Object, 上傳的進度資訊物件, 詳見Data Model - progressEvent

範例 #

html

<div id="upload-status-info" style="margin: 20px 0; display: none">
  <p>上傳進度百分比: <span id="upload-progress"></span>%</p>
</div>

javascript

window.webComponentInstance.init({
  eventOnUploadProgress: (status) => {
    $('#upload-progress').text(status.progress)
  },
  eventOnMultipartUploadStatusChange: (status) => {
    if(status) {
      $('#upload-status-info').show()
    } else {
      $('#upload-status-info').hide()
    }
  },
})

eventOnUploadFail #

Optional/Function

上傳失敗event hook

function可用參數 #

• file: File, js的File介面
• error: Error, 發生的錯誤資訊(js Error), 這個error通常只要console.error即可, 只需要顯示訊息讓User知道上傳失敗即可

範例 #

window.webComponentInstance.init({
  eventOnUploadFail: (file, error) => {
    console.error(error)
    alert(`檔案上傳出現意外的錯誤, 可能是暫存檔案已過期, 請再重新上傳一次`)
  },
})

eventOnUploadSuccess #

Optional/Function

上傳成功event hook

function可用參數 #

• file: File, js的File介面
• result: Object, 檔案上傳成功資訊
  • bucket: String, S3 bucket名稱
  • filename: String, 檔案名稱
  • path: String, 檔案儲存在S3的路徑(s3 object key)
  • url: String, 影片網址(CloudFront)

範例 #

window.webComponentInstance.init({
  eventOnUploadSuccess: data => {
    alert(`${data.filename}已上傳成功, S3路徑:${data.path}`)
    // TODO 應用程式使用這個data物件, call內部的API將檔案路徑儲存在DB中(可能與資料實體綁定)
  },
})

eventOnFileValidateFail #

Optional/Function

當User選擇檔案後

Web component將會驗證檔案是否為影片檔

若驗證失敗將會觸發此event hook

您可用使用此event hook來顯示錯誤訊息

function可用參數 #

• file: File, js的File介面

範例 #

window.webComponentInstance.init({
  eventOnFileValidateFail: (file) => {
    alert(`${file.name}並不是影片檔案, 請選擇影片檔再繼續`)
  },
})