Learn how to sync attachments such as images and PDFs with PowerSync, FlutterFlow and Supabase Storage.
powersync_attachments_helper
package for Flutter. This guide uses Supabase Storage as the remote storage provider to store and serve photos. Other media types, like PDFs, are also supported.
At a high level, the [powersync_attachments_helper
] package syncs attachments by:
lists
are displayed and clickable.
photo_id
column to the lists
table to link a photo to a list.
photo_id
column to the lists
table:
photo_id
column. Additionally, we need to set up a local-only table to store the metadata of photos which is being managed by the helper package.
supabaseStorageBucket
.media
.powersync_attachments_helper: ^0.6.18
.setUpAttachments
Custom ActionsetUpAttachments
.
power_sync_b0w5r9
is the project ID of the PowerSync library. Update it if it changes.main.dart
initializePowerSync
from the Library to create the PowerSync database, and then call setUpAttachments
to create the attachments queue. These actions need to happen in this specific order since setUpAttachments
depends on having the database ready.
main.dart
. Under File Settings -> Final Actions, click the plus icon.initializePowerSync
.setUpAttachments
.
main.dart
. Please continue by using Local Run to test your app.resolveItemPicture
Custom Action (downloads)UploadedFile
, which is FLutterFlow’s representation of an in-memory file asset. This action calls attachmentQueue.getLocalUri()
and reads contents from the underlying file.
resolveItemPicture
.id
.setItemPicture
Custom Action (uploads)UploadedFile
to local storage and then to the upload queue.
setItemPicture
.
power_sync_b0w5r9
is the project ID of the PowerSync library. Update it if it changes.picture
.applyToDatabase
.photoId
.ListImage
.ListImage
again.
ListImage
component.
listId
.String
.image
.Uploaded File
.photoId
.String
.imageLoaded
.Boolean
.Image
widget.
imageLoaded
state variable.image
state variable.ListImage
component.
PowerSyncStateUpdater
component.
select * from lists where id = :id;
id
parameter we’re using the above query:id
.listId
.photoId
state variable.rows
.$.photo_id
.resolveItemPicture
custom action.
rows
.$.photo_id
.picture
.picture
variable.photoId
.photoId
state variable.photoId != null && photoId != 'null'
.Add/replace image
.setItemPicture
custom action.update lists set photo_id = :photo where id = :id;
photo
parameter and id
parameters we’re using the above query:photo
.photoId
.id
.listId
.ListImage
Custom Component to your pageTodos
page.PowerSyncStateUpdater
library component.
ListImage
component.ListImage
“Properties” panel on the right, under “Component Parameters”, click on the settings icons next to “listId [String]”.id
variable.photo_id
column set with a reference to the file.