@plutocms/supabase 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.17.0](https://github.com/plutocms/supabase/compare/v0.16.0...v0.17.0) (2026-10-30)
+
+
+### Features
+
+* media previews, sort and rename in the Supabase driver ([#139](https://github.com/plutocms/supabase/issues/139)) ([8cdf071](https://github.com/plutocms/supabase/commit/8cdf0715c5a11db8e99423751708d2ab0feea455))
+
 ## [0.16.0](https://github.com/plutocms/supabase/compare/v0.15.5...v0.16.0) (2026-10-30)
 
 

package/db/migrations/010_media_preview.sql

@@ -0,0 +1,7 @@
+-- The preview image of a file that is not an image (a 3D model), made in the
+-- browser by the kind of the file. Always in the `media` bucket, even for an
+-- older file in another bucket. See the media skill of @plutocms/pluto.
+
+alter table public.media add column if not exists preview_path text null;
+alter table public.media add column if not exists preview_width integer null;
+alter table public.media add column if not exists preview_height integer null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "trustedDependencies": [
     "@parcel/watcher",
     "@plutocms/pluto",
@@ -39,7 +39,7 @@
     "@nuxt/eslint": "^1.17.0",
     "@nuxt/ui": "^4.12.0",
     "@nuxtjs/supabase": "^2.1.0",
-    "@plutocms/pluto": ">=0.35.0 <1.0.0",
+    "@plutocms/pluto": ">=0.36.0 <1.0.0",
     "@plutocms/utils": ">=0.3.0 <1.0.0",
     "@supabase/supabase-js": "^2.117.3",
     "postgres": "^3.4.9",

package/server/utils/media-driver.ts

@@ -17,6 +17,23 @@ interface MediaRow {
   size: number | null
   width: number | null
   height: number | null
+  preview_path: string | null
+  preview_width: number | null
+  preview_height: number | null
+}
+
+/** `<yyyy>/<mm>/<name>`: the object key of a file, by the month of its record. */
+function monthKey(createdAt: string, fileName: string): string {
+  const date = new Date(createdAt)
+  return `${date.getUTCFullYear()}/${String(date.getUTCMonth() + 1).padStart(2, '0')}/${fileName}`
+}
+
+/** The order of a list. The id breaks a tie, so pages stay stable. */
+const ORDER: Record<PlutoMediaSort, { column: string; ascending: boolean }> = {
+  newest: { column: 'created_at', ascending: false },
+  oldest: { column: 'created_at', ascending: true },
+  name: { column: 'name', ascending: true },
+  size: { column: 'size', ascending: false },
 }
 
 function toRecord(client: SupabaseClient, row: MediaRow): PlutoMedia {
@@ -34,6 +51,16 @@ function toRecord(client: SupabaseClient, row: MediaRow): PlutoMedia {
     height: row.height,
     alt: row.alt ?? '',
     createdAt: row.created_at,
+    // A preview is always in the `media` bucket.
+    preview:
+      row.preview_path && row.preview_width && row.preview_height
+        ? {
+            url: client.storage.from(MEDIA_BUCKET).getPublicUrl(row.preview_path)
+              .data.publicUrl,
+            width: row.preview_width,
+            height: row.preview_height,
+          }
+        : null,
   }
 }
 
@@ -58,7 +85,8 @@ function numericIds(ids: string[]): number[] {
  * The media driver of the Supabase backend: the bytes in Supabase Storage,
  * the record in `public.media` (db/migrations/009_media.sql). Row Level
  * Security checks the capabilities again (`has_capability`). New files go to
- * `media/<yyyy>/<mm>/<name>-<suffix>.<ext>`. See the media skill of
+ * `media/<yyyy>/<mm>/<name>-<suffix>.<ext>`, and their previews next to them
+ * (`db/migrations/010_media_preview.sql`). See the media skill of
  * `@plutocms/pluto`.
  */
 export function createSupabaseMediaDriver(): PlutoMediaDriver {
@@ -90,11 +118,12 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
 
     async list(event, query) {
       const client = await supabaseRequestClient(event)
+      const order = ORDER[query.sort ?? 'newest']
       let request = client
         .from('media')
         .select('*', { count: 'exact' })
-        .order('created_at', { ascending: false })
-        .order('id', { ascending: false })
+        .order(order.column, { ascending: order.ascending, nullsFirst: false })
+        .order('id', { ascending: order.ascending })
         .range(query.offset, query.offset + query.limit - 1)
       if (query.search) {
         // Commas and brackets have a meaning in a PostgREST `or` filter.
@@ -135,8 +164,10 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
 
     async upload(event, input) {
       const client = await supabaseRequestClient(event)
-      const date = new Date(input.createdAt)
-      const path = `${date.getUTCFullYear()}/${String(date.getUTCMonth() + 1).padStart(2, '0')}/${input.fileName}`
+      const path = monthKey(input.createdAt, input.fileName)
+      const previewPath = input.preview
+        ? monthKey(input.createdAt, input.preview.fileName)
+        : null
       const storage = client.storage.from(MEDIA_BUCKET)
       const { error: uploadError } = await storage.upload(path, input.data, {
         contentType: input.mimeType,
@@ -146,6 +177,17 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
       if (uploadError) {
         throw failed(uploadError.message, 'pluto.media.errors.saveFailed')
       }
+      if (input.preview && previewPath) {
+        const { error: previewError } = await storage.upload(
+          previewPath,
+          input.preview.data,
+          { contentType: input.preview.mimeType, cacheControl: '31536000', upsert: true }
+        )
+        if (previewError) {
+          await storage.remove([path])
+          throw failed(previewError.message, 'pluto.media.errors.saveFailed')
+        }
+      }
       const { data, error } = await client
         .from('media')
         .insert({
@@ -158,12 +200,17 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
           width: input.width,
           height: input.height,
           created_at: input.createdAt,
+          preview_path: previewPath,
+          preview_width: input.preview?.width ?? null,
+          preview_height: input.preview?.height ?? null,
         })
         .select('*')
         .single()
       if (error) {
         // No record without its file, and no file without its record.
-        const { error: cleanup } = await storage.remove([path])
+        const { error: cleanup } = await storage.remove(
+          previewPath ? [path, previewPath] : [path]
+        )
         if (cleanup) {
           console.warn('[media] could not remove the file of a failed upload:', path, cleanup.message)
         }
@@ -176,6 +223,9 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
       const client = await supabaseRequestClient(event)
       const row = await readRow(client, id)
       const changes: Partial<MediaRow> = {}
+      if (patch.name !== undefined) {
+        changes.name = patch.name
+      }
       if (patch.alt !== undefined) {
         changes.alt = patch.alt || null
       }
@@ -197,6 +247,39 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
       return toRecord(client, data as MediaRow)
     },
 
+    async setPreview(event, id, preview) {
+      const client = await supabaseRequestClient(event)
+      const row = await readRow(client, id)
+      const storage = client.storage.from(MEDIA_BUCKET)
+      const path = monthKey(row.created_at, preview.fileName)
+      const { error: uploadError } = await storage.upload(path, preview.data, {
+        contentType: preview.mimeType,
+        cacheControl: '31536000',
+        upsert: true,
+      })
+      if (uploadError) {
+        throw failed(uploadError.message, 'pluto.media.errors.saveFailed')
+      }
+      const { data, error } = await client
+        .from('media')
+        .update({
+          preview_path: path,
+          preview_width: preview.width,
+          preview_height: preview.height,
+        })
+        .eq('id', row.id)
+        .select('*')
+        .single()
+      if (error) {
+        throw failed(error.message, 'pluto.media.errors.saveFailed')
+      }
+      // An older preview with another name (another type) goes.
+      if (row.preview_path && row.preview_path !== path) {
+        await storage.remove([row.preview_path])
+      }
+      return toRecord(client, data as MediaRow)
+    },
+
     async remove(event, id) {
       const client = await supabaseRequestClient(event)
       const row = await readRow(client, id)
@@ -209,6 +292,9 @@ export function createSupabaseMediaDriver(): PlutoMediaDriver {
           throw failed(error.message, 'pluto.media.errors.deleteFailed')
         }
       }
+      if (row.preview_path) {
+        await client.storage.from(MEDIA_BUCKET).remove([row.preview_path])
+      }
       const { error } = await client.from('media').delete().eq('id', row.id)
       if (error) {
         throw failed(error.message, 'pluto.media.errors.deleteFailed')