# 「写真を変更する」ボタンを押すとプロフィール画像が変更される仕様にしたいです。 **URL:** \ **Category:** bubble\ **Created:** [2021 年 9 月 13 日午後 3:08 UTC](https://www.nocode-faq.com/t/topic/2169 "2021-09-13T15:08:44Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\ **Post date:** [2021 年 9 月 13 日午後 3:08 UTC](https://www.nocode-faq.com/t/topic/2169/1 "2021-09-13T15:08:44Z")
「写真を変更する」タグを押すと人物画像が変更される仕様にしたいです。 現在、添付画像の状態で、人物画像部分はPictureUploaderで作成しているため、画像部分を押せば画像は変更できますが、画像横の「写真を変更する」タグを押すと、画像変更できる仕様にしたいです。 どのようにすればよろしいのでしょうか。 お分りの方、教えて頂ければ幸いです。 ![スクリーンショット 2021-09-13 23.59.42](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4ff6f6b5a0ac24132eb99a65be8248bbdc01e819.png) ---
**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\ **Post date:** [2021 年 9 月 13 日午後 4:30 UTC](https://www.nocode-faq.com/t/topic/2169/2 "2021-09-13T16:30:04Z")
使っているツールや環境を書かないとアドバイスしようがないと思うので、まずはツールが何かを明らかにしてください！ ---
**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\ **Post date:** [2021 年 9 月 14 日午前 4:08 UTC](https://www.nocode-faq.com/t/topic/2169/3 "2021-09-14T04:08:33Z")
失礼しました！babbleです！ ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2021 年 9 月 14 日午前 9:47 UTC](https://www.nocode-faq.com/t/topic/2169/4 "2021-09-14T09:47:05Z")
実際に試していないので、頭の中で想像しながら書きます。 分かりづらかったらごめんなさい。 PictureUploaderにカスタムステートをImage型で宣言します。 そして、PictureUploaderのワークフロー (When PicturePuloader’s value is changed) を設定し、Step1で、アップロードされた画像をカスタムステートに代入します。 そしてStep2で、Reset relevant inputsを設定します。 これで、画像をアップロードしてもPictureUploaderの部分は変更されないはずです。 「写真を変更する」ボタンに、Yes/No型でカスタムステートを宣言し、初期値をNoにします。 PictureUploaderの上に、同じサイズでImageエレメントを重ねます。 これのソースをDynamicに設定し、先程のカスタムステートを指定します。 このImageエレメントは、「This element is visible」のチェックを外します。 Conditionalタブに行き、「写真を変更する」のカスタムステートがYesのとき、「This element is visible」にチェックを入れます。 「写真を変更する」ボタンにワークフロー (When 写真を変更する is clicked) を設定し、先程宣言したカスタムステートの値をYesに変えます。 恐らくこれで、アップロード後には何も起きず、写真を変更するボタンをきっかけに画像が変わるはずです。 ぜひお試しください～。 ---
**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\ **Post date:** [2021 年 9 月 15 日午前 1:15 UTC](https://www.nocode-faq.com/t/topic/2169/5 "2021-09-15T01:15:40Z")
「画像はクリックできず、ボタンを押すことでウインドウが開き画像をアップロードさせる」ことを実現したいとすると標準機能のみではできません。 Workflowからファイルアップロードを呼び出して、そのデータをimageエレメントに表示させる必要があります。 下記のプラグインを使うことで、上記の条件はクリアできるので実現できますが有料ですので必須要件かによって検討いただければと思います。 > **[Advanced Multi Uploader Plugin for Bubble](https://zeroqode.com/plugin/advanced-multi-uploader-1550378962519x766759789228458000)** > > No-code app templates & plugins for Bubble, courses, backends, webview packages for native apps. Now you can build apps without code even faster ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2021 年 9 月 15 日午前 2:07 UTC](https://www.nocode-faq.com/t/topic/2169/6 "2021-09-15T02:07:18Z")
あー、なるほど。写真を変更するボタンがPictureUploaderということですね。 先程僕が書いた事よりももっとシンプルに、標準機能で可能だと思います。 使うエレメントは、ImageとPictureUploaderひとつずつです。 ![2021-09-15_11h58_42](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/a77fffa9d2c35fa01b1329ce38582fd606821bc4.png) 左側のImageエレメントの、Static Imageに初期プロフィール画像を配置します。 そしてカスタムステートをImage型で宣言します。 Conditionalタブへ行き、When the custom state is not empty → Image Source → Dynamic Image → The Custom stateとします。 右側にPictureUploaderを配置し、Placeholderを「写真を変更する」とします。 そしてこれに、ワークフローを設定します。 「When this PictureUploader’s value is changed」 →Step1で、This PictureUploader’s valueを、先ほど設定したカスタムステートに代入します。 →Step2で、Reset relevant inputsにします。 これで、写真を変更するボタンを押したときにファイルを選ぶ画面が表示され、選択すると左型の画像が変わるようになりました。 ---
**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\ **Post date:** [2021 年 9 月 15 日午後 1:35 UTC](https://www.nocode-faq.com/t/topic/2169/7 "2021-09-15T13:35:58Z")
@yukikun @Aki_Sydney お二方ありがとうございます！！ 大変助かります 😌参考にさせて頂きます！！ @Aki_Sydney 左側のImageエレメントの、Static Imageに初期プロフィール画像を配置します。 そしてカスタムステートをImage型で宣言します。 Conditionalタブへ行き、When the custom state is not empty → Image Source → Dynamic Image → The Custom stateとします。 右側にPictureUploaderを配置し、Placeholderを「写真を変更する」とします。 そしてこれに、ワークフローを設定します。 「When this PictureUploader’s value is changed」 →この部分がうまくできず・・ When this PictureUploader’s value is 「changed」が出てこないのですが、原因が何かありますでしょうか。。 ![スクリーンショット 2021-09-15 22.27.45](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/cd2cdf0d12d049c39ee9fc3d63894e5d4eea3960.png) ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2021 年 9 月 15 日午後 1:43 UTC](https://www.nocode-faq.com/t/topic/2169/8 "2021-09-15T13:43:01Z")
この部分は、コンディショナルではなくワークフローです。 PictureUploaderのワークフローは分かりづらいですが、エレメントを右クリックすると、下の方に「Start/Edit workflow」というのが出てきます。ここから設定してみてください ✊ ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7316e948e008a6b3887c0bba7964eb4dec118f0d.png) ---
**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\ **Post date:** [2021 年 9 月 15 日午後 1:49 UTC](https://www.nocode-faq.com/t/topic/2169/9 "2021-09-15T13:49:33Z")
ありがとうございます！ workflow見つけました！ 😭 ただそこでもchangedが見つからず・・ ちょっと色々と見てみます！！ ![スクリーンショット 2021-09-15 22.48.13](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/851b982df211edf6e00315529960bbba8954af00.png) ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2021 年 9 月 15 日午後 2:01 UTC](https://www.nocode-faq.com/t/topic/2169/10 "2021-09-15T14:01:05Z")
PictureUploaderはワークフローを作成した際に、自動で「is changed」となっています。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/41be08b35681125e564d0545046670bdbeb849b2.png) 今回はOnly Whenに条件を付ける必要はなく、そのままStep1でカスタムステートへの代入、Step2でReset relevant inputsをすればOKです ✊ ---
**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\ **Post date:** [2021 年 9 月 15 日午後 2:41 UTC](https://www.nocode-faq.com/t/topic/2169/11 "2021-09-15T14:41:05Z")
ありがとうございます！！ 😭 😭 やってみます！！