MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dropzone styling

This commit is contained in:
Martin McKeaveney 2020-09-16 12:18:47 +01:00
parent 86ae8d038a
commit b1dbc7cc62
5 changed files with 213 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
packages/builder/src/components/common/Dropzone.svelte
View File

@ -1,36 +1,13 @@
<script> <script>
import { Heading, Body } from "@budibase/bbui" import { Heading, Body, Button } from "@budibase/bbui"
import api from "builderStore/api" import api from "builderStore/api"
import { fade } from "svelte/transition" import { fade } from "svelte/transition"
export let files = [] export let files = []
let selectedImage = files[0] let selectedImageIdx = 0
function fetchPresignedUrl() { $: selectedImage = files[selectedImageIdx]
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)
// }
// }
async function processFiles(evt) { async function processFiles(evt) {
const filesToProcess = Array.from(evt.target.files).map( const filesToProcess = Array.from(evt.target.files).map(
@ -41,34 +18,54 @@
files: filesToProcess, files: filesToProcess,
}) })
const processedFiles = await response.json() const processedFiles = await response.json()
files = [...files, ...processedFiles] files = [...processedFiles, ...files]
}
function navigateLeft() {
if (selectedImageIdx === 0) return
selectedImageIdx -= 1
}
function navigateRight() {
selectedImageIdx += 1
} }
</script> </script>
<!-- TODO: Show the images that are already there, provide an upload button below them -->
<div class="dropzone"> <div class="dropzone">
<ul> <ul>
<Heading small black>Processed Files</Heading>
{#if selectedImage} {#if selectedImage}
<li in:fade> <!-- if block necessary for svelte transitions to work -->
<img src={selectedImage.clientUrl} /> <li transition:fade>
<div class="file-info"> <header>
<i class="ri-file-line file-icon" /> <span>
<Body medium white>{selectedImage.name}</Body> <i class="ri-image-2-line file-icon" />
<Body medium white>{selectedImage.size / 1000}KB</Body> {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> </div>
{/if}
<img src={selectedImage.clientUrl} />
{#if selectedImageIdx !== files.length - 1}
<div class="nav right" on:click={navigateRight}>
<i class="ri-arrow-right-line" />
</div>
{/if}
</li> </li>
{/if} {/if}
</ul> </ul>
<Heading small black>Upload</Heading>
<i class="ri-folder-upload-line" /> <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> </div>
<style> <style>
.dropzone { .dropzone {
padding: var(--spacing-l); padding: var(--spacing-l);
border: 2px dashed var(--blue); border: 2px dashed var(--grey-7);
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
@ -76,35 +73,84 @@
border-radius: 10px; 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 { li {
position: relative; position: relative;
height: 300px;
background: var(--grey-7);
display: flex;
justify-content: center;
border-radius: 10px;
} }
img { img {
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
height: 100%;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
object-fit: contain;
} }
i { i {
font-size: 4em; font-size: 3em;
} }
.file-icon { .file-icon {
font-size: 2.5em;
color: var(--white); color: var(--white);
} font-size: 2em;
margin-right: 5px;
.file-info {
position: absolute;
top: 7px;
left: 7px;
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
text-overflow: ellipsis;
} }
ul { ul {
@ -112,5 +158,35 @@
display: grid; display: grid;
grid-gap: 5px; grid-gap: 5px;
list-style-type: none; 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> </style>

5
packages/builder/src/components/database/DataTable/ModelDataTable.svelte
View File

@ -112,6 +112,11 @@
section { section {
margin-bottom: 20px; margin-bottom: 20px;
} }
img {
object-fit: contain;
}
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;

64
packages/server/src/api/controllers/deploy/aws.js
View File

@ -2,6 +2,7 @@ const fs = require("fs")
const AWS = require("aws-sdk") const AWS = require("aws-sdk")
const fetch = require("node-fetch") const fetch = require("node-fetch")
const { budibaseAppsDir } = require("../../../utilities/budibaseDir") const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
const PouchDB = require("../../../db")
async function invalidateCDN(cfDistribution, appId) { async function invalidateCDN(cfDistribution, appId) {
const cf = new AWS.CloudFront({}) 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 * Walk a directory and return an array of promises for uploading all the files
* inside that directory to s3. * inside that directory to s3.
@ -79,19 +79,8 @@ function uploadFiles({
}) { }) {
const uploads = [] const uploads = []
walkDir(path, function prepareUploadsForS3(filePath) { walkDir(path, function(filePath) {
const fileExtension = [...filePath.split(".")].pop() const upload = prepareUploadForS3(filePath, metadata)
const fileBytes = fs.readFileSync(filePath)
const upload = s3
.upload({
Key: filePath.replace(path, s3Key),
Body: fileBytes,
ContentType: CONTENT_TYPE_MAP[fileExtension],
Metadata: metadata,
})
.promise()
uploads.push(upload) 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({ exports.uploadAppAssets = async function({
appId, appId,
instanceId,
credentials, credentials,
bucket, bucket,
cfDistribution, cfDistribution,
@ -126,25 +131,40 @@ exports.uploadAppAssets = async function({
for (let page of appPages) { for (let page of appPages) {
// Upload HTML, CSS and JS for each page of the web app // Upload HTML, CSS and JS for each page of the web app
const pageAssetUploads = uploadFiles({ walkDir(path, function(filePath) {
path: `${appAssetsPath}/${page}`, const appAssetUpload = prepareUploadForS3({
s3Key: `assets/${appId}`, filePath,
s3Key: filePath.replace(path, `assets/${appId}`),
s3, s3,
metadata: { accountId } metadata: { accountId }
}); })
uploads.push(appAssetUpload)
})
uploads = [...uploads, ...pageAssetUploads]; uploads = [...uploads, ...pageAssetUploads];
} }
// Upload file attachments // Upload file attachments
const attachmentUploads = uploadFiles({ const db = new PouchDB(instanceId)
path: `${budibaseAppsDir()}/${appId}/attachments`, const fileUploads = await db.get("_local/fileuploads")
s3Key: `assets/${appId}/attachments`, if (fileUploads) {
fileUploads.awaitingUpload.forEach((file, idx) => {
const attachmentUpload = prepareUploadForS3({
filePath: file.path,
s3Key: `assets/${appId}/${file.name}`,
s3, s3,
metadata: { accountId } metadata: { accountId }
}) })
uploads = [...uploads, ...attachmentUploads] uploads.push(attachmentUpload)
// move the pending upload to the uploaded array
fileUploads.awaitingUpload.splice(idx, 1);
fileUploads.uploaded.push(awaitingUpload);
})
db.put(fileUploads);
}
try { try {
await Promise.all(uploads) await Promise.all(uploads)

1
packages/server/src/api/controllers/deploy/index.js
View File

@ -42,6 +42,7 @@ exports.deployApp = async function(ctx) {
await uploadAppAssets({ await uploadAppAssets({
clientId, clientId,
appId: ctx.user.appId, appId: ctx.user.appId,
instanceId: ctx.user.instanceId,
...credentials, ...credentials,
}) })

36
packages/server/src/api/controllers/static/index.js
View File

@ -4,12 +4,14 @@ const {
budibaseAppsDir, budibaseAppsDir,
budibaseTempDir, budibaseTempDir,
} = require("../../../utilities/budibaseDir") } = require("../../../utilities/budibaseDir")
const CouchDB = require("../../../db")
const setBuilderToken = require("../../../utilities/builder/setBuilderToken") const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels") const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
const jwt = require("jsonwebtoken") const jwt = require("jsonwebtoken")
const fetch = require("node-fetch") const fetch = require("node-fetch")
const imageProcessing = require("./imageProcessing") const imageProcessing = require("./imageProcessing")
const fs = require("fs") const fs = require("fs")
const uuid = require("uuid")
exports.serveBuilder = async function(ctx) { exports.serveBuilder = async function(ctx) {
let builderPath = resolve(__dirname, "../../../../builder") let builderPath = resolve(__dirname, "../../../../builder")
@ -27,19 +29,43 @@ exports.processLocalFileUpload = async function(ctx) {
// create attachments dir if it doesnt exist // 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()
// filenames converted to UUIDs so they are unique
const fileName = `${uuid.v4()}.${fileExtension}`
const filesToProcess = files.map(file => ({ return {
...file, ...file,
outputPath: join(attachmentsPath, file.name), name: fileName,
clientUrl: join("/attachments", file.name), extension: fileExtension,
uploaded: false outputPath: join(attachmentsPath, fileName),
})) clientUrl: join("/attachments", fileName)
}
})
// TODO: read the file (into memory first, then we will stream it) // TODO: read the file (into memory first, then we will stream it)
const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file)) const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file))
try { try {
// TODO: get file sizes of images after resize
const responses = await Promise.all(imageProcessOperations); 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 ctx.body = filesToProcess
} catch (err) { } catch (err) {
ctx.throw(500, err); ctx.throw(500, err);