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

Remove bunch of unused components and tidy up unused references

This commit is contained in:
Andrew Kingston 2020-10-27 09:10:20 +00:00
parent 8e53f0e41b
commit fae4037a65
21 changed files with 51 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -1,22 +1,13 @@
<script> <script>
import { goto, params } from "@sveltech/routify" import { goto, params } from "@sveltech/routify"
import { onMount } from "svelte"
import { fade } from "svelte/transition" import { fade } from "svelte/transition"
import fsort from "fast-sort" import fsort from "fast-sort"
import getOr from "lodash/fp/getOr" import getOr from "lodash/fp/getOr"
import { store, backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import api from "builderStore/api"
import { Button, Icon } from "@budibase/bbui"
import ActionButton from "components/common/ActionButton.svelte"
import AttachmentList from "./AttachmentList.svelte" import AttachmentList from "./AttachmentList.svelte"
import TablePagination from "./TablePagination.svelte" import TablePagination from "./TablePagination.svelte"
import CreateEditRowModal from "./modals/CreateEditRowModal.svelte"
import RowPopover from "./buttons/CreateRowButton.svelte"
import ColumnPopover from "./buttons/CreateColumnButton.svelte"
import ViewPopover from "./buttons/CreateViewButton.svelte"
import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte" import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
import EditRowPopover from "./popovers/RowPopover.svelte" import EditRowPopover from "./popovers/RowPopover.svelte"
import CalculationPopover from "./buttons/CalculateButton.svelte"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
const ITEMS_PER_PAGE = 10 const ITEMS_PER_PAGE = 10

26
packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
View File

@ -1,26 +1,10 @@
<script> <script>
import { onMount } from "svelte" import { Input, Button, Select, Toggle } from "@budibase/bbui"
import { import { cloneDeep } from "lodash/fp"
Input, import { backendUiStore } from "builderStore"
TextArea,
Button,
Select,
Toggle,
Label,
} from "@budibase/bbui"
import { cloneDeep, merge } from "lodash/fp"
import { store, backendUiStore } from "builderStore"
import { FIELDS } from "constants/backend" import { FIELDS } from "constants/backend"
import { notifier } from "builderStore/store/notifications"
import ButtonGroup from "components/common/ButtonGroup.svelte"
import NumberBox from "components/common/NumberBox.svelte"
import ValuesList from "components/common/ValuesList.svelte" import ValuesList from "components/common/ValuesList.svelte"
import ErrorsBox from "components/common/ErrorsBox.svelte"
import Checkbox from "components/common/Checkbox.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import DatePicker from "components/common/DatePicker.svelte" import DatePicker from "components/common/DatePicker.svelte"
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
import * as api from "../api"
let fieldDefinitions = cloneDeep(FIELDS) let fieldDefinitions = cloneDeep(FIELDS)
@ -38,12 +22,12 @@
$backendUiStore.selectedTable.primaryDisplay == null || $backendUiStore.selectedTable.primaryDisplay == null ||
$backendUiStore.selectedTable.primaryDisplay === field.name $backendUiStore.selectedTable.primaryDisplay === field.name
$: tableOptions = $backendUiStore.tables.filter( $: tableOptions = $backendUiStore.tables.filter(
table => table._id !== $backendUiStore.draftTable._id (table) => table._id !== $backendUiStore.draftTable._id
) )
$: required = !!field?.constraints?.presence || primaryDisplay $: required = !!field?.constraints?.presence || primaryDisplay
async function saveColumn() { async function saveColumn() {
backendUiStore.update(state => { backendUiStore.update((state) => {
backendUiStore.actions.tables.saveField({ backendUiStore.actions.tables.saveField({
originalName, originalName,
field, field,

70
packages/builder/src/components/common/ActionButton.svelte
View File

@ -1,70 +0,0 @@
<script>
export let disabled = false
export let hidden = false
export let secondary = false
export let primary = true
export let cancel = false
export let alert = false
export let warning = false
</script>
<button
on:click
class="button"
class:hidden
class:secondary
class:primary
class:alert
class:cancel
class:warning
{disabled}>
<slot />
</button>
<style>
.primary {
color: #ffffff;
background: var(--blue);
border: solid 1px var(--blue);
}
.alert {
color: white;
background: #e26d69;
border: solid 1px #e26d69;
}
.cancel {
color: var(--secondary40);
background: none;
}
.secondary {
color: var(--ink);
border: solid 1px var(--grey-4);
background: white;
}
.button {
font-size: 14px;
font-weight: 500;
border-radius: 3px;
padding: 10px 20px;
height: 40px;
}
.button:hover {
cursor: pointer;
filter: saturate(90%);
}
.button:disabled {
color: rgba(22, 48, 87, 0.2);
cursor: default;
background: transparent;
}
.hidden {
visibility: hidden;
}
</style>

171
packages/builder/src/components/common/Button.svelte
View File

@ -1,171 +0,0 @@
<script>
export let color = "primary"
export let className = ""
export let style = ""
export let groupPosition = ""
export let grouped = false
$: borderClass = grouped ? "" : "border-normal"
</script>
<button
class="{color}
{className}
{borderClass}
{grouped ? 'grouped' : ''}"
{style}
on:click>
<slot />
</button>
<style>
.border-normal {
border-radius: var(--borderradiusall);
}
.border-left {
border-radius: var(--borderradius) 0 0 var(--borderradius);
}
.border-right {
border-radius: 0 var(--borderradius) var(--borderradius) 0;
}
.border-middle {
border-radius: 0;
}
button {
border-style: solid;
padding: 7.5px 15px;
cursor: pointer;
margin: 5px;
border-radius: 5px;
}
/* ---- PRIMARY ----*/
.primary {
background-color: var(--blue);
border-color: var(--blue);
color: var(--white);
}
.primary:hover {
background-color: var(--blue);
border-color: var(--blue);
}
.primary:active {
background-color: var(--primarydark);
border-color: var(--primarydark);
}
.primary-outline {
background-color: var(--white);
border-color: var(--blue);
color: var(--blue);
}
.primary-outline:hover {
background-color: var(--primary10);
}
.primary-outline:pressed {
background-color: var(--primary25);
}
/* ---- secondary ----*/
.secondary {
background-color: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.secondary:hover {
background-color: var(--secondary75);
border-color: var(--secondary75);
}
.secondary:pressed {
background-color: var(--secondarydark);
border-color: var(--secondarydark);
}
.secondary-outline {
background-color: var(--white);
border-color: var(--ink);
color: var(--ink);
}
.secondary-outline:hover {
background-color: var(--secondary10);
}
.secondary-outline:pressed {
background-color: var(--secondary25);
}
/* ---- success ----*/
.success {
background-color: var(--success100);
border-color: var(--success100);
color: var(--white);
}
.success:hover {
background-color: var(--success75);
border-color: var(--success75);
}
.success:pressed {
background-color: var(--successdark);
border-color: var(--successdark);
}
.success-outline {
background-color: var(--white);
border-color: var(--success100);
color: var(--success100);
}
.success-outline:hover {
background-color: var(--success10);
}
.success-outline:pressed {
background-color: var(--success25);
}
/* ---- deletion ----*/
.deletion {
background-color: var(--red);
border-color: var(--red);
color: var(--white);
}
.deletion:hover {
background-color: var(--red-light);
border-color: var(--red);
color: var(--red);
}
.deletion:pressed {
background-color: var(--red-dark);
border-color: var(--red-dark);
color: var(--white);
}
.deletion-outline {
background-color: var(--white);
border-color: var(--red);
color: var(--red);
}
.deletion-outline:hover {
background-color: var(--red-light);
color: var(--red);
}
.deletion-outline:pressed {
background-color: var(--red-dark);
color: var(--white);
}
</style>

15
packages/builder/src/components/common/ButtonGroup.svelte
View File

@ -1,15 +0,0 @@
<script>
export let style = ""
</script>
<div class="root" {style}>
<slot />
</div>
<style>
.root {
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>

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

@ -1,14 +1,17 @@
<script> <script>
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import { Heading, Body, Button, Dropzone } from "@budibase/bbui" import { Dropzone } from "@budibase/bbui"
import api from "builderStore/api" import api from "builderStore/api"
export let files = [] export let files = []
function handleFileTooLarge() { const BYTES_IN_MB = 1000000
function handleFileTooLarge(fileSizeLimit) {
notifier.danger( notifier.danger(
`Files cannot exceed ${fileSizeLimit / `Files cannot exceed ${
BYTES_IN_MB}MB. Please try again with smaller files.` fileSizeLimit / BYTES_IN_MB
}MB. Please try again with smaller files.`
) )
} }

36
packages/builder/src/components/common/NumberBox.svelte
View File

@ -1,36 +0,0 @@
<script>
export let value
export let label
const inputChanged = ev => {
try {
value = Number(ev.target.value)
} catch (_) {
value = null
}
}
let numberText = value === null || value === undefined ? "" : value.toString()
</script>
<div class="numberbox">
<label>{label}</label>
<input
class="budibase__input"
type="number"
{value}
on:change={inputChanged} />
</div>
<style>
.numberbox {
display: grid;
align-items: center;
}
label {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
</style>

76
packages/builder/src/components/common/Switcher.svelte
View File

@ -1,76 +0,0 @@
<script>
export let tabs = []
export const selectTab = tabName => {
selected = tabName
selectedIndex = tabs.indexOf(selected)
}
let selected = tabs.length > 0 && tabs[0]
let selectedIndex = 0
const isSelected = tab => selected === tab
</script>
<div class="root">
<div class="switcher">
{#each tabs as tab}
<button class:selected={selected === tab} on:click={() => selectTab(tab)}>
{tab}
</button>
{/each}
</div>
<div class="panel">
{#if selectedIndex === 0}
<slot name="0" />
{:else if selectedIndex === 1}
<slot name="1" />
{:else if selectedIndex === 2}
<slot name="2" />
{:else if selectedIndex === 3}
<slot name="3" />
{/if}
</div>
</div>
<style>
.root {
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 20px;
border-left: solid 1px var(--grey-2);
box-sizing: border-box;
}
.switcher {
display: flex;
margin: 0px 20px 20px 0px;
box-sizing: border-box;
}
.switcher > button {
display: inline-block;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: var(--grey-5);
margin-right: 20px;
background: none;
outline: none;
font-family: Inter;
}
.switcher > .selected {
color: var(--ink);
}
.panel {
min-height: 0;
height: 100%;
overflow-y: auto;
}
</style>

3
packages/builder/src/components/common/core.js
View File

@ -1,3 +0,0 @@
import { flow } from "lodash/fp"
export const pipe = (arg, funcs) => flow(funcs)(arg)

13
packages/builder/src/components/common/eventHandlers.js
View File

@ -1,13 +0,0 @@
import { eventHandlers } from "../../../../client/src/state/eventHandlers"
export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
export const allHandlers = () => {
const handlersObj = eventHandlers()
const handlers = Object.keys(handlersObj).map(name => ({
name,
...handlersObj[name],
}))
return handlers
}

6
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -2,7 +2,7 @@
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { map, join } from "lodash/fp" import { map, join } from "lodash/fp"
import iframeTemplate from "./iframeTemplate" import iframeTemplate from "./iframeTemplate"
import { pipe } from "components/common/core" import { pipe } from "../../../helpers"
let iframe let iframe
let styles = "" let styles = ""
@ -16,7 +16,7 @@
return props return props
} }
const getComponentTypeName = component => { const getComponentTypeName = (component) => {
let [componentName] = component._component.match(/[a-z]*$/) let [componentName] = component._component.match(/[a-z]*$/)
return componentName || "element" return componentName || "element"
} }
@ -144,7 +144,7 @@
} }
$: stylesheetLinks = pipe($store.pages.stylesheets, [ $: stylesheetLinks = pipe($store.pages.stylesheets, [
map(s => `<link rel="stylesheet" href="${s}"/>`), map((s) => `<link rel="stylesheet" href="${s}"/>`),
join("\n"), join("\n"),
]) ])

2
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -2,7 +2,7 @@
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte" import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
import { trimCharsStart, trimChars } from "lodash/fp" import { trimCharsStart, trimChars } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "../../helpers"
import { store } from "builderStore" import { store } from "builderStore"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import { writable } from "svelte/store" import { writable } from "svelte/store"

2
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -2,7 +2,7 @@
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { store } from "builderStore" import { store } from "builderStore"
import { last } from "lodash/fp" import { last } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "../../helpers"
import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte" import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import { getComponentDefinition } from "builderStore/storeUtils" import { getComponentDefinition } from "builderStore/storeUtils"

19
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -1,14 +1,7 @@
<script> <script>
import { store } from "builderStore" import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
import {
TextButton,
Button,
Body,
DropdownMenu,
ModalContent,
} from "@budibase/bbui"
import { AddIcon, ArrowDownIcon } from "components/common/Icons/" import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
import actionTypes from "./actions" import actionTypes from "./actions"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
@ -25,19 +18,19 @@
$: actions = event || [] $: actions = event || []
$: selectedActionComponent = $: selectedActionComponent =
selectedAction && selectedAction &&
actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME]) actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
.component .component
const updateEventHandler = (updatedHandler, index) => { const updateEventHandler = (updatedHandler, index) => {
actions[index] = updatedHandler actions[index] = updatedHandler
} }
const deleteAction = index => { const deleteAction = (index) => {
actions.splice(index, 1) actions.splice(index, 1)
actions = actions actions = actions
} }
const addAction = actionType => () => { const addAction = (actionType) => () => {
const newAction = { const newAction = {
parameters: {}, parameters: {},
[EVENT_TYPE_MEMBER_NAME]: actionType.name, [EVENT_TYPE_MEMBER_NAME]: actionType.name,
@ -48,7 +41,7 @@
addActionDropdown.hide() addActionDropdown.hide()
} }
const selectAction = action => () => { const selectAction = (action) => () => {
selectedAction = action selectedAction = action
} }

9
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -1,17 +1,12 @@
<script> <script>
import { Input, DataList, Select } from "@budibase/bbui" import { Input, DataList, Select } from "@budibase/bbui"
import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
import { store, automationStore } from "builderStore" import { store, automationStore } from "builderStore"
import { ArrowDownIcon } from "components/common/Icons/"
import { createEventDispatcher } from "svelte"
export let parameter export let parameter
let isOpen = false let isOpen = false
const capitalize = s => { const capitalize = (s) => {
if (typeof s !== "string") return "" if (typeof s !== "string") return ""
return s.charAt(0).toUpperCase() + s.slice(1) return s.charAt(0).toUpperCase() + s.slice(1)
} }
@ -22,7 +17,7 @@
{#if parameter.name === 'automation'} {#if parameter.name === 'automation'}
<Select on:change bind:value={parameter.value}> <Select on:change bind:value={parameter.value}>
<option value="" /> <option value="" />
{#each $automationStore.automations.filter(wf => wf.live) as automation} {#each $automationStore.automations.filter((wf) => wf.live) as automation}
<option value={automation._id}>{automation.name}</option> <option value={automation._id}>{automation.name}</option>
{/each} {/each}
</Select> </Select>

16
packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
View File

@ -1,21 +1,21 @@
import { isUndefined, filter, some, includes } from "lodash/fp" import { isUndefined, filter, some, includes } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "../../../helpers"
const normalString = s => (s || "").trim().toLowerCase() const normalString = (s) => (s || "").trim().toLowerCase()
export const isRootComponent = c => export const isRootComponent = (c) =>
isComponent(c) && isUndefined(c.props._component) isComponent(c) && isUndefined(c.props._component)
export const isComponent = c => { export const isComponent = (c) => {
const hasProp = n => !isUndefined(c[n]) const hasProp = (n) => !isUndefined(c[n])
return hasProp("name") && hasProp("props") return hasProp("name") && hasProp("props")
} }
export const searchAllComponents = (components, phrase) => { export const searchAllComponents = (components, phrase) => {
const hasPhrase = (...vals) => const hasPhrase = (...vals) =>
pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))]) pipe(vals, [some((v) => includes(normalString(phrase))(normalString(v)))])
const componentMatches = c => { const componentMatches = (c) => {
if (hasPhrase(c._instanceName, ...(c.tags || []))) return true if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
if (isRootComponent(c)) return false if (isRootComponent(c)) return false
@ -29,7 +29,7 @@ export const searchAllComponents = (components, phrase) => {
} }
export const getExactComponent = (components, name, isScreen = false) => { export const getExactComponent = (components, name, isScreen = false) => {
return components.find(c => return components.find((c) =>
isScreen ? c.props._instanceName === name : c._instanceName === name isScreen ? c.props._instanceName === name : c._instanceName === name
) )
} }

4
packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
View File

@ -1,7 +1,7 @@
import { split, last } from "lodash/fp" import { split, last } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "../../../helpers"
export const splitName = fullname => { export const splitName = (fullname) => {
const componentName = pipe(fullname, [split("/"), last]) const componentName = pipe(fullname, [split("/"), last])
const libName = fullname.substring( const libName = fullname.substring(

19
packages/builder/src/helpers.js
View File

@ -1,6 +1,6 @@
import { last } from "lodash/fp" import { last, flow } from "lodash/fp"
import { pipe } from "components/common/core"
export const buildStyle = styles => { export const buildStyle = (styles) => {
let str = "" let str = ""
for (let s in styles) { for (let s in styles) {
if (styles[s]) { if (styles[s]) {
@ -11,12 +11,15 @@ export const buildStyle = styles => {
return str return str
} }
export const convertCamel = str => { export const convertCamel = (str) => {
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
} }
export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) export const pipe = (arg, funcs) => flow(funcs)(arg)
export const get_name = s => (!s ? "" : last(s.split("/"))) export const capitalise = (s) =>
s.substring(0, 1).toUpperCase() + s.substring(1)
export const get_capitalised_name = name => pipe(name, [get_name, capitalise]) export const get_name = (s) => (!s ? "" : last(s.split("/")))
export const get_capitalised_name = (name) => pipe(name, [get_name, capitalise])

5
packages/builder/src/pages/[application]/design/_layout.svelte
View File

@ -1,15 +1,10 @@
<script> <script>
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { goto } from "@sveltech/routify"
import { onMount } from "svelte" import { onMount } from "svelte"
import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
import CurrentItemPreview from "components/userInterface/AppPreview" import CurrentItemPreview from "components/userInterface/AppPreview"
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte" import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte" import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
import Switcher from "components/common/Switcher.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp" import { last } from "lodash/fp"
import { AddIcon } from "components/common/Icons"
import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte" import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
$: instances = $store.appInstances $: instances = $store.appInstances

4
packages/builder/src/pages/index.svelte
View File

@ -1,11 +1,7 @@
<script> <script>
import { store } from "builderStore"
import api from "builderStore/api" import api from "builderStore/api"
import AppList from "components/start/AppList.svelte" import AppList from "components/start/AppList.svelte"
import { onMount } from "svelte"
import ActionButton from "components/common/ActionButton.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import Spinner from "components/common/Spinner.svelte"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import { Button, Heading, Modal } from "@budibase/bbui" import { Button, Heading, Modal } from "@budibase/bbui"
import TemplateList from "components/start/TemplateList.svelte" import TemplateList from "components/start/TemplateList.svelte"

7
packages/standard-components/src/attachments/Dropzone.svelte
View File

@ -2,14 +2,15 @@
import { Heading, Body, Button, Dropzone } from "@budibase/bbui" import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
import { FILE_TYPES } from "./fileTypes" import { FILE_TYPES } from "./fileTypes"
const BYTES_IN_KB = 1000 const BYTES_IN_MB = 1000000
export let files = [] export let files = []
function handleFileTooLarge(fileSizeLimit) { function handleFileTooLarge(fileSizeLimit) {
alert( alert(
`Files cannot exceed ${fileSizeLimit / `Files cannot exceed ${
BYTES_IN_MB}MB. Please try again with smaller files.` fileSizeLimit / BYTES_IN_MB
}MB. Please try again with smaller files.`
) )
} }