Delete attachments on field clear

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -17,6 +17,7 @@
   export let disabled = false
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
+  export let deleteAttachments = null
   export let handleFileTooLarge = null
   export let handleTooManyFiles = null
   export let gallery = true
@@ -95,6 +96,7 @@
       value.filter((x, idx) => idx !== selectedImageIdx)
     )
     selectedImageIdx = 0
+    await deleteAttachments(value.map(item => item.key))
   }
 
   function navigateLeft() {

packages/client/src/components/app/forms/AttachmentField.svelte

@@ -47,6 +47,17 @@
     }
   }
 
+  const deleteAttachments = async fileList => {
+    try {
+      return await API.deleteAttachments({
+        keys: fileList,
+        tableId: formContext?.dataSource?.tableId,
+      })
+    } catch (error) {
+      return []
+    }
+  }
+
   const handleChange = e => {
     fieldApi.setValue(e.detail)
     if (onChange) {
@@ -72,6 +83,7 @@
       error={fieldState.error}
       on:change={handleChange}
       {processFiles}
+      {deleteAttachments}
       {handleFileTooLarge}
       {handleTooManyFiles}
       {maximum}

packages/frontend-core/src/api/attachments.js

@@ -61,5 +61,19 @@ export const buildAttachmentEndpoints = API => {
       })
       return { publicUrl }
     },
+
+    /**
+     * Deletes attachments from the bucket.
+     * @param keys the attachments to delete
+     * @param tableId the associated table ID
+     */
+    deleteAttachments: async ({ keys, tableId }) => {
+      return await API.post({
+        url: `/api/attachments/${tableId}/delete`,
+        body: {
+          keys,
+        },
+      })
+    },
   }
 }

packages/server/src/api/controllers/static/index.ts

@@ -12,7 +12,7 @@ const {
 } = require("../../../utilities/fileSystem")
 const env = require("../../../environment")
 const { clientLibraryPath } = require("../../../utilities")
-const { upload } = require("../../../utilities/fileSystem")
+const { upload, deleteFiles } = require("../../../utilities/fileSystem")
 const { attachmentsRelativeURL } = require("../../../utilities")
 const { DocumentType } = require("../../../db/utils")
 const { getAppDB, getAppId } = require("@budibase/backend-core/context")
@@ -97,6 +97,10 @@ export const uploadFile = async function (ctx: any) {
   ctx.body = await Promise.all(uploads)
 }
 
+export const deleteObjects = async function (ctx: any) {
+  ctx.body = await deleteFiles(ObjectStoreBuckets.APPS, ctx.request.body.keys)
+}
+
 export const serveApp = async function (ctx: any) {
   const db = getAppDB({ skip_setup: true })
   const appInfo = await db.get(DocumentType.APP_METADATA)

packages/server/src/api/routes/static.ts

@@ -45,6 +45,12 @@ router
     authorized(PermissionTypes.TABLE, PermissionLevels.WRITE),
     controller.uploadFile
   )
+  .post(
+    "/api/attachments/:tableId/delete",
+    paramResource("tableId"),
+    authorized(PermissionTypes.TABLE, PermissionLevels.WRITE),
+    controller.deleteObjects
+  )
   .get("/:appId/:path*", controller.serveApp)
   .get("/app/:appUrl/:path*", controller.serveApp)
   .post(

packages/server/src/utilities/fileSystem/index.js

@@ -15,6 +15,7 @@ const {
   streamUpload,
   deleteFolder,
   downloadTarball,
+  deleteFiles,
 } = require("./utilities")
 const { updateClientLibrary } = require("./clientLibrary")
 const env = require("../../environment")
@@ -327,5 +328,6 @@ exports.cleanup = appIds => {
 exports.upload = upload
 exports.retrieve = retrieve
 exports.retrieveToTmp = retrieveToTmp
+exports.deleteFiles = deleteFiles
 exports.TOP_LEVEL_PATH = TOP_LEVEL_PATH
 exports.NODE_MODULES_PATH = NODE_MODULES_PATH