Add public URL of uploaded file to button action outputs when uploading files to S3

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json

@@ -73,7 +73,13 @@
     },
     {
       "name": "Upload File to S3",
-      "component": "S3Upload"
+      "component": "S3Upload",
+      "context": [
+        {
+          "label": "File URL",
+          "value": "publicUrl"
+        }
+      ]
     }
   ]
 }

packages/client/src/api/attachments.js

@@ -25,14 +25,18 @@ export const getSignedDatasourceURL = async (datasourceId, bucket, key) => {
   if (res.error) {
     throw "Could not generate signed upload URL"
   }
-  return res?.signedUrl
+  return res
 }
 
 /**
  * Uploads a file to an external datasource.
  */
 export const externalUpload = async (datasourceId, bucket, key, data) => {
-  const signedUrl = await getSignedDatasourceURL(datasourceId, bucket, key)
+  const { signedUrl, publicUrl } = await getSignedDatasourceURL(
+    datasourceId,
+    bucket,
+    key
+  )
   const res = await API.put({
     url: signedUrl,
     body: data,
@@ -42,4 +46,5 @@ export const externalUpload = async (datasourceId, bucket, key, data) => {
   if (res?.error) {
     throw "Could not upload file to signed URL"
   }
+  return { publicUrl }
 }

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

@@ -71,12 +71,13 @@
   const upload = async () => {
     loading = true
     try {
-      await API.externalUpload(datasourceId, bucket, key, data)
+      const res = await API.externalUpload(datasourceId, bucket, key, data)
       notificationStore.actions.success("File uploaded successfully")
+      loading = false
+      return res
     } catch (error) {
       notificationStore.actions.error(`Error uploading file: ${error}`)
     }
-    loading = false
   }
 
   onMount(() => {

packages/client/src/stores/uploads.js

@@ -30,7 +30,7 @@ export const createUploadStore = () => {
     }
 
     const component = get(store).find(c => c.componentId === componentId)
-    await component?.callback()
+    return await component?.callback()
   }
 
   return {

packages/client/src/utils/buttonActions.js

@@ -163,7 +163,10 @@ const s3UploadHandler = async action => {
   if (!componentId) {
     return
   }
-  await uploadStore.actions.processFileUpload(componentId)
+  const res = await uploadStore.actions.processFileUpload(componentId)
+  return {
+    publicUrl: res?.publicUrl,
+  }
 }
 
 const handlerMap = {

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

@@ -124,6 +124,7 @@ exports.getSignedUploadURL = async function (ctx) {
 
   // Determine type of datasource and generate signed URL
   let signedUrl
+  let publicUrl
   if (datasource.source === "S3") {
     const { bucket, key } = ctx.request.body || {}
     if (!bucket || !key) {
@@ -140,10 +141,11 @@ exports.getSignedUploadURL = async function (ctx) {
       })
       const params = { Bucket: bucket, Key: key }
       signedUrl = s3.getSignedUrl("putObject", params)
+      publicUrl = `https://${bucket}.s3.${AWS_REGION}.amazonaws.com/${key}`
     } catch (error) {
       ctx.throw(400, error)
     }
   }
 
-  ctx.body = { signedUrl }
+  ctx.body = { signedUrl, publicUrl }
 }

packages/server/src/api/routes/tests/static.spec.js

@@ -41,16 +41,18 @@ describe("/attachments", () => {
     })
 
     it("should be able to generate a signed upload URL", async () => {
+      const bucket = "foo"
+      const key = "bar"
       const res = await request
         .post(`/api/attachments/${datasource._id}/url`)
-        .send({
-          bucket: "foo",
-          key: "bar",
-        })
+        .send({ bucket, key })
         .set(config.defaultHeaders())
         .expect("Content-Type", /json/)
         .expect(200)
       expect(res.body.signedUrl).toEqual("my-url")
+      expect(res.body.publicUrl).toEqual(
+        `https://${bucket}.s3.eu-west-1.amazonaws.com/${key}`
+      )
     })
 
     it("should handle an invalid datasource ID", async () => {