【Bubble】Custom stateを使って、複数枚の画像をアップロードしてみた！

はじめに

みなさんこんにちは！
CISのノーコードエンジニア、根本です！
今回は、Bubbleの「Custom state」を使って複数枚の画像のアップロードを行いたいと思います！

Custom stateってなに？

Custom stateは、データベースとは別でページ内に保存できる変数です！
ページ内のエレメントにも保存することができます！

では、実際に作成してみましょう！

実際に作成してみよう！

1.データベースの設定

Type nameは「Image Data」
「image_list」を「imageのリスト型」で作成します。

この記事では、「imageのリスト型」をimage<list>と表記します。

2.フロントの作成

必要なエレメントは、「RepeatingGroup」「PictureUploader」「保存Button」になります。
「Repeating Group」の中身は、Imageとiconが入っている「Group」です。
保存Buttonを押したら出てくる「POPUP」も作成しておきます。

次に「PictureUploader」にCustom stateを作成します。
「iマーク」を押すとCustom state画面が開きます。
State nameを「image list custom」、State typeを「image <list>」で作成します。

Custom stateが作成できたので、RepeatingGroupに「image list custom」を表示します。

• RepeatingGroup

Type of image : image
Data source : PictureUploader 画像をアップロード’s image list custom

• Group

Type of image : image
Data source : Current cell’s image

• Image

Dynamic image : Parent group’s image:processed with Imgix

これでCustom state「image list custom」を表示できます。

3.Workflowの設定

フロントが完成したので、次にWorkflowの設定を行います。
「PictureUploader」「icon」「保存Button」の順に説明します。

「PictureUploader」では、画像がアップロードされたら「image list custom」に「image」を追加する設定を行います。

「icon」では、画像部分のアイコンを押したら「image list custom」から「image」を削除する設定を行います。

「保存Button」では、「image list custom」をデータベースの「image_list」に保存する設定を行います。
保存後にPOPUPを表示させる設定も行います。

4.プレビューで動作確認

実際にプレビューで動作を確認してみましょう。

• 画像を2枚アップロード
• 1枚削除
• 再度1枚アップロード
• 保存し、データベース確認

上記の順番で確認していきます。

• 画像を2枚アップロード

• 1枚削除

• 再度1枚アップロード

• 保存し、データベース確認

画像をアップロードしてから保存まで確認することができました。

まとめ

今回は、Bubbleの「Custom state」を使って複数枚の画像のアップロード機能の実装を行いました。
Custom stateには様々な使い方があるので、今後も紹介していきたいと思います！

CISでは、豊富なノーコード実績から皆さんのノーコードに関する疑問や不安点の払拭をお手伝いしております。
お気軽にお問い合わせください！