1. 將相片和檔案從 Oracle Visual Builder 應用程式傳送到 Oracle Content and Experience
  2. 上傳檔案至 Oracle Content and Experience

上傳檔案至Oracle Content and Experience

從您在Oracle Visual Builder 中開發的應用程式上傳檔案至 Oracle Content and Experience。

若要使用Oracle Visual Builder 應用程式從使用者的裝置上傳檔案，您需要三種情況：

  1. 顯示上傳檔案端點以上傳檔案的服務連線。
  2. 一個檔案選取器元件，可讓使用者從其裝置中選取檔案。
  3. 使用上傳檔案端點，上傳檔案選取器傳回的動作鏈結。

您需要服務連線至文件的 REST API，才能提供「上傳檔案」端點的存取權。建立服務連線和端點之後，您可以使用應用程式中的動作鏈結，從使用者的裝置挑選檔案，並將其上傳至Oracle Content and Experience。

建立端點以上傳檔案

您可以建立端點，使用您連線的Oracle Content and Experience 執行處理的基礎 URI， 以及查詢參數來存取「文件的 REST API」所公開的「上傳檔案」端點。

例如，如果 https://cec-instance-url.com 是您連線至之Oracle Content and Experience 執行處理的基礎 URI，則在建立端點時，會使用適當的 HTTP 方法 (POST) 來輸入下列 URI。

https://cec-instance-url.com/documents/api/1.2/files/data

您也需要提供用來連線Oracle Content and Experience 以使用「上傳檔案」端點的認證詳細資訊。基本認證適用於開發用途，但不建議用於實際環境執行。

建立上傳檔案至Oracle Content and Experience的端點：

  1. 在導覽器中開啟「服務連線」，然後按一下建立服務連線 (「建立服務連線」圖示)。
  2. 在「建立服務連線」精靈的「選取來源」窗格中，按一下依端點定義。
  3. 從「方法」下拉式清單中，選取 POST，在 URL 輸入欄位中輸入 https://cec-instance-url.com/documents/api/1.2/files/data，從「動作提示」下拉式清單中選擇建立，然後按下一步。
  4. 在「服務」頁籤中，複查服務基礎 URL、服務名稱以及服務 ID 值。
    Oracle Visual Builder 會根據您先前輸入的值，自動在這些欄位中填入值。
  5. 開啟認證頁籤，然後選取啟用認證/代理主機來輸入認證詳細資訊。
  6. 從「認證機制」下拉式清單中選取「基本」，然後輸入用來存取Oracle Content and Experience 執行處理的使用者名稱和密碼。
  7. 開啟要求頁籤，並為要求主體新增 multipart/form-data 作為媒體類型，然後移除 application/json。
  8. 開啟回應頁籤，然後輸入端點的範例回應主體。

    「回應」頁籤包含一個文字區，供您貼到回應主體的範例中。「回應」中的範例是傳回物件的結構定義。輸入下列回應呼叫「上傳檔案 API」時傳回之物件的範例。 

    {
    "id":"DB1C5AF480FFE61C588027A8T0000000000100000001",
    "parentID":"FF4729683CD68C1AFB1AE87DT0000000000100000001",
    "name":"example.txt",
    "type":"file",
    "size":"13",
    "version":"1",
    "createdTime":"2014-02-21T21:32:37Z",
    "modifiedTime":"2014-02-21T21:32:37Z",
    "createdBy":{
        "displayName":"User AA",
        "id":"U0EAA20910FAF3052ACB79E4T00000000001",
        "loginName":"userAALoginName",
        "type":"user"
    },
    "ownedBy":{
        "displayName":"User AA",
        "id":"U0EAA20910FAF3052ACB79E4T00000000001",
        "loginName":"userAALoginName",
        "type":"user"
    },
    "modifiedBy":{
        "displayName":"User AA",
        "id":"U0EAA20910FAF3052ACB79E4T00000000001",
        "loginName":"userAALoginName",
        "type":"user"
    },
    "errorCode":"0",
    "errorMessage":"Successfully checked in content item 'ADC412030000000000000000000002'."
}
    Vb-cec-example-response.png 的描述請參見下方
    Vb-cec-example-response.png 圖解描述
  9. 按一下建立。

新增檔案選取器元件至您的頁面

「檔案選擇器」元件是新增到應用程式頁面的最適當元件，供使用者選取要上傳到後端儲存體服務 (例如Oracle Content and Experience) 的檔案。

它可讓使用者選取檔案或將檔案拖放至元件所呈現的置放區域。若要在應用程式中成功使用「檔案選擇器」元件，請執行下列作業。

  1. 新增變數至您的應用程式頁面，以參照「檔案選取器」元件傳回的檔案物件和檔案物件名稱。
  2. 將「檔案選取器」元件新增至您的頁面，並設定「檔案選取器」的 ojSelect 事件，以在使用者選取「檔案選取器」元件時觸發動作鏈結。
  3. 在由檔案選擇器的 ojSelect 事件觸發的動作鏈結中，新增指派變數動作，指派檔案物件和檔案物件名稱給步驟 1 中參照的頁面變數。

完成這些作業之後，應用程式就已順利選取檔案，您現在可以設定讓您的應用程式呼叫上傳檔案至 Oracle Content and Experience 文件儲存體的「上傳檔案」端點。稍後會說明此後者工作 (呼叫「上傳檔案」端點)。現在，讓我們完成使用「檔案選取器」元件關聯的作業。

在包含「檔案選擇器」元件之頁面的「變數」編輯器中，按一下+變數按鈕即可新增兩個新變數：

  • 「物件」類型的 uploadFile
  • 「字串」類型的 uploadFileName

這些變數將會儲存檔案物件和「檔案選取器」元件所傳回的檔案物件名稱，這些元件將會加到您的頁面，讓使用者可以從他們的裝置選取檔案。

Variables-file-picker.png 的描述如下
Variables-file-picker.png 圖解描述

Oracle Visual Builder 中的「元件選用區」不會顯示「檔案選擇器」元件，因此您必須手動將它新增至您要使用它的應用程式頁面中。您會在頁面的「程式碼」檢視中新增「檔案選取器」元件，讓使用者可以看見並使用該元件。Oracle Visual Builder 就會在頁面的描述資料中新增匯入敘述句，讓「檔案選擇器」元件匯入成可在您的應用程式中使用。

使用Oracle Visual Builder中的「程式碼」檢視新增「檔案選取器」元件。 

...
<div>
  <oj-file-picker id="oj-file-picker-1084591017-1"></oj-file-picker>
</div>
...

將「檔案選擇器」元件新增至您的頁面之後，就可以使用 Visual Builder 的「特性偵測器」來設定其使用案例的特性。當您設定「檔案選擇器」元件一次選取一個檔案時，Visual Builder 會在您的檔案中產生下列程式碼片段。

...
<div>
	<oj-file-picker id="oj-file-picker-1084591017-1" selection-mode="single"></oj-file-picker>
</div>
...

若要將選取的檔案與檔案名稱指派給變數，請執行下列動作：

  1. 在「檔案選擇器」元件的「特性偵測器」中，按一下新建自訂事件，在顯示之「選取事件」對話方塊中的「檔案選取器事件」底下選擇ojSelect，然後按一下選取。
  2. 在顯示的「選取動作鏈結」對話方塊中，按一下新建動作鏈結以開啟「動作鏈結」工作區。
  3. 在動作底下的篩選輸入欄位中，輸入 Assign，然後將指派變數動作拖放至工作區。
  4. 選取您剛剛新增至工作區的「指派變數」動作，然後按一下「變數」區段下的指派。
  5. 在顯示的「指定變數」對話方塊中，在「來源中的動作鏈」底下的詳細節點與「目標中頁面」底下的uploadFile 節點之間繪製連線。
  6. 在目標的頁面底下選取uploadFileName，然後在提供的輸入欄位中寫入下列表示式。
    $chain.variables.detail.files[0].name
  7. 選取表示式核取方塊。
  8. 按一下儲存。
您的應用程式頁面現在會包含一個「檔案選擇器」元件，可讓使用者在程式實際執行時選取檔案，加上儲存所選檔案和檔案名稱的變數，再呼叫「上傳檔案」端點。

呼叫上傳檔案端點

您將會使用Oracle Content and Experience 所提供的「上傳檔案」端點，來上傳使用者使用「檔案選擇器」元件選取的檔案。

若要在您的應用程式中成功使用上傳檔案端點，請執行下列工作：

  1. 在您應用程式頁面中新增 folderID 變數，以識別Oracle Content and Experience 文件儲存體中「上傳檔案」端點將上傳檔案的資料夾。
  2. 在一般使用者點選或按一下以呼叫動作鏈結的應用程式頁面新增按鈕元件。
  3. 將「呼叫 REST 端點」動作新增至按鈕元件所呼叫的動作鏈中。此來電 REST 端點動作會呼叫上傳檔案端點。

完成這些作業後，您的應用程式會將「檔案選擇器」元件傳回的檔案上傳到Oracle Content and Experience 文件儲存體。

在將包含按鈕元件之頁面的「變數」編輯器中，按一下+變數按鈕來新增名為 folderId 的變數。將類型指定為 String，其預設值為 self，然後選取輸入參數核取方塊。

此變數識別「上傳檔案」端點上傳檔案的資料夾位置。預設值 self 指定「文件」的根目錄。

Vb-cec-variable-folderid.png 的描述請參見下方
Vb-cec-variable-folderid.png 圖解描述
新增按鈕元件供使用者呼叫「上傳檔案」端點：
  1. 在新增「檔案選擇器」元件的頁面中，新增一個按鈕元件。
  2. 在「按鈕」元件之「特性偵測器」的「事件」區段中，按一下新建事件下拉式清單，然後選取快速開始：ojAction。
  3. 在「動作鏈結」工作區的動作底下的篩選輸入欄位中輸入 Call REST，然後將「呼叫 REST 端點」動作拖放至「動作鏈結」工作區。
  4. 選取您剛新增的「呼叫 REST 端點」動作後，請按一下選取端點按鈕。
  5. 在「選取端點」對話方塊中，選取您在建立Oracle Content and Experience服務連線時新增的「上傳檔案」端點，然後按一下選取。
  6. 在動作鏈結工作區中，選取呼叫 REST 端點動作，然後在內容類型輸入欄位中輸入 multipart/form-data。
  7. 在「參數」下按一下「主體」來呼叫「呼叫 REST 端點」對話方塊，您可以在此寫入下列主體參數的靜態內容表示式，以上傳 uploadFile 頁面變數所參照的檔案。表示式的一個部分是一個 JSON 物件 (jsonInputParameters)，其中 parentID 與 folderID 頁面變數成對，另一個部分則是檔案本身的內容 (primaryFile)。
    {
 "jsonInputParameters": "{{ '{ \"parentID\":\"' + $page.variables.folderId + '\"}' }}",
 "primaryFile": "{{ $page.variables.uploadFile ? $page.variables.uploadFile.files[0] : {} }}"
}
    Vb-cec-upload-file-expression.png 的描述請參見下方
    Vb-cec-upload-file-expression.png 圖解描述
  8. 按一下儲存。
您的應用程式現在會包含一個頁面，其中具有「檔案選取器」和「按鈕」元件，讓一般使用者能夠選取檔案並將檔案上傳至Oracle Content and Experience中的「文件」儲存體。