Add dropzone component and update builder and standard components
This commit is contained in:
Andrew Kingston
parent
57aaa05461
commit
a0304d7945
|
|
@ -45,9 +45,11 @@
|
||||||
"@spectrum-css/checkbox": "^3.0.2",
|
"@spectrum-css/checkbox": "^3.0.2",
|
||||||
"@spectrum-css/dialog": "^3.0.1",
|
"@spectrum-css/dialog": "^3.0.1",
|
||||||
"@spectrum-css/divider": "^1.0.1",
|
"@spectrum-css/divider": "^1.0.1",
|
||||||
|
"@spectrum-css/dropzone": "^3.0.2",
|
||||||
"@spectrum-css/fieldgroup": "^3.0.2",
|
"@spectrum-css/fieldgroup": "^3.0.2",
|
||||||
"@spectrum-css/fieldlabel": "^3.0.1",
|
"@spectrum-css/fieldlabel": "^3.0.1",
|
||||||
"@spectrum-css/icon": "^3.0.1",
|
"@spectrum-css/icon": "^3.0.1",
|
||||||
|
"@spectrum-css/illustratedmessage": "^3.0.2",
|
||||||
"@spectrum-css/inputgroup": "^3.0.2",
|
"@spectrum-css/inputgroup": "^3.0.2",
|
||||||
"@spectrum-css/label": "^2.0.9",
|
"@spectrum-css/label": "^2.0.9",
|
||||||
"@spectrum-css/link": "^3.1.1",
|
"@spectrum-css/link": "^3.1.1",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -8,3 +8,4 @@ export { default as CoreCombobox } from "./Combobox.svelte"
|
||||||
export { default as CoreSwitch } from "./Switch.svelte"
|
export { default as CoreSwitch } from "./Switch.svelte"
|
||||||
export { default as CoreSearch } from "./Search.svelte"
|
export { default as CoreSearch } from "./Search.svelte"
|
||||||
export { default as CoreDatePicker } from "./DatePicker.svelte"
|
export { default as CoreDatePicker } from "./DatePicker.svelte"
|
||||||
|
export { default as CoreDropzone } from "./Dropzone.svelte"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -8,7 +8,7 @@ export { default as Input } from "./Form/Input.svelte"
|
||||||
export { default as TextArea } from "./Form/TextArea.svelte"
|
export { default as TextArea } from "./Form/TextArea.svelte"
|
||||||
export { default as Select } from "./Form/Select.svelte"
|
export { default as Select } from "./Form/Select.svelte"
|
||||||
export { default as Combobox } from "./Form/Combobox.svelte"
|
export { default as Combobox } from "./Form/Combobox.svelte"
|
||||||
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
|
export { default as Dropzone } from "./Form/Dropzone.svelte"
|
||||||
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
||||||
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
||||||
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
|
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,11 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@spectrum-css/vars" "^3.0.2"
|
"@spectrum-css/vars" "^3.0.2"
|
||||||
|
|
||||||
|
"@spectrum-css/dropzone@^3.0.2":
|
||||||
|
version "3.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf"
|
||||||
|
integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug==
|
||||||
|
|
||||||
"@spectrum-css/fieldgroup@^3.0.2":
|
"@spectrum-css/fieldgroup@^3.0.2":
|
||||||
version "3.0.2"
|
version "3.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
|
||||||
|
|
@ -121,6 +126,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
|
||||||
integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
|
integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
|
||||||
|
|
||||||
|
"@spectrum-css/illustratedmessage@^3.0.2":
|
||||||
|
version "3.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
|
||||||
|
integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
|
||||||
|
|
||||||
"@spectrum-css/inputgroup@^3.0.2":
|
"@spectrum-css/inputgroup@^3.0.2":
|
||||||
version "3.0.2"
|
version "3.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
|
||||||
Input,
|
|
||||||
Select,
|
|
||||||
Label,
|
|
||||||
DatePicker,
|
|
||||||
Toggle,
|
|
||||||
TextArea,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import Dropzone from "components/common/Dropzone.svelte"
|
import Dropzone from "components/common/Dropzone.svelte"
|
||||||
import { capitalise } from "../../../helpers"
|
import { capitalise } from "../../../helpers"
|
||||||
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
||||||
|
|
@ -29,16 +22,11 @@
|
||||||
{:else if type === 'datetime'}
|
{:else if type === 'datetime'}
|
||||||
<DatePicker {label} bind:value />
|
<DatePicker {label} bind:value />
|
||||||
{:else if type === 'attachment'}
|
{:else if type === 'attachment'}
|
||||||
<div>
|
<Dropzone {label} bind:value />
|
||||||
<Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
|
|
||||||
<Dropzone bind:files={value} />
|
|
||||||
</div>
|
|
||||||
{:else if type === 'boolean'}
|
{:else if type === 'boolean'}
|
||||||
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
|
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
|
||||||
{:else if type === 'link'}
|
{:else if type === 'link'}
|
||||||
<div>
|
|
||||||
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
|
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
|
||||||
</div>
|
|
||||||
{:else if type === 'longform'}
|
{:else if type === 'longform'}
|
||||||
<TextArea {label} bind:value />
|
<TextArea {label} bind:value />
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { notifications } from "@budibase/bbui"
|
import { Dropzone, notifications } from "@budibase/bbui"
|
||||||
import { Dropzone } from "@budibase/bbui"
|
|
||||||
import api from "builderStore/api"
|
import api from "builderStore/api"
|
||||||
|
|
||||||
export let files = []
|
export let value = []
|
||||||
|
export let label
|
||||||
|
|
||||||
const BYTES_IN_MB = 1000000
|
const BYTES_IN_MB = 1000000
|
||||||
|
|
||||||
|
|
@ -24,4 +24,9 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dropzone bind:files {processFiles} {handleFileTooLarge} />
|
<Dropzone
|
||||||
|
bind:value
|
||||||
|
{label}
|
||||||
|
{...$$restProps}
|
||||||
|
{processFiles}
|
||||||
|
{handleFileTooLarge} />
|
||||||
|
|
|
||||||
|
|
@ -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"],
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Field from "./Field.svelte"
|
import Field from "./Field.svelte"
|
||||||
import Dropzone from "../attachments/Dropzone.svelte"
|
import { CoreDropzone } from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { getContext } from "svelte"
|
||||||
|
|
||||||
export let field
|
export let field
|
||||||
export let label
|
export let label
|
||||||
|
|
@ -10,16 +10,25 @@
|
||||||
let fieldState
|
let fieldState
|
||||||
let fieldApi
|
let fieldApi
|
||||||
|
|
||||||
// Update form value from bound value after we've mounted
|
const { API, notifications } = getContext("sdk")
|
||||||
let value
|
const BYTES_IN_MB = 1000000
|
||||||
let mounted = false
|
|
||||||
$: mounted && fieldApi?.setValue(value)
|
|
||||||
|
|
||||||
// Get the fields initial value after initialising
|
export let files = []
|
||||||
onMount(() => {
|
|
||||||
value = $fieldState?.value
|
const handleFileTooLarge = fileSizeLimit => {
|
||||||
mounted = true
|
notifications.warning(
|
||||||
})
|
`Files cannot exceed ${fileSizeLimit /
|
||||||
|
BYTES_IN_MB} MB. Please try again with smaller files.`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const processFiles = async fileList => {
|
||||||
|
let data = new FormData()
|
||||||
|
for (let i = 0; i < fileList.length; i++) {
|
||||||
|
data.append("file", fileList[i])
|
||||||
|
}
|
||||||
|
return await API.uploadAttachment(data)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Field
|
<Field
|
||||||
|
|
@ -30,16 +39,12 @@
|
||||||
bind:fieldState
|
bind:fieldState
|
||||||
bind:fieldApi
|
bind:fieldApi
|
||||||
defaultValue={[]}>
|
defaultValue={[]}>
|
||||||
{#if mounted}
|
{#if $fieldState}
|
||||||
<div class:disabled={$fieldState.disabled}>
|
<CoreDropzone
|
||||||
<Dropzone bind:files={value} />
|
value={$fieldState.value}
|
||||||
</div>
|
disabled={$fieldState.disabled}
|
||||||
|
on:change={e => fieldApi.setValue(e.detail)}
|
||||||
|
{processFiles}
|
||||||
|
{handleFileTooLarge} />
|
||||||
{/if}
|
{/if}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<style>
|
|
||||||
div.disabled :global(> *) {
|
|
||||||
background-color: var(--spectrum-global-color-gray-200) !important;
|
|
||||||
pointer-events: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue