Dropzone styling

6 years ago · b1dbc7cc62
5 changed files with 214 additions and 86 deletions
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@ -1,36 +1,13 @@
 <script>
-  import { Heading, Body } from "@budibase/bbui"
+  import { Heading, Body, Button } from "@budibase/bbui"
  import api from "builderStore/api"
  import { fade } from "svelte/transition"

  export let files = []

-  let selectedImage = files[0]
+  let selectedImageIdx = 0

-  function fetchPresignedUrl() {
-    console.log("Fetching the presigned URL")
-  }
-
-  // async function uploadFiles() {
-  //   let formData = new FormData()
-  //   const uploadMeta = await fetchPresignedUrl()
-  //   const { file, url } = await uploadMeta.json()
-
-  //   formData.append("acl", "public-read")
-  //   formData.append("Content-Type", file.type)
-  //   formData.append("file", file)
-
-  //   try {
-  //     await api.post(url, {
-  //       body: formData,
-  //       headers: {
-  //         "Content-Type": "multipart/form-data",
-  //       },
-  //     })
-  //   } catch (err) {
-  //     console.error(`Error uploading file: ${file}`, err)
-  //   }
-  // }
+  $: selectedImage = files[selectedImageIdx]

  async function processFiles(evt) {
    const filesToProcess = Array.from(evt.target.files).map(
@ -41,34 +18,54 @@
      files: filesToProcess,
    })
    const processedFiles = await response.json()
-    files = [...files, ...processedFiles]
+    files = [...processedFiles, ...files]
+  }
+
+  function navigateLeft() {
+    if (selectedImageIdx === 0) return
+    selectedImageIdx -= 1
+  }
+
+  function navigateRight() {
+    selectedImageIdx += 1
  }
 </script>

-<!-- TODO: Show the images that are already there, provide an upload button below them -->
 <div class="dropzone">
  <ul>
-    <Heading small black>Processed Files</Heading>
    {#if selectedImage}
-      <li in:fade>
+      <!-- if block necessary for svelte transitions to work -->
+      <li transition:fade>
+        <header>
+          <span>
+            <i class="ri-image-2-line file-icon" />
+            {selectedImage.extension}
+          </span>
+          <p>{selectedImage.size / 1000}KB</p>
+        </header>
+        {#if selectedImageIdx !== 0}
+          <div class="nav left" on:click={navigateLeft}>
+            <i class="ri-arrow-left-line" />
+          </div>
+        {/if}
        <img src={selectedImage.clientUrl} />
-        <div class="file-info">
-          <i class="ri-file-line file-icon" />
-          <Body medium white>{selectedImage.name}</Body>
-          <Body medium white>{selectedImage.size / 1000}KB</Body>
-        </div>
+        {#if selectedImageIdx !== files.length - 1}
+          <div class="nav right" on:click={navigateRight}>
+            <i class="ri-arrow-right-line" />
+          </div>
+        {/if}
      </li>
    {/if}
  </ul>
-  <Heading small black>Upload</Heading>
  <i class="ri-folder-upload-line" />
-  <input type="file" multiple on:change={processFiles} />
+  <input id="file-upload" type="file" multiple on:change={processFiles} />
+  <label for="file-upload">Upload</label>
 </div>

 <style>
  .dropzone {
    padding: var(--spacing-l);
-    border: 2px dashed var(--blue);
+    border: 2px dashed var(--grey-7);
    text-align: center;
    display: flex;
    align-items: center;
@ -76,35 +73,84 @@
    border-radius: 10px;
  }

+  input[type="file"] {
+    display: none;
+  }
+
+  label {
+    font-family: var(--font-sans);
+    cursor: pointer;
+    font-weight: 600;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+    color: var(--white);
+    padding: var(--spacing-s) var(--spacing-l);
+    transition: all 0.2s ease 0s;
+    display: inline-flex;
+    text-rendering: optimizeLegibility;
+    min-width: auto;
+    outline: none;
+    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+    -webkit-box-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    width: 100%;
+    border: solid 1.5px var(--ink);
+    background-color: var(--ink);
+  }
+
+  div.nav {
+    position: absolute;
+    background: black;
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    bottom: 5px;
+    border-radius: 10px;
+    transition: 0.2s transform;
+  }
+
+  .nav:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+  }
+
+  .left {
+    left: 5px;
+  }
+
+  .right {
+    right: 5px;
+  }
+
  li {
    position: relative;
+    height: 300px;
+    background: var(--grey-7);
+    display: flex;
+    justify-content: center;
+    border-radius: 10px;
  }

  img {
    border-radius: 10px;
    width: 100%;
-    height: 100%;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+    object-fit: contain;
  }

  i {
-    font-size: 4em;
+    font-size: 3em;
  }

  .file-icon {
-    font-size: 2.5em;
    color: var(--white);
-  }
-
-  .file-info {
-    position: absolute;
-    top: 7px;
-    left: 7px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 200px;
-    text-overflow: ellipsis;
+    font-size: 2em;
+    margin-right: 5px;
  }

  ul {
@ -112,5 +158,35 @@
    display: grid;
    grid-gap: 5px;
    list-style-type: none;
+    width: 100%;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    background: linear-gradient(
+      180deg,
+      rgba(12, 12, 12, 1),
+      rgba(60, 60, 60, 0)
+    );
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    height: 60px;
+  }
+
+  header span {
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    margin-left: var(--spacing-m);
+  }
+
+  header p {
+    color: var(--grey-5);
+    margin-right: var(--spacing-m);
  }
 </style>
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@ -112,6 +112,11 @@
  section {
    margin-bottom: 20px;
  }
+
+  img {
+    object-fit: contain;
+  }
+
  .title {
    font-size: 24px;
    font-weight: 600;
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@ -2,6 +2,7 @@ const fs = require("fs")
 const AWS = require("aws-sdk")
 const fetch = require("node-fetch")
 const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
+const PouchDB = require("../../../db")

 async function invalidateCDN(cfDistribution, appId) {
  const cf = new AWS.CloudFront({})
@ -62,7 +63,6 @@ function walkDir(dirPath, callback) {
    }
  }
 }
-
 /**
 * Walk a directory and return an array of promises for uploading all the files
 * inside that directory to s3.
@ -79,19 +79,8 @@ function uploadFiles({
 }) {
  const uploads = []

-  walkDir(path, function prepareUploadsForS3(filePath) {
-    const fileExtension = [...filePath.split(".")].pop()
-    const fileBytes = fs.readFileSync(filePath)
-
-    const upload = s3
-      .upload({
-        Key: filePath.replace(path, s3Key),
-        Body: fileBytes,
-        ContentType: CONTENT_TYPE_MAP[fileExtension],
-        Metadata: metadata,
-      })
-      .promise()
-
+  walkDir(path, function(filePath) {
+    const upload = prepareUploadForS3(filePath, metadata)
    uploads.push(upload)
  })

@ -99,8 +88,24 @@ function uploadFiles({
 }


+function prepareUploadForS3({ filePath, s3Key, metadata }) {
+  const fileExtension = [...filePath.split(".")].pop()
+  const fileBytes = fs.readFileSync(filePath)
+  return s3
+    .upload({
+      Key: s3Key,
+      Body: fileBytes,
+      ContentType: CONTENT_TYPE_MAP[fileExtension],
+      Metadata: metadata,
+    })
+    .promise()
+}
+
+
+
 exports.uploadAppAssets = async function({
  appId,
+  instanceId,
  credentials,
  bucket,
  cfDistribution,
@ -126,25 +131,40 @@ exports.uploadAppAssets = async function({

  for (let page of appPages) {
    // Upload HTML, CSS and JS for each page of the web app
-    const pageAssetUploads = uploadFiles({
-      path: `${appAssetsPath}/${page}`,
-      s3Key: `assets/${appId}`,
-      s3,
-      metadata: { accountId }
-    });
+    walkDir(path, function(filePath) {
+      const appAssetUpload = prepareUploadForS3({
+        filePath,
+        s3Key: filePath.replace(path, `assets/${appId}`),
+        s3,
+        metadata: { accountId }
+      })
+      uploads.push(appAssetUpload)
+    })

    uploads = [...uploads, ...pageAssetUploads];
  }

  // Upload file attachments
-  const attachmentUploads = uploadFiles({
-    path: `${budibaseAppsDir()}/${appId}/attachments`,
-    s3Key: `assets/${appId}/attachments`,
-    s3,
-    metadata: { accountId }
-  })
+  const db = new PouchDB(instanceId)
+  const fileUploads = await db.get("_local/fileuploads")
+  if (fileUploads) {
+    fileUploads.awaitingUpload.forEach((file, idx) => {
+
+      const attachmentUpload = prepareUploadForS3({
+        filePath: file.path,
+        s3Key: `assets/${appId}/${file.name}`,
+        s3,
+        metadata: { accountId }
+      })
+
+      uploads.push(attachmentUpload)

-  uploads = [...uploads, ...attachmentUploads]
+      // move the pending upload to the uploaded array
+      fileUploads.awaitingUpload.splice(idx, 1);
+      fileUploads.uploaded.push(awaitingUpload);
+    })
+    db.put(fileUploads);
+  }

  try {
    await Promise.all(uploads)
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@ -42,6 +42,7 @@ exports.deployApp = async function(ctx) {
    await uploadAppAssets({
      clientId,
      appId: ctx.user.appId,
+      instanceId: ctx.user.instanceId,
      ...credentials,
    })

--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@ -4,12 +4,14 @@ 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 imageProcessing = require("./imageProcessing")
 const fs = require("fs")
+const uuid = require("uuid")

 exports.serveBuilder = async function(ctx) {
  let builderPath = resolve(__dirname, "../../../../builder")
@ -27,19 +29,43 @@ exports.processLocalFileUpload = async function(ctx) {
  // create attachments dir if it doesnt exist
  !fs.existsSync(attachmentsPath) && fs.mkdirSync(attachmentsPath, { recursive: true })

-
-  const filesToProcess = files.map(file => ({
-    ...file,
-    outputPath: join(attachmentsPath, file.name),
-    clientUrl: join("/attachments", file.name),
-    uploaded: false
-  }))
+  const filesToProcess = files.map(file => {
+    const fileExtension = [...file.path.split(".")].pop()
+    // filenames converted to UUIDs so they are unique
+    const fileName = `${uuid.v4()}.${fileExtension}`
+
+    return {
+      ...file,
+      name: fileName,
+      extension: fileExtension,
+      outputPath: join(attachmentsPath, fileName),
+      clientUrl: join("/attachments", fileName)
+    }
+  })

  // TODO: read the file (into memory first, then we will stream it)
  const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file))
  
  try {
+    // TODO: get file sizes of images after resize
    const responses = await Promise.all(imageProcessOperations);
+
+    let fileUploads
+    // 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",
+        awaitingUpload: [],
+        uploaded: []
+      })
+
+    fileUploads.awaitingUpload = [...filesToProcess, ...fileUploads.awaitingUpload]
+    await db.put(fileUploads)
+
    ctx.body = filesToProcess 
  } catch (err) {
    ctx.throw(500, err);