mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
15 changed files with 418 additions and 517 deletions
@ -1,295 +0,0 @@ |
|||
<script> |
|||
import { Heading, Body, Button } from "../" |
|||
import { FILE_TYPES } from "./fileTypes" |
|||
|
|||
const BYTES_IN_KB = 1000 |
|||
const BYTES_IN_MB = 1000000 |
|||
|
|||
export let icons = { |
|||
image: "fas fa-file-image", |
|||
code: "fas fa-file-code", |
|||
file: "fas fa-file", |
|||
fileUpload: "fas fa-upload", |
|||
} |
|||
|
|||
export let files = [] |
|||
export let fileSizeLimit = BYTES_IN_MB * 20 |
|||
export let processFiles |
|||
export let handleFileTooLarge |
|||
|
|||
let selectedImageIdx = 0 |
|||
let fileDragged = false |
|||
// Generate a random ID so that multiple dropzones on the page don't conflict |
|||
let id = Math.random() |
|||
.toString(36) |
|||
.substring(7) |
|||
|
|||
$: selectedImage = files ? files[selectedImageIdx] : null |
|||
|
|||
function determineFileIcon(extension) { |
|||
const ext = extension.toLowerCase() |
|||
|
|||
if (FILE_TYPES.IMAGE.includes(ext)) return icons.image |
|||
if (FILE_TYPES.CODE.includes(ext)) return icons.code |
|||
|
|||
return icons.file |
|||
} |
|||
|
|||
async function processFileList(fileList) { |
|||
if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) { |
|||
handleFileTooLarge(fileSizeLimit, file) |
|||
return |
|||
} |
|||
|
|||
const processedFiles = await processFiles(fileList) |
|||
|
|||
files = [...processedFiles, ...files] |
|||
selectedImageIdx = 0 |
|||
} |
|||
|
|||
async function removeFile() { |
|||
files.splice(selectedImageIdx, 1) |
|||
files = files |
|||
selectedImageIdx = 0 |
|||
} |
|||
|
|||
function navigateLeft() { |
|||
selectedImageIdx -= 1 |
|||
} |
|||
|
|||
function navigateRight() { |
|||
selectedImageIdx += 1 |
|||
} |
|||
|
|||
function handleFile(evt) { |
|||
processFileList(evt.target.files) |
|||
} |
|||
|
|||
function handleDragOver(evt) { |
|||
evt.preventDefault() |
|||
fileDragged = true |
|||
} |
|||
|
|||
function handleDragLeave(evt) { |
|||
evt.preventDefault() |
|||
fileDragged = false |
|||
} |
|||
|
|||
function handleDrop(evt) { |
|||
evt.preventDefault() |
|||
processFileList(evt.dataTransfer.files) |
|||
fileDragged = false |
|||
} |
|||
</script> |
|||
|
|||
<div |
|||
class="dropzone" |
|||
on:dragover={handleDragOver} |
|||
on:dragleave={handleDragLeave} |
|||
on:dragenter={handleDragOver} |
|||
on:drop={handleDrop} |
|||
class:fileDragged> |
|||
{#if selectedImage} |
|||
<ul> |
|||
<li> |
|||
<header> |
|||
<div> |
|||
<i class={determineFileIcon(selectedImage.extension)} /> |
|||
<span class="filename">{selectedImage.name}</span> |
|||
</div> |
|||
<p> |
|||
{#if selectedImage.size <= BYTES_IN_MB} |
|||
{selectedImage.size / BYTES_IN_KB}KB |
|||
{:else}{selectedImage.size / BYTES_IN_MB}MB{/if} |
|||
</p> |
|||
</header> |
|||
<div class="delete-button" on:click={removeFile}> |
|||
<i class="ri-close-circle-fill" /> |
|||
</div> |
|||
{#if selectedImageIdx !== 0} |
|||
<div class="nav left" on:click={navigateLeft}> |
|||
<i class="ri-arrow-left-circle-fill" /> |
|||
</div> |
|||
{/if} |
|||
<img alt="preview" src={selectedImage.url} /> |
|||
{#if selectedImageIdx !== files.length - 1} |
|||
<div class="nav right" on:click={navigateRight}> |
|||
<i class="ri-arrow-right-circle-fill" /> |
|||
</div> |
|||
{/if} |
|||
</li> |
|||
</ul> |
|||
{/if} |
|||
<i class={icons.fileUpload} /> |
|||
<input {id} type="file" multiple on:change={handleFile} {...$$restProps} /> |
|||
<i class="ri-upload-cloud-line" /> |
|||
<p class="drop">Drop your files here</p> |
|||
<label for={id}>Select a file from your computer</label> |
|||
</div> |
|||
|
|||
<style> |
|||
.dropzone { |
|||
padding: var(--spacing-l); |
|||
border: 2px dashed var(--grey-4); |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
border-radius: 10px; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.fileDragged { |
|||
border: 2px dashed var(--grey-7); |
|||
background: var(--blue-light); |
|||
} |
|||
|
|||
input[type="file"] { |
|||
display: none; |
|||
} |
|||
|
|||
label { |
|||
font-family: var(--font-sans); |
|||
font-size: var(--font-size-s); |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
color: var(--grey-7); |
|||
text-rendering: optimizeLegibility; |
|||
min-width: auto; |
|||
outline: none; |
|||
font-feature-settings: "case" 1, "rlig" 1, "calt" 0; |
|||
-webkit-box-align: center; |
|||
flex-shrink: 0; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.drop { |
|||
font-family: var(--font-sans); |
|||
font-size: var(--font-size-s); |
|||
margin: 12px 0; |
|||
} |
|||
|
|||
div.nav { |
|||
padding: var(--spacing-xs); |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
bottom: var(--spacing-s); |
|||
border-radius: 5px; |
|||
transition: 0.2s transform; |
|||
} |
|||
|
|||
.nav:hover { |
|||
cursor: pointer; |
|||
color: var(--blue); |
|||
} |
|||
|
|||
.left { |
|||
left: var(--spacing-s); |
|||
} |
|||
|
|||
.right { |
|||
right: var(--spacing-s); |
|||
} |
|||
|
|||
li { |
|||
position: relative; |
|||
height: 300px; |
|||
background: var(--grey-7); |
|||
display: flex; |
|||
justify-content: center; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
img { |
|||
border-radius: 10px; |
|||
width: 100%; |
|||
box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15); |
|||
object-fit: contain; |
|||
} |
|||
|
|||
i { |
|||
font-size: 2rem; |
|||
color: var(--ink); |
|||
} |
|||
|
|||
i:hover { |
|||
cursor: pointer; |
|||
color: var(--background); |
|||
} |
|||
|
|||
.file-icon { |
|||
color: var(--background); |
|||
font-size: 2em; |
|||
margin-right: var(--spacing-s); |
|||
} |
|||
|
|||
ul { |
|||
padding: 0; |
|||
display: grid; |
|||
grid-gap: var(--spacing-s); |
|||
list-style-type: none; |
|||
width: 100%; |
|||
} |
|||
|
|||
header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position: absolute; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgb(255, 255, 255), |
|||
rgba(255, 255, 255, 0) |
|||
); |
|||
width: 100%; |
|||
border-top-left-radius: 10px; |
|||
border-top-right-radius: 10px; |
|||
height: 60px; |
|||
} |
|||
|
|||
header > div { |
|||
color: var(--ink); |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
margin-left: var(--spacing-m); |
|||
width: 60%; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.filename { |
|||
overflow: hidden; |
|||
margin-left: 5px; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
header > p { |
|||
color: var(--grey-5); |
|||
margin-right: var(--spacing-m); |
|||
} |
|||
|
|||
.delete-button { |
|||
position: absolute; |
|||
top: var(--spacing-s); |
|||
right: var(--spacing-s); |
|||
padding: var(--spacing-s); |
|||
border-radius: 10px; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.delete-button i { |
|||
font-size: 2em; |
|||
color: var(--ink); |
|||
} |
|||
|
|||
.delete-button:hover { |
|||
cursor: pointer; |
|||
color: var(--red); |
|||
} |
|||
</style> |
|||
@ -1,17 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import Dropzone from "./Dropzone.svelte"; |
|||
|
|||
async function processFiles(files) { |
|||
console.log("Processing", files); |
|||
return files; |
|||
} |
|||
|
|||
function handleFileTooLarge() { |
|||
alert("File too large."); |
|||
} |
|||
</script> |
|||
|
|||
<View name="dropzone"> |
|||
<Dropzone {processFiles} {handleFileTooLarge} /> |
|||
</View> |
|||
@ -1,5 +0,0 @@ |
|||
export const FILE_TYPES = { |
|||
IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"], |
|||
CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"], |
|||
DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"], |
|||
} |
|||
@ -0,0 +1,334 @@ |
|||
<script> |
|||
import "@spectrum-css/dropzone/dist/index-vars.css" |
|||
import "@spectrum-css/typography/dist/index-vars.css" |
|||
import "@spectrum-css/illustratedmessage/dist/index-vars.css" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { generateID } from "../../utils/helpers" |
|||
import Icon from "../../Icon/Icon.svelte" |
|||
|
|||
const BYTES_IN_KB = 1000 |
|||
const BYTES_IN_MB = 1000000 |
|||
|
|||
export let value = [] |
|||
export let id = null |
|||
export let disabled = false |
|||
export let fileSizeLimit = BYTES_IN_MB * 20 |
|||
export let processFiles = null |
|||
export let handleFileTooLarge = null |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const imageExtensions = [ |
|||
"png", |
|||
"tiff", |
|||
"gif", |
|||
"raw", |
|||
"jpg", |
|||
"jpeg", |
|||
"svg", |
|||
"bmp", |
|||
"jfif", |
|||
] |
|||
const onChange = event => { |
|||
dispatch("change", event.target.checked) |
|||
} |
|||
|
|||
const fieldId = id || generateID() |
|||
let selectedImageIdx = 0 |
|||
let fileDragged = false |
|||
$: selectedImage = value?.[selectedImageIdx] ?? null |
|||
$: fileCount = value?.length ?? 0 |
|||
$: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase()) |
|||
|
|||
async function processFileList(fileList) { |
|||
if ( |
|||
handleFileTooLarge && |
|||
Array.from(fileList).some(file => file.size >= fileSizeLimit) |
|||
) { |
|||
handleFileTooLarge(fileSizeLimit, value) |
|||
return |
|||
} |
|||
if (processFiles) { |
|||
const processedFiles = await processFiles(fileList) |
|||
const newValue = [...value, ...processedFiles] |
|||
dispatch("change", newValue) |
|||
selectedImageIdx = newValue.length - 1 |
|||
} |
|||
} |
|||
|
|||
async function removeFile() { |
|||
dispatch( |
|||
"change", |
|||
value.filter((x, idx) => idx !== selectedImageIdx) |
|||
) |
|||
selectedImageIdx = 0 |
|||
} |
|||
|
|||
function navigateLeft() { |
|||
selectedImageIdx -= 1 |
|||
} |
|||
|
|||
function navigateRight() { |
|||
selectedImageIdx += 1 |
|||
} |
|||
|
|||
function handleFile(evt) { |
|||
processFileList(evt.target.files) |
|||
} |
|||
|
|||
function handleDragOver(evt) { |
|||
evt.preventDefault() |
|||
fileDragged = true |
|||
} |
|||
|
|||
function handleDragLeave(evt) { |
|||
evt.preventDefault() |
|||
fileDragged = false |
|||
} |
|||
|
|||
function handleDrop(evt) { |
|||
evt.preventDefault() |
|||
processFileList(evt.dataTransfer.files) |
|||
fileDragged = false |
|||
} |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
{#if selectedImage} |
|||
<div class="gallery"> |
|||
<div class="title"> |
|||
<div class="filename">{selectedImage.name}</div> |
|||
<div class="filesize"> |
|||
{#if selectedImage.size <= BYTES_IN_MB} |
|||
{`${selectedImage.size / BYTES_IN_KB} KB`} |
|||
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if} |
|||
</div> |
|||
{#if !disabled} |
|||
<div class="delete-button" on:click={removeFile}> |
|||
<Icon name="Close" /> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
{#if isImage} |
|||
<img alt="preview" src={selectedImage.url} /> |
|||
{:else} |
|||
<div class="placeholder"> |
|||
<div class="extension">{selectedImage.extension}</div> |
|||
<div>Preview not supported</div> |
|||
</div> |
|||
{/if} |
|||
<div |
|||
class="nav left" |
|||
class:visible={selectedImageIdx > 0} |
|||
on:click={navigateLeft}> |
|||
<Icon name="ChevronLeft" /> |
|||
</div> |
|||
<div |
|||
class="nav right" |
|||
class:visible={selectedImageIdx < fileCount - 1} |
|||
on:click={navigateRight}> |
|||
<Icon name="ChevronRight" /> |
|||
</div> |
|||
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div> |
|||
</div> |
|||
{/if} |
|||
<div |
|||
class="spectrum-Dropzone" |
|||
class:disabled |
|||
role="region" |
|||
tabindex="0" |
|||
on:dragover={handleDragOver} |
|||
on:dragleave={handleDragLeave} |
|||
on:dragenter={handleDragOver} |
|||
on:drop={handleDrop} |
|||
class:is-dragged={fileDragged}> |
|||
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta"> |
|||
<input |
|||
id={fieldId} |
|||
{disabled} |
|||
type="file" |
|||
multiple |
|||
on:change={handleFile} /> |
|||
<svg |
|||
class="spectrum-IllustratedMessage-illustration" |
|||
width="125" |
|||
height="60" |
|||
viewBox="0 0 199 97.7"><defs> |
|||
<style> |
|||
.cls-1, |
|||
.cls-2 { |
|||
fill: none; |
|||
stroke-linecap: round; |
|||
stroke-linejoin: round; |
|||
} |
|||
.cls-1 { |
|||
stroke-width: 3px; |
|||
} |
|||
.cls-2 { |
|||
stroke-width: 2px; |
|||
} |
|||
</style> |
|||
</defs> |
|||
<path |
|||
class="cls-1" |
|||
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" /> |
|||
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" /> |
|||
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" /> |
|||
<path |
|||
class="cls-1" |
|||
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" /> |
|||
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" /> |
|||
<path |
|||
class="cls-2" |
|||
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" /> |
|||
<path |
|||
class="cls-2" |
|||
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" /> |
|||
<path |
|||
class="cls-2" |
|||
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" /> |
|||
<path |
|||
class="cls-1" |
|||
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" /> |
|||
<rect |
|||
class="cls-1" |
|||
x="1.5" |
|||
y="34.5" |
|||
width="58" |
|||
height="39" |
|||
rx="2" |
|||
ry="2" /> |
|||
</svg> |
|||
<h2 |
|||
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"> |
|||
Drag and drop your file |
|||
</h2> |
|||
{#if !disabled} |
|||
<p |
|||
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"> |
|||
<label for={fieldId} class="spectrum-Link">Select a file to upload</label> |
|||
<br /> |
|||
from your computer |
|||
</p> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
--spectrum-dropzone-padding: var(--spectrum-global-dimension-size-400); |
|||
--spectrum-heading-l-text-size: var( |
|||
--spectrum-global-dimension-font-size-400 |
|||
); |
|||
} |
|||
.container * { |
|||
font-family: "Inter", sans-serif !important; |
|||
} |
|||
|
|||
.gallery, |
|||
.spectrum-Dropzone { |
|||
user-select: none; |
|||
} |
|||
input[type="file"] { |
|||
display: none; |
|||
} |
|||
|
|||
.gallery { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
background-color: var(--spectrum-global-color-gray-50); |
|||
color: var(--spectrum-alias-text-color); |
|||
font-size: var(--spectrum-alias-item-text-size-m); |
|||
box-sizing: border-box; |
|||
border: var(--spectrum-alias-border-size-thin) |
|||
var(--spectrum-alias-border-color) solid; |
|||
border-radius: var(--spectrum-alias-border-radius-regular); |
|||
padding: 10px; |
|||
margin-bottom: 10px; |
|||
position: relative; |
|||
} |
|||
.placeholder, |
|||
img { |
|||
height: 120px; |
|||
max-width: 100%; |
|||
object-fit: contain; |
|||
margin: 20px 30px; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
} |
|||
.filename { |
|||
flex: 1 1 auto; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
width: 0; |
|||
margin-right: 10px; |
|||
} |
|||
.placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.extension { |
|||
color: var(--spectrum-global-color-gray-600); |
|||
text-transform: uppercase; |
|||
font-weight: 500; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.nav { |
|||
padding: var(--spacing-xs); |
|||
position: absolute; |
|||
top: 50%; |
|||
border-radius: 5px; |
|||
display: none; |
|||
transition: all 0.3s; |
|||
} |
|||
.nav.visible { |
|||
display: block; |
|||
} |
|||
.nav:hover { |
|||
cursor: pointer; |
|||
color: var(--blue); |
|||
} |
|||
.left { |
|||
left: 5px; |
|||
} |
|||
.right { |
|||
right: 5px; |
|||
} |
|||
i { |
|||
font-size: 2rem; |
|||
color: var(--ink); |
|||
} |
|||
i:hover { |
|||
cursor: pointer; |
|||
color: var(--background); |
|||
} |
|||
.delete-button { |
|||
transition: all 0.3s; |
|||
margin-left: 10px; |
|||
} |
|||
.delete-button i { |
|||
font-size: 2em; |
|||
} |
|||
.delete-button:hover { |
|||
cursor: pointer; |
|||
color: var(--red); |
|||
} |
|||
|
|||
.spectrum-Dropzone.disabled { |
|||
pointer-events: none; |
|||
background-color: var(--spectrum-global-color-gray-200); |
|||
} |
|||
.disabled .spectrum-Heading--sizeL { |
|||
color: var(--spectrum-alias-text-color-disabled); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import CoreDropzone from "./Core/Dropzone.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = [] |
|||
export let label = null |
|||
export let labelPosition = "above" |
|||
export let disabled = false |
|||
export let error = null |
|||
export let fileSizeLimit = undefined |
|||
export let processFiles = undefined |
|||
export let handleFileTooLarge = undefined |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const onChange = e => { |
|||
value = e.detail |
|||
dispatch("change", e.detail) |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {disabled} {error}> |
|||
<CoreDropzone |
|||
{error} |
|||
{disabled} |
|||
{value} |
|||
{fileSizeLimit} |
|||
{processFiles} |
|||
{handleFileTooLarge} |
|||
on:change={onChange} /> |
|||
</Field> |
|||
@ -1,127 +0,0 @@ |
|||
<script> |
|||
import { Modal, ModalContent } from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
import { FILE_TYPES } from "./fileTypes" |
|||
|
|||
export let files = [] |
|||
export let height = "70" |
|||
export let width = "70" |
|||
|
|||
let modal |
|||
let currentFile |
|||
|
|||
const openModal = file => { |
|||
currentFile = file |
|||
modal.show() |
|||
} |
|||
|
|||
const handleConfirm = () => { |
|||
dispatch("delete", currentFile) |
|||
} |
|||
</script> |
|||
|
|||
<div class="file-list"> |
|||
{#each files as file} |
|||
<div class="file-container"> |
|||
<a href={file.url} target="_blank" class="file"> |
|||
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())} |
|||
<img {width} {height} src={file.url} alt="preview of {file.name}" /> |
|||
{:else}<i class="far fa-file" />{/if} |
|||
</a> |
|||
<span>{file.name}</span> |
|||
<div class="button-placement"> |
|||
<button primary on:click|stopPropagation={() => openModal(file)}> |
|||
× |
|||
</button> |
|||
</div> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
<Modal bind:this={modal}> |
|||
<ModalContent |
|||
title="Confirm File Deletion" |
|||
confirmText="Delete" |
|||
onConfirm={handleConfirm}> |
|||
<span>Are you sure you want to delete this attachment?</span> |
|||
</ModalContent> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.file-list { |
|||
display: grid; |
|||
justify-content: start; |
|||
grid-auto-flow: column; |
|||
grid-gap: var(--spacing-m); |
|||
grid-template-columns: repeat(auto-fill, 1fr); |
|||
} |
|||
|
|||
img { |
|||
object-fit: contain; |
|||
} |
|||
|
|||
i { |
|||
margin-bottom: var(--spacing-m); |
|||
} |
|||
|
|||
a { |
|||
color: var(--ink); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.file-container { |
|||
position: relative; |
|||
} |
|||
|
|||
button { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
position: absolute; |
|||
font-size: var(--font-size-m); |
|||
line-height: 110%; |
|||
z-index: 1000; |
|||
top: 4px; |
|||
left: 50px; |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 1.3rem; |
|||
height: 1.3rem; |
|||
border: 0; |
|||
color: white; |
|||
border-radius: var(--border-radius-xl); |
|||
background: black; |
|||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), |
|||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); |
|||
-webkit-appearance: none; |
|||
outline: none; |
|||
} |
|||
button:hover { |
|||
background-color: var(--grey-8); |
|||
cursor: pointer; |
|||
} |
|||
button:active { |
|||
background-color: var(--grey-9); |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
height: 75px; |
|||
width: 75px; |
|||
border: 2px dashed var(--grey-7); |
|||
padding: var(--spacing-xs); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
span { |
|||
width: 200px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
</style> |
|||
@ -1,26 +0,0 @@ |
|||
<script> |
|||
import { Dropzone } from "@budibase/bbui" |
|||
import { getContext } from "svelte" |
|||
|
|||
const { API } = getContext("sdk") |
|||
const BYTES_IN_MB = 1000000 |
|||
|
|||
export let files = [] |
|||
|
|||
function handleFileTooLarge(fileSizeLimit) { |
|||
alert( |
|||
`Files cannot exceed ${fileSizeLimit / |
|||
BYTES_IN_MB}MB. Please try again with smaller files.` |
|||
) |
|||
} |
|||
|
|||
async function processFiles(fileList) { |
|||
let data = new FormData() |
|||
for (let i = 0; i < fileList.length; i++) { |
|||
data.append("file", fileList[i]) |
|||
} |
|||
return await API.uploadAttachment(data) |
|||
} |
|||
</script> |
|||
|
|||
<Dropzone bind:files {processFiles} {handleFileTooLarge} /> |
|||
@ -1,5 +0,0 @@ |
|||
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"], |
|||
} |
|||
Loading…
Reference in new issue