完了画面でアップロードした画像を表示させるサンプルプログラム

登録・更新時の完了画面でアップロードされた画像を表示させるサンプルプログラムを作成いたしました。
写真投稿キャンペーンなどで、完了画面でアップロードされた画像を表示したい場合は、ぜひ参考にしてみてください。
また、ファイル添付時にサムネイルを表示させる強化ガジェットの記事も準備をしております。

仕様

登録・更新のブロックで完了時にAPIでファイルを取得し、表示を行うサンプルプログラムとなります。
設定前に以下をご確認ください。
・プログラムにてデータを渡すため、ブロックをソース設定で作成いただく必要があります
・ファイルを取得するAPI は、ファイル数分を使用します
　同時登録等を考慮し、APIの上限数を拡張しておくことをおすすめいたします
・対応フィールド数は、1フィールドのみとなり、表示画像数や容量によっては表示できません
・jpg,jpeg,png,gif,svg,webp のみ対応しています
・heic には対応していませんので、ご注意ください
* レコード値挿入の機能ではファイルを設置できないため、プログラムによる実装が必要になります

設定方法

ページの PHP タブにコードを貼り付けて、設定値を変更してください。

PHP

<?php
//------------------------------
// 設定値用モジュール
//------------------------------
define("API_URL", "https://api.spiral-platform.com/v1/");
define("API_KEY", $SPIRAL->getEnvValue(""));
define("APP_ROLE",$SPIRAL->getEnvValue("")); // ロールによるAPI権限が不要の場合
define("APP_ID",$SPIRAL->getEnvValue(""));
define("DB_ID",$SPIRAL->getEnvValue(""));
// file Field の情報
$fileField = array(
    "fileFieldID" => "ファイルフィールドのID",
    "fileFieldName" => "ファイルフィールドの識別名",
);

//------------------------------
// ページ内処理 サンプル
//------------------------------

$commonBase = CommonBase::getInstance();
// ステップのセット
// 登録ブロックの場合
$formComplete = $SPIRAL->getRegistrationForm("ブロックの識別名"); // 登録フォームブロックの識別名を登録
// 更新ブロックの場合
// $formComplete = $SPIRAL->getUpdateForm("ブロックの識別名"); // 更新フォームブロックの識別名を登録

$SPIRAL->setTHValue("imgFile", array());
if($formComplete->isCompletedStep()){
    $record = $SPIRAL->getRecordValue();
    $fileList = array();
    foreach($record['item'][$fileField['fileFieldName']] as $key){
        $extension = substr($key['fileName'], strrpos($key['fileName'], '.') + 1);
        if($extension == "svg" || $extension == "SVG"){
            $extension = "svg+xml";
        }elseif(!preg_grep('/'.$extension.'/i', $commonBase->extensionList())){
            $extension = null;
        }
        if($extension){
            $apiUrlPass = "apps/". APP_ID. "/dbs/". DB_ID. "/". $fileField['fileFieldID']. "/". $record['item']['_id']. "/files/". $key['fileKey']. "/download";
            $apiResponse = $commonBase->apiCurlAction("GET", $apiUrlPass, "", "", true);
            $fileList[] = array('fileName' => $key['fileName'],'fileData' => 'data:image/'.$extension.';base64,'.base64_encode($apiResponse));
        }        
    }
    $SPIRAL->setTHValue("imgFile", $fileList);
}

//------------------------------
// 共通用モジュール
//------------------------------
class CommonBase {
    /**
     * シングルトンインスタンス
     * @var UserManager
     */
    protected static $singleton;

    public function __construct() {
        if (self::$singleton) {
            throw new Exception('must be singleton');
        }
        self::$singleton = $this;
    }
    /**
     * シングルトンインスタンスを返す
     * @return UserManager
     */
    public static function getInstance() {
        if (!self::$singleton) {
            return new CommonBase();
        } else {
            return self::$singleton;
        }
    }

    function extensionList(){
        return array('jpg','jpeg','png','gif','webp');
    }


    /**
     * V2用 API送信ロジック
     * @return Result
     */
    function apiCurlAction($method, $addUrlPass, $data = null, $multiPart = null, $jsonDecode = null) {
        $header = array(
            "Authorization:Bearer ". API_KEY,
            "X-Spiral-Api-Version: 1.1",
        );
        if($multiPart) {
            $header = array_merge($header, array($multiPart));
        } else {
            $header = array_merge($header, array("Content-Type:application/json"));
        }
        if(APP_ROLE){
			$header = array_merge($header, array("X-Spiral-App-Role: ".APP_ROLE));
		}
        // curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_URL, API_URL. $addUrlPass);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        if ($method == "POST") {
            if ($multiPart) {
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            } else {
                curl_setopt($curl, CURLOPT_POSTFIELDS , json_encode($data));
            }
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "PATCH") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "DELETE") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        $response = curl_exec($curl);
         if (curl_errno($curl)) echo curl_error($curl);
        curl_close($curl);
        if($jsonDecode){
            return $response;
        }else{
            return json_decode($response, true);
        }
    }
}

設定値は下記の6ヶ所を設定してください。

API_KEY 6行目	アカウント管理で発行したAPIキーをセットしたPHP環境変数の変数名を設定
API_ROLE 7行目	アプリロールの識別名をセットしたPHP環境変数の変数名を設定アプリロールによる権限設定をしない場合は未入力
APP_ID 8行目	更新するアプリのIDをセットしたPHP環境変数の変数名を設定
DB_ID 9行目	更新するDBのIDをセットしたPHP環境変数の変数名を設定
fileFieldID 12行目	'ファイルフィールドのID'の箇所にファイルフィールドのIDを設定
fileFieldName 13行目	'ファイルフィールドの識別名'の箇所にファイルフィールドの識別名を設定

下記は、PHP環境変数を使った書き方になります。
環境変数を使用しない場合は、下記を使用せずに直接IDもしくは識別名を設定してください。

$SPIRAL->getEnvValue("")

次にどのフォームブロックかを判定する箇所を修正します。
22行目 - 25行目の箇所になります。

// 登録ブロックの場合
$formComplete = $SPIRAL->getRegistrationForm("ブロックの識別名"); // 登録フォームブロックの識別名を登録
// 更新ブロックの場合
$formComplete = $SPIRAL->getUpdateForm("ブロックの識別名"); // 更新フォームブロックの識別名を登録

使用しないブロックタイプの設定は、コメントアウト(*)してください。
* 文字の先頭に「//」をつけることでコメントアウトできます。
使用するブロックタイプの設定として、「ブロックの識別名」となっている箇所を、使用するブロックの識別名に変更します。

最後に、ブロックの完了の箇所に Thymeleaf を埋め込みます。
Thymeleaf

<th:block th:each="data:${cp.result.value['imgFile']}">
    <img th:src="${data['fileData']}" th:alt="${data['fileName']}" />
</th:block>

設定している完了画面でのみブロックが出現する仕組みにしているので、ページに設定していただいても問題ありません。
サンプルでは、画像の枚数分 imgタグを出力する形にしているため、デザインに合わせてタグ構成やCSS追加ください。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

仕様

設定方法

最後に

関連記事