Skip to content

Commit

Permalink
Provides feedback when uploading excessively large files
Browse files Browse the repository at this point in the history
  • Loading branch information
allanlasser committed Apr 15, 2024
1 parent dd26d02 commit 20062c5
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 14 deletions.
8 changes: 8 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ const preview: Preview = {
csrftoken: "mockToken",
},
cookiePreserve: true,
sveltekit_experimental: {
stores: {
page: {
url: "/",
data: {},
},
},
},
},
};

Expand Down
91 changes: 78 additions & 13 deletions src/lib/components/forms/DocumentUpload.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,13 @@
import { filesize } from "filesize";
import { afterUpdate } from "svelte";
import { _ } from "svelte-i18n";
import { File16, File24, Upload16, XCircleFill24 } from "svelte-octicons";
import {
Alert16,
File16,
File24,
Upload16,
XCircleFill24,
} from "svelte-octicons";
import { page } from "$app/stores";
Expand All @@ -126,14 +132,20 @@
import Text from "../inputs/Text.svelte";
import * as documents from "$lib/api/documents";
import { DOCUMENT_TYPES } from "@/config/config.js";
import {
DOCUMENT_SIZE_LIMIT,
DOCUMENT_TYPES,
PDF_SIZE_LIMIT,
} from "@/config/config.js";
import {
filenameToTitle,
getFileExtension,
isSupported,
isWithinSizeLimit,
} from "@/lib/utils/files";
import Tooltip from "@/common/Tooltip.svelte";
let files: File[] = [];
export let files: File[] = [];
let projects: Project[] = [];
let loading = false;
Expand All @@ -157,12 +169,14 @@
let ocrEngine = ocrEngineOptions[0];
$: csrf_token = $page.data.csrf_token;
$: projects = $page.data.projects.results;
$: projects = $page.data.projects?.results;
$: total = files.reduce((t, file) => {
return t + file.size;
}, 0);
$: exceedsSizeLimit = files.some((file) => !isWithinSizeLimit(file));
function addFiles(filesToAdd: FileList) {
files = files.concat(Array.from(filesToAdd).filter(isSupported));
}
Expand Down Expand Up @@ -215,8 +229,21 @@
<div class="fileList" class:empty={files.length === 0}>
{#each files as file, index}
<Flex align="center" gap={1}>
<p class="fileInfo">
{getFileExtension(file)} / {filesize(file.size)}
<p class="fileInfo" class:error={!isWithinSizeLimit(file)}>
<span class="uppercase"
>{getFileExtension(file)} / {filesize(file.size)}</span
>
{#if !isWithinSizeLimit(file)}
<Tooltip
caption="The maximum size for a {getFileExtension(
file,
).toUpperCase()} is {getFileExtension(file) === 'pdf'
? '500MB'
: '25MB'}"
>
<Alert16 fill="var(--red)" />
</Tooltip>
{/if}
</p>
<div class="title">
<Text name="title" value={filenameToTitle(file.name)} required />
Expand All @@ -235,10 +262,14 @@
below
</Empty>
{/each}

<div class="total">
<p>Total upload size: {filesize(total)}</p>
</div>
{#if files.length > 0}
<div class="total">
<p>
Total: {files.length} file{files.length > 1 ? "s" : ""},
<span class="uppercase">{filesize(total)}</span>
</p>
</div>
{/if}
</div>
<div class="fileUpload">
<Dropzone
Expand Down Expand Up @@ -315,8 +346,11 @@
</Field>
</Premium>
</Flex>
<Button type="submit" full mode="primary" disabled={loading}
><Upload16 />Begin Upload</Button
<Button
type="submit"
full
mode="primary"
disabled={loading || exceedsSizeLimit}><Upload16 />Begin Upload</Button
>

<input
Expand Down Expand Up @@ -350,6 +384,20 @@
flex: 1 0 0;
border-radius: 0.5rem;
border: 1px solid var(--gray-2, #d8dee2);
position: relative;
}
.fileList .total {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
background: var(--white);
border: 1px solid var(--gray-2);
font-size: var(--font-s);
font-weight: var(--font-semibold);
box-shadow: var(--shadow);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
.fileList.empty {
Expand Down Expand Up @@ -381,7 +429,13 @@
font-size: var(--font-xs);
color: var(--gray-5);
white-space: nowrap;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.5rem;
}
.fileInfo.error {
color: var(--red);
}
.title {
Expand All @@ -406,6 +460,13 @@
background: var(--blue-1);
}
.excessiveFileSize {
padding: 0.25rem;
border-radius: 0.25rem;
color: var(--red-dark);
font-size: var(--font-s);
}
.drop-instructions {
color: var(--gray-5, #233944);
text-align: center;
Expand Down Expand Up @@ -446,6 +507,10 @@
border-top: 1px solid var(--gray-2, #d8dee2);
}
.uppercase {
text-transform: uppercase;
}
input[name="uploads"] {
display: none;
}
Expand Down
16 changes: 16 additions & 0 deletions src/lib/components/forms/stories/DocumentUpload.stories.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,19 @@
],
}}
/>
<Story
name="With Oversized Files"
args={{
...args,
files: [
new File([new ArrayBuffer(525336577)], "fileOne.pdf", {
type: "application/pdf",
}),
new File([new ArrayBuffer(128000)], "fileTwo.pdf"),
new File([new ArrayBuffer(27262977)], "fileThree.png", {
type: "image/png",
}),
new File([new ArrayBuffer(128000)], "fileFour.png"),
],
}}
/>
2 changes: 1 addition & 1 deletion vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default defineConfig({
],
environment: "jsdom",
coverage: {
reporter: ["text", "html", "clover", "json"],
reporter: ["text", "html", "lcov", "clover", "json"],
},
},
});

0 comments on commit 20062c5

Please sign in to comment.