技術記事

micomia株式会社の井上です。今回はUpload/Delete Dataについて解説していきます。初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Upload/Delete Dataとは

Upload Dataとは、新しいデータを保存、Delete Dataはすでに存在するデータを削除する操作を指します。

2. Upload Dataの使い方

Upload/Save MediaとUpload/Save Fileがあり、Upload/Save Mediaは画像や動画、Upload/Save FileはPDFなどのファイルをアップロードできるものになっています。今回はUpload/Save Mediaを使用していきます。

Upload TypeはFirebaseを選択します。目的によってはLocalでも大丈夫です。

次にMedia Sourceを選択します。Cameraはカメラが起動します。Galleryは端末に入っている写真を選択できます。Either Camera or Galleryはカメラを起動するか端末に入っている写真を選択できます。Uploaded Mediaは異なる画面やWidgetでアップロードしているデータを表示させるものです。

今回はEither Camera or Galleryを選択します。その下に表示されるAllow Photo/Allow Videoは、ONにすることでそれぞれアップロードできるようになります。アイコン画像など、ビデオはアップロードできない状態にしたい場合はAllow VideoをOFFにしておくことをお勧めします。

また、Media SourceをGalleryにするとAllow Multiple ImagesをONにできます。これをONにすることで複数枚の写真を選ぶことができます。

Show Snack barをONにすると、アップロード中とアップロード完了時にSnack Barが表示されます。ただしこのSnack Barはカスタマイズできないので注意してください。

次にResizeです。画像サイズと画質を設定することができます。これを設定することでサイズが大きすぎる画像などがアップロードされた際のUI崩れなどが起こりにくくなります。

これら一通りの設定をした画像を表示させるには、ImageのPathから先ほどのUploaded Fileを選択することで可能です。

3. Delete Dataの使い方

今回は、先ほどアップロードした画像を削除できるようにしたいので例として削除ボタンを設けます。

先ほどと同じようにActionとしてDelete Dataを実装します。

Valueには先ほどアップロードした画像を設定します。

Delete DataはUpload DataでFirebaseにアップロードされた画像を直接削除することになりますが、Firebaseにデータは残しておきたいのであれば、Clear Uploaded Dataを実装することでアプリ上では画像は削除されますがFirebaseにデータは残るようになります。

4. さいごに

今回はUpload/Delete Dataについて解説していきました。画像のアップロードはプロフィール作成や投稿作成でも必須の機能になっているのでぜひ本記事を参考にして実装してみてください。

本記事の内容を動画で観たい方は以下をご覧ください。

動画でもっと知りたい方はこちら