top of page

《Bubble》ファイルアップローダーの形式を制御実装方法

概要

今回はBubbleでファイルをアップロードするときに拡張子を制限する方法について解説していきます。


拡張子制限とは、本来ファイルの送信者と受信者をコンピューターウイルスから保護するための機能ですが、今回解説するやり方では一度ファイルをアップロードしてから指定した形式以外のファイルを削除する流れになるので、セキュリティ面に対しては大きな効果を持ちません。

この場合、指定した形式以外のファイルを削除することによって、サーバーの容量上限に対して無駄な消費を抑える意味合いが大きいです。

ファイルアップローダーの形式を制御実装方法

ファイルアップローダーの形式を制御する実装(デザイン)


 ①File UploaderとAlertをグループの中に入れる。

 

②FileUploaderのset statesを設定する。

 

③アップロードしたファイルの拡張子が指定したものでなかった場合、アラートで「ファイルの形式が制限されています。アップロードできるファイルのタイプは:.png,.jpgです。」と表示するように設定する。



ファイルアップローダーの形式を制御する実装(ワークフロー)


 ①ファイルがアップロードされた時のワークフローを設定する。



 

📌[^.]*$はファイル名の末尾にある拡張子を抽出するための正規表現

▪ 「^ 」 = 文字列の先頭

▪ 「. 」 = 任意の1文字

▪ 「*」 = 直前の文字が0回以上繰り返し出現

▪ 「$ 」 = 文字列の末尾

 

 ②ストレージを削減するためにファイルを削除する。

 

③指定した拡張子以外のファイルがアップロードされたことをユーザーに伝えるためのアラートを表示する。



 まとめ

 以上の実装で、指定した拡張子以外のファイルをアップロードした場合はアラートが表示され、指定した拡張子のファイルをアップロードした場合はアラートが表示されないようになります。


アップロードを制限できるわけではなく、あくまでアップロードされてから指定した拡張子以外のファイルを削除するという実装になりますが、サーバーの容量の無駄な消費を抑えたいという場合は使ってみてください。

関連記事

SPA
StripeConnectについて
@未完成@初期設定
@未完成@パフォーマンス
SPA
SPAガイド
@未完成@パフォーマンス
保守性
保守性高く開発するガイド
bottom of page