File upload component for azure blob

packages/builder/src/components/backend/DatasourceNavigator/icons/Azure.svelte

@@ -0,0 +1,64 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 96 96">
+  <defs>
+    <linearGradient
+      id="e399c19f-b68f-429d-b176-18c2117ff73c"
+      x1="-1032.172"
+      x2="-1059.213"
+      y1="145.312"
+      y2="65.426"
+      gradientTransform="matrix(1 0 0 -1 1075 158)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset="0" stop-color="#114a8b" />
+      <stop offset="1" stop-color="#0669bc" />
+    </linearGradient>
+    <linearGradient
+      id="ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15"
+      x1="-1023.725"
+      x2="-1029.98"
+      y1="108.083"
+      y2="105.968"
+      gradientTransform="matrix(1 0 0 -1 1075 158)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset="0" stop-opacity=".3" />
+      <stop offset=".071" stop-opacity=".2" />
+      <stop offset=".321" stop-opacity=".1" />
+      <stop offset=".623" stop-opacity=".05" />
+      <stop offset="1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="a7fee970-a784-4bb1-af8d-63d18e5f7db9"
+      x1="-1027.165"
+      x2="-997.482"
+      y1="147.642"
+      y2="68.561"
+      gradientTransform="matrix(1 0 0 -1 1075 158)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset="0" stop-color="#3ccbf4" />
+      <stop offset="1" stop-color="#2892df" />
+    </linearGradient>
+  </defs>
+  <path
+    fill="url(#e399c19f-b68f-429d-b176-18c2117ff73c)"
+    d="M33.338 6.544h26.038l-27.03 80.087a4.152 4.152 0 0 1-3.933 2.824H8.149a4.145 4.145 0 0 1-3.928-5.47L29.404 9.368a4.152 4.152 0 0 1 3.934-2.825z"
+  />
+  <path
+    fill="#0078d4"
+    d="M71.175 60.261h-41.29a1.911 1.911 0 0 0-1.305 3.309l26.532 24.764a4.171 4.171 0 0 0 2.846 1.121h23.38z"
+  />
+  <path
+    fill="url(#ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15)"
+    d="M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"
+  />
+  <path
+    fill="url(#a7fee970-a784-4bb1-af8d-63d18e5f7db9)"
+    d="M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"
+  />
+</svg>

packages/builder/src/components/backend/DatasourceNavigator/icons/index.js

@@ -15,6 +15,7 @@ import GoogleSheets from "./GoogleSheets.svelte"
 import Firebase from "./Firebase.svelte"
 import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
+import Azure from "./Azure.svelte"
 import Custom from "./Custom.svelte"
 import { integrations } from "stores/builder"
 import { get } from "svelte/store"
@@ -28,6 +29,7 @@ const ICONS = {
   COUCHDB: CouchDB,
   SQL_SERVER: SqlServer,
   S3: S3,
+  AZURE: Azure,
   AIRTABLE: Airtable,
   MYSQL: MySQL,
   ARANGODB: ArangoDB,

packages/builder/src/components/design/settings/componentSettings.js

@@ -2,7 +2,7 @@ import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
 import { licensing } from "stores/portal"
 import { get } from "svelte/store"
 import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
-import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
+import ObjectStoreSelect from "./controls/ObjectStoreSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
 import TableSelect from "./controls/TableSelect.svelte"
@@ -37,7 +37,7 @@ const componentMap = {
   select: Select,
   radio: RadioGroup,
   dataSource: DataSourceSelect,
-  "dataSource/s3": S3DataSourceSelect,
+  "dataSource/objectStore": ObjectStoreSelect,
   dataProvider: DataProviderSelect,
   boolean: Checkbox,
   number: Stepper,
@@ -70,6 +70,7 @@ const componentMap = {
   "field/longform": FormFieldSelect,
   "field/datetime": FormFieldSelect,
   "field/attachment": FormFieldSelect,
+  "field/upload": Input,
   "field/attachment_single": FormFieldSelect,
   "field/s3": Input,
   "field/link": FormFieldSelect,

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte → packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FileUpload.svelte

@@ -6,12 +6,12 @@
   export let parameters
 
   $: components = findAllMatchingComponents($selectedScreen?.props, component =>
-    component._component.endsWith("s3upload")
+    component._component.endsWith("fileupload")
   )
 </script>
 
 <div class="root">
-  <Label small>S3 Upload Component</Label>
+  <Label small>File Upload Component</Label>
   <Select
     bind:value={parameters.componentId}
     options={components}

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -12,7 +12,7 @@ export { default as ChangeFormStep } from "./ChangeFormStep.svelte"
 export { default as UpdateState } from "./UpdateState.svelte"
 export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
 export { default as DuplicateRow } from "./DuplicateRow.svelte"
-export { default as S3Upload } from "./S3Upload.svelte"
+export { default as FileUpload } from "./FileUpload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -113,9 +113,9 @@
       "dependsOnFeature": "state"
     },
     {
-      "name": "Upload File to S3",
+      "name": "Upload File",
       "type": "data",
-      "component": "S3Upload",
+      "component": "FileUpload",
       "context": [
         {
           "label": "File URL",

packages/builder/src/components/design/settings/controls/S3DataSourceSelect.svelte → packages/builder/src/components/design/settings/controls/ObjectStoreSelect.svelte

@@ -5,7 +5,7 @@
   export let value = null
 
   $: dataSources = $datasources.list
-    .filter(ds => ds.source === "S3" && !ds.config?.endpoint)
+    .filter(ds => ["S3", "AZURE"].includes(ds.source) && !ds.config?.endpoint)
     .map(ds => ({
       label: ds.name,
       value: ds._id,

packages/builder/src/constants/backend/index.js

@@ -213,6 +213,7 @@ export const IntegrationTypes = {
   MONGODB: "MONGODB",
   COUCHDB: "COUCHDB",
   S3: "S3",
+  AZURE: "AZURE",
   MYSQL: "MYSQL",
   REST: "REST",
   DYNAMODB: "DYNAMODB",
@@ -233,6 +234,7 @@ export const IntegrationNames = {
   [IntegrationTypes.MONGODB]: "MongoDB",
   [IntegrationTypes.COUCHDB]: "CouchDB",
   [IntegrationTypes.S3]: "S3",
+  [IntegrationTypes.AZURE]: "AZURE",
   [IntegrationTypes.MYSQL]: "MySQL",
   [IntegrationTypes.REST]: "REST",
   [IntegrationTypes.DYNAMODB]: "DynamoDB",

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -69,7 +69,7 @@
       "relationshipfield",
       "datetimefield",
       "multifieldselect",
-      "s3upload",
+      "fileupload",
       "codescanner",
       "bbreferencefield"
     ]

packages/client/manifest.json

@@ -4617,8 +4617,8 @@
       }
     ]
   },
-  "s3upload": {
-    "name": "S3 File Upload",
+  "fileupload": {
+    "name": "File Upload",
     "icon": "UploadToCloud",
     "styles": ["size"],
     "editable": true,
@@ -4628,7 +4628,7 @@
     },
     "settings": [
       {
-        "type": "field/s3",
+        "type": "field/upload",
         "label": "Field",
         "key": "field",
         "required": true
@@ -4639,14 +4639,14 @@
         "key": "label"
       },
       {
-        "type": "dataSource/s3",
-        "label": "S3 datasource",
+        "type": "dataSource/objectStore",
+        "label": "Object store",
         "key": "datasourceId",
         "info": "This component can't be used with S3 datasources that use custom endpoints"
       },
       {
         "type": "text",
-        "label": "Bucket",
+        "label": "Bucket / Container",
         "key": "bucket"
       },
       {

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

@@ -126,7 +126,7 @@
   {field}
   {disabled}
   {validation}
-  type="s3upload"
+  type="fileupload"
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}

packages/client/src/components/app/forms/index.js

@@ -14,6 +14,6 @@ export { default as relationshipfield } from "./RelationshipField.svelte"
 export { default as passwordfield } from "./PasswordField.svelte"
 export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
-export { default as s3upload } from "./S3Upload.svelte"
+export { default as fileupload } from "./FileUpload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
 export { default as bbreferencefield } from "./BBReferenceField.svelte"

packages/client/src/utils/buttonActions.js

@@ -322,7 +322,7 @@ const updateStateHandler = action => {
   }
 }
 
-const s3UploadHandler = async action => {
+const uploadHandler = async action => {
   const { componentId } = action.parameters
   if (!componentId) {
     return
@@ -458,7 +458,7 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
   ["Update State"]: updateStateHandler,
-  ["Upload File to S3"]: s3UploadHandler,
+  ["Upload File"]: uploadHandler,
   ["Export Data"]: exportDataHandler,
   ["Continue if / Stop if"]: continueIfHandler,
   ["Show Notification"]: showNotificationHandler,

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

@@ -143,6 +143,8 @@ export const createAPIClient = config => {
     headers[Header.SESSION_ID] = APISessionID
     if (!external) {
       headers[Header.API_VER] = ApiVersion
+    } else {
+      headers["x-ms-blob-type"] = "BlockBlob"
     }
     if (json) {
       headers["Content-Type"] = "application/json"

packages/server/package.json

@@ -48,6 +48,7 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "10.0.3",
+    "@azure/storage-blob": "^12.17.0",
     "@budibase/backend-core": "0.0.0",
     "@budibase/client": "0.0.0",
     "@budibase/frontend-core": "0.0.0",

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

@@ -18,6 +18,12 @@ import {
   utils,
 } from "@budibase/backend-core"
 import AWS from "aws-sdk"
+import {
+  StorageSharedKeyCredential,
+  generateBlobSASQueryParameters,
+  BlobSASPermissions,
+  BlobServiceClient,
+} from "@azure/storage-blob"
 import fs from "fs"
 import sdk from "../../../sdk"
 import * as pro from "@budibase/pro"
@@ -320,6 +326,35 @@ export const getSignedUploadURL = async function (ctx: Ctx) {
     } catch (error: any) {
       ctx.throw(400, error)
     }
+  } else if (datasource?.source === "AZURE") {
+    const { bucket, key } = ctx.request.body || {}
+    if (!bucket || !key) {
+      ctx.throw(400, "container and key values are required")
+    }
+    try {
+      const containerClient = BlobServiceClient.fromConnectionString(
+        `DefaultEndpointsProtocol=https;AccountName=${datasource?.config?.accountName};AccountKey=${datasource?.config?.accountKey};EndpointSuffix=core.windows.net`
+      ).getContainerClient(bucket)
+
+      const blobSAS = generateBlobSASQueryParameters(
+        {
+          containerName: bucket,
+          blobName: key,
+          permissions: BlobSASPermissions.parse("racwd"),
+          startsOn: new Date(),
+          expiresOn: new Date(new Date().valueOf() + 86400),
+        },
+        new StorageSharedKeyCredential(
+          datasource?.config?.accountName,
+          datasource?.config?.accountKey
+        )
+      ).toString()
+
+      publicUrl = containerClient.getBlobClient(key).url
+      signedUrl = `${publicUrl}?${blobSAS}`
+    } catch (error: any) {
+      ctx.throw(400, error)
+    }
   }
 
   ctx.body = { signedUrl, publicUrl }