lint

packages/builder/package.json

@@ -77,7 +77,6 @@
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
     "shortid": "^2.2.15",
-    "svelte-filepond": "^0.0.1",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",

packages/builder/src/builderStore/api.js

@@ -1,6 +1,6 @@
 const apiCall = method => async (
-  url, 
-  body, 
+  url,
+  body,
   headers = { "Content-Type": "application/json" }
 ) => {
   const response = await fetch(url, {

packages/builder/src/components/common/Dropzone.svelte

@@ -36,9 +36,12 @@
   }
 
   async function removeFile() {
-    const response = await api.delete(`/api/attachments/${selectedImage.fileName}`)
+    const response = await api.delete(
+      `/api/attachments/${selectedImage.fileName}`
+    )
     files.splice(selectedImageIdx, 1)
     files = files
+    selectedImageIdx = 0
   }
 
   function navigateLeft() {

packages/builder/src/components/common/Spinner.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Circle } from "svelte-loading-spinners"
-  
+
   export let size = "60"
 </script>
 

packages/builder/src/components/database/DataTable/AttachmentList.svelte

@@ -7,17 +7,17 @@
 </script>
 
 <div class="file-list">
-{#each files as file}
-  <div class="file">
-    {#if FILE_TYPES.IMAGE.includes(file.extension)}
-      <img {width} {height} src={file.clientUrl} />
-    {:else}
-      <i class="ri-file-line" />
-      <span class="extension">.{file.extension}</span>
-      <span>{file.name}</span>
-    {/if}
-  </div>
-{/each}
+  {#each files as file}
+    <div class="file">
+      {#if FILE_TYPES.IMAGE.includes(file.extension)}
+        <img {width} {height} src={file.clientUrl} />
+      {:else}
+        <i class="ri-file-line" />
+        <span class="extension">.{file.extension}</span>
+        <span>{file.name}</span>
+      {/if}
+    </div>
+  {/each}
 </div>
 
 <style>
@@ -27,7 +27,7 @@
     grid-gap: var(--spacing-m);
     grid-template-columns: repeat(10, 1fr);
   }
-  
+
   img {
     object-fit: contain;
   }

packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte

@@ -37,7 +37,7 @@
     backendUiStore.update(state => {
       state.selectedView = state.selectedView
       onClosed()
-      notifier.success("Record created successfully.")
+      notifier.success("Record saved successfully.")
       return state
     })
   }

packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte

@@ -4,6 +4,7 @@
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""
+  export let saveRecord
 
   let isSelect =
     meta.type === "string" &&
@@ -24,7 +25,6 @@
   }
 
   const handleInput = event => {
-    console.log(event.target.value)
     if (event.target.type === "checkbox") {
       value = event.target.checked
       return
@@ -35,12 +35,6 @@
       return
     }
 
-    // if (event.target.type === "file") {
-    //   value = Array.from(event.target.files).map(file => file.path)
-    //   console.log(value)
-    //   return
-    // }
-
     value = event.target.value
   }
 </script>

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

@@ -74,5 +74,5 @@ export const FIELDS = {
 export const FILE_TYPES = {
   IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"],
   CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"]
-}
+  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
+}

packages/builder/src/pages/[application]/deploy/index.svelte

@@ -53,7 +53,9 @@
       </Button>
     {/if}
   </div>
-  <img src="/_builder/assets/deploy-rocket.jpg" alt="Rocket flying through sky"/>
+  <img
+    src="/_builder/assets/deploy-rocket.jpg"
+    alt="Rocket flying through sky" />
 </section>
 
 <style>

packages/server/src/api/controllers/deploy/aws.js

@@ -110,7 +110,7 @@ exports.uploadAppAssets = async function({
         filePath,
         s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
         s3,
-        metadata: { accountId }
+        metadata: { accountId },
       })
       uploads.push(appAssetUpload)
     })
@@ -123,20 +123,20 @@ exports.uploadAppAssets = async function({
     for (let file of fileUploads.uploads) {
       if (file.uploaded) continue
 
-        const attachmentUpload = prepareUploadForS3({
-          filePath: file.path,
-          s3Key: `assets/${appId}/attachments/${file.name}`,
-          s3,
-          metadata: { accountId }
-        })
+      const attachmentUpload = prepareUploadForS3({
+        filePath: file.path,
+        s3Key: `assets/${appId}/attachments/${file.name}`,
+        s3,
+        metadata: { accountId },
+      })
 
-        uploads.push(attachmentUpload)
+      uploads.push(attachmentUpload)
 
-        // mark file as uploaded
-        file.uploaded = true
+      // mark file as uploaded
+      file.uploaded = true
     }
 
-    db.put(fileUploads);
+    db.put(fileUploads)
   }
 
   try {

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

@@ -1,20 +1,21 @@
 const send = require("koa-send")
 const { resolve, join } = require("path")
-const {
-  budibaseAppsDir,
-  budibaseTempDir,
-} = require("../../../utilities/budibaseDir")
-const CouchDB = require("../../../db")
-const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
-const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
 const fetch = require("node-fetch")
-const fileProcessor = require("./fileProcessor")
 const fs = require("fs")
 const uuid = require("uuid")
 
+const {
+  budibaseAppsDir,
+  budibaseTempDir,
+} = require("../../utilities/budibaseDir")
+const CouchDB = require("../../db")
+const setBuilderToken = require("../../utilities/builder/setBuilderToken")
+const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
+const fileProcessor = require("../../utilities/fileProcessor")
+
 exports.serveBuilder = async function(ctx) {
-  let builderPath = resolve(__dirname, "../../../../builder")
+  let builderPath = resolve(__dirname, "../../../builder")
   if (ctx.file === "index.html") {
     setBuilderToken(ctx)
   }
@@ -23,13 +24,14 @@ exports.serveBuilder = async function(ctx) {
 
 exports.deleteLocalFileUpload = async function(ctx) {
   try {
-    const db = new CouchDB(ctx.user.instanceId);
+    const db = new CouchDB(ctx.user.instanceId)
     let fileUploads = await db.get("_local/fileuploads")
-    fileUploads.uploads = fileUploads.uploads.filter(upload => upload.fileName !== ctx.fileName)
-    // TODO: possibly remove the file as well
-    await db.put(fileUploads);
+    fileUploads.uploads = fileUploads.uploads.filter(
+      upload => upload.fileName !== ctx.params.fileName
+    )
+    await db.put(fileUploads)
     ctx.body = {
-      message: `${ctx.fileName} deleted.`
+      message: `${ctx.fileName} deleted.`,
     }
   } catch (err) {
     ctx.throw(500, err)
@@ -39,10 +41,15 @@ exports.deleteLocalFileUpload = async function(ctx) {
 exports.processLocalFileUpload = async function(ctx) {
   const { files } = ctx.request.body
 
-  const attachmentsPath = resolve(budibaseAppsDir(), ctx.user.appId, "attachments")
+  const attachmentsPath = resolve(
+    budibaseAppsDir(),
+    ctx.user.appId,
+    "attachments"
+  )
 
   // create attachments dir if it doesnt exist
-  !fs.existsSync(attachmentsPath) && fs.mkdirSync(attachmentsPath, { recursive: true })
+  !fs.existsSync(attachmentsPath) &&
+    fs.mkdirSync(attachmentsPath, { recursive: true })
 
   const filesToProcess = files.map(file => {
     const fileExtension = [...file.path.split(".")].pop()
@@ -55,35 +62,37 @@ exports.processLocalFileUpload = async function(ctx) {
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
       clientUrl: join("/attachments", fileName),
-      // productionUrl: `https://cdn.app.budi.live/assets/${appId}/attachments/${fileName}`
     }
   })
 
-  // TODO: read the file (into memory first, then we will stream it)
-  const fileProcessOperations = filesToProcess.map(file => fileProcessor.process(file))
-  
+  const fileProcessOperations = filesToProcess.map(file =>
+    fileProcessor.process(file)
+  )
+
   try {
     // TODO: get file sizes of images after resize
-    const responses = await Promise.all(fileProcessOperations);
+    const responses = await Promise.all(fileProcessOperations)
 
-    let fileUploads
+    let pendingFileUploads
     // local document used to track which files need to be uploaded
     // db.get throws an error if the document doesn't exist
     // need to use a promise to default
-    const db = new CouchDB(ctx.user.instanceId);
-    await db.get("_local/fileuploads")
-      .then(data => fileUploads = data)
-      .catch(() => fileUploads = {
-        _id: "_local/fileuploads",
-        uploads: []
+    const db = new CouchDB(ctx.user.instanceId)
+    await db
+      .get("_local/fileuploads")
+      .then(data => {
+        pendingFileUploads = data
+      })
+      .catch(() => {
+        pendingFileUploads = { _id: "_local/fileuploads", uploads: [] }
       })
 
-    fileUploads.uploads = [...filesToProcess, ...fileUploads.uploads]
+    fileUploads.uploads = [...filesToProcess, ...pendingFileUploads.uploads]
     await db.put(fileUploads)
 
-    ctx.body = filesToProcess 
+    ctx.body = filesToProcess
   } catch (err) {
-    ctx.throw(500, err);
+    ctx.throw(500, err)
   }
 }
 
@@ -133,13 +142,13 @@ exports.serveApp = async function(ctx) {
 }
 
 exports.serveAttachment = async function(ctx) {
-  const appId = ctx.user.appId;
+  const appId = ctx.user.appId
 
   const attachmentsPath = resolve(budibaseAppsDir(), appId, "attachments")
 
   // Serve from CloudFront
   if (process.env.CLOUD) {
-    const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/attachments/${ctx.file}`
+    const S3_URL = `https://cdn.app.budi.live/assets/${appId}/attachments/${ctx.file}`
 
     const response = await fetch(S3_URL)
     const body = await response.text()

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

@@ -23,8 +23,16 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
-  .post("/api/attachments/process", authorized(BUILDER), controller.processLocalFileUpload)
-  .delete("/api/attachments/:fileName*", authorized(BUILDER), controller.deleteLocalFileUpload)
+  .post(
+    "/api/attachments/process",
+    authorized(BUILDER),
+    controller.processLocalFileUpload
+  )
+  .delete(
+    "/api/attachments/:fileName",
+    authorized(BUILDER),
+    controller.deleteLocalFileUpload
+  )
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
   .get("/attachments/:file*", controller.serveAttachment)

packages/server/src/electron.js

@@ -38,7 +38,7 @@ async function startApp() {
     app.server = require("./app")
     win = new BrowserWindow({
       width: 1920,
-      height: 1080
+      height: 1080,
     })
     win.setTitle(APP_TITLE)
     win.loadURL(APP_URL)

packages/server/src/api/controllers/static/fileProcessor.js → packages/server/src/utilities/fileProcessor.js

@@ -1,24 +1,24 @@
-const fs = require("fs");
-const sharp = require("sharp");
-const fsPromises = fs.promises;
+const fs = require("fs")
+const sharp = require("sharp")
+const fsPromises = fs.promises
 
 const FORMATS = {
   IMAGES: ["png", "jpg", "jpeg", "gif", "svg", "tiff", "raw"],
 }
 
 function processImage({ path, outputPath }) {
-    return sharp(path)
+  return sharp(path)
     .resize(300)
     .toFile(outputPath)
 }
 
 function process(file) {
   if (FORMATS.IMAGES.includes(file.extension.toLowerCase())) {
-    return processImage(file);
+    return processImage(file)
   }
 
   // No processing required
-  return fsPromises.copyFile(file.path, file.outputPath) 
+  return fsPromises.copyFile(file.path, file.outputPath)
 }
 
-exports.process = process
+exports.process = process