[bubble] File Uploader要素を使ってアプリ内からファイルアップロードをしてみた

bubbleにはFile Uploaderという要素を使ってアプリ内でファイルを取り扱うことが可能です。

DesignエディタでFile Uploader要素をドラッグ&ドロップで配置するだけで使えるようになります。

デフォルトでは、ユーザーがボタンをクリックすると、アップロードするファイルを選択するように促されます。 ファイルがアップロードされると、ボタンにはファイル名が表示されます。

アップロードされたファイルは？

bubbleのDataとして保存されています。

Data->File manager にアクセスすると、アップロードされたファイルが確認できます。

デフォルト動作では、アップロードされたファイルは誰でも参照することができるようになっています。

リンクを確認してみると、AWSのS3にファイルが保存されているようでした。

オプションとして、Boxというサービスと統合し、 Boxストレージに直接アップロードすることもできるようです。

File Uploader要素のプロパティ

Placeholderやinitial content、スタイルの変更など、他の要素にもある設定は行えます。

File Uploader要素独自ものだと、

Make this file private

アップロードされたファイルは誰でも参照することができますが、このオプションにチェックを入れるとそうではなくなります。

Attach this file toという設定と同時に使用することになります

Attach this file to

Make this file privateが選択されている場合にのみ表示されます。

この設定を使うことで、Thingに恒久的に添付されてファイルを表示するためのアクセス権を持つユーザーを決定することに利用されます。

Current Userを指定した場合は、Attached toにCurrent UserのIDが付与されて保存されるようになりました。

その他に、この組織に所属しているユーザーだけがみれるようにする　といったことも可能になります。

その場合は、Privacy設定画面で、View attached filesの許可を持つプライバシールールを作ることで制御できます。

Max file size (MB)

アップロードできるファイルの最大サイズです。

デフォルトは５０MBです。

ファイルサイズをオーバーすると、上記のように警告が表示されるようになりました。

その他

Boxと連携していると、

• Storage service
  • アップロードされたファイルは、AmazonのS3ファイルホスティングサービスを使用してBubbleに保存されます。オプションで、サードパーティのストレージサービスを選択することができます。現在は　Boxのみです。
• Folder path
  • Boxに宛先フォルダを入力してファイルをアップロードします

上記2つのオプションも設定できますが、今回は割愛します。

また別記事で試してみます。

最後に

File Uploader要素を使ったファイルのアップロードに関して調べてみました。

コードを書かずともここまでできるとは驚きでした。 要素を配置するだけでファイルのアップロードが使用できるようになるし、細かな設定もできてかなりの時短になると思います。

workflowを使うことでアップロードされたファイルのパスをDBに保存し、そのデータを検索したりすることでアップロードされたファイルをアプリ内で共有したりすることも可能ですので、 アプリの種類によっては使う機会はあるでしょう。