こんにちは!
Bubble で簡単に複数ファイルを zip 化してダウンロードしたいと思ったことはありませんか?
今回は、無料の Zip and download files プラグインを利用して、複数ファイルを圧縮してダウンロードする方法をご紹介します。
とても簡単に利用できるので、おすすめです。
Zip and download files プラグインとは
Zip and download files プラグインは、単一/複数ファイルを圧縮してダウンロードするプラグインです。
AWS S3(Bubble アプリのファイル格納場所)に保存されているファイルも、AWS 上に保存されていないファイルも、両方ダウンロードすることができます。
Zip and download files プラグインの利用方法
ここからはプラグインの利用方法について紹介してきます。
プラグインのインストール
Plugins タブで「Zip and download files」を検索し、インストールします。
事前準備
まずは User Type にダウンロード用項目の「file」と「image」の2つのフィールドを追加します。
今回は、「image」は単一ファイルのダウンロードに使用し、「file」は複数ファイルのダウンロードに使用しています。
フィールド追加後、App Data ダブに移動し、User Type のデータを作成していきます。
1つのファイルをダウンロード
まずは、単一ファイルをダウンロードしたい場合について紹介します。
Button を押したタイミングでダウンロードしたいので、Button を追加します。
また、ダウンロードパス確認用の Text も配置します。(Text は配置しなくても構いません)
Text には今回ダウンロードしたいデータを表示しておきます。
先程追加した Button のワークフローで、「Click here to add an action」を押し「Plugins」の「Download files」を選択します。
「To download a single file, use field 3)」の欄に、今回ダウンロードするファイルを指定します。
プレビューして配置した Button を押すと、指定したファイルがダウンロードされます。
複数のファイルをダウンロード
次に、複数ファイルをダウンロードする場合について紹介します。
単一ファイルのダウンロードと同様に、Button を配置します。
また、ダウンロードパス確認用の Text も配置します。(Text は配置しなくても構いません)
Text には今回ダウンロードしたいデータを表示します。
先程追加した Button のワークフローで、「Click here to add an action」を押し「Plugins」の「Download files」を選択します。
「For multiple files use fields 1) and 2)」欄の「1) File Name」に、今回ダウンロードする zip ファイル名を指定します。
「2) List of files to zip」に圧縮するファイルリストを指定します。
プレビューして配置した Button を押すと、指定したファイルが zip で圧縮されてダウンロードされます。
まとめ
Bubble 上に保存していないファイル(File Uploder で選択した状態の画像やファイルなど)も 同じように zip 化してダウンロードできるので便利ですよね。
ファイルサイズが大きくなるとダウンロードに時間がかかるので、プログレスバーなどを表示しても良いかもしれません。
Bubble で簡単にファイルを圧縮してダウンロードしたい方、一度使利用してみてはいかがでしょうか。