86 lines
1.9 KiB
Svelte
86 lines
1.9 KiB
Svelte
<script>
|
|
import CardList from "./CardList.svelte";
|
|
import Dropzone from "./Dropzone.svelte";
|
|
import FileList from "./FileList.svelte";
|
|
|
|
import { filterFiles } from "../utils/filterFiles";
|
|
import { supportedFormats } from "../format-readers";
|
|
|
|
let acceptedFiles;
|
|
let rejectedFiles;
|
|
let areAcceptedFilesRendered = false;
|
|
const fileRequirements = {
|
|
supportedFormats: Object.values(supportedFormats).map((f) => f.ext),
|
|
maxSize: 700000,
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
areAcceptedFilesRendered = true;
|
|
};
|
|
|
|
const onDrop = (evt) => {
|
|
onChange(evt);
|
|
};
|
|
|
|
const onChange = (evt) => {
|
|
acceptedFiles = null;
|
|
areAcceptedFilesRendered = false;
|
|
|
|
const changedFiles = evt.dataTransfer
|
|
? evt.dataTransfer.files
|
|
: evt.target.files;
|
|
|
|
const results = filterFiles(changedFiles, fileRequirements);
|
|
acceptedFiles = results.accepted;
|
|
rejectedFiles = results.rejected;
|
|
};
|
|
|
|
const onClick = () => {
|
|
document.getElementById("file-input").click();
|
|
};
|
|
|
|
const onKeydown = (evt) => {
|
|
if (evt.key === "Enter") {
|
|
document.getElementById("file-input").click();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<form
|
|
id="form"
|
|
enctype="multipart/form-data"
|
|
on:submit|preventDefault|stopPropagation={onSubmit}
|
|
>
|
|
<h2>Upload files</h2>
|
|
<p>
|
|
Max file size is <strong>{fileRequirements.maxSize / 1000}kb</strong>.
|
|
Accepted formats:
|
|
<strong>{fileRequirements.supportedFormats.join(", ")}</strong>.
|
|
</p>
|
|
|
|
<Dropzone
|
|
files={acceptedFiles}
|
|
supportedFormats={fileRequirements.supportedFormats}
|
|
{onKeydown}
|
|
{onClick}
|
|
{onDrop}
|
|
{onChange}
|
|
/>
|
|
|
|
<input type="submit" value="Render files" />
|
|
</form>
|
|
|
|
{#if areAcceptedFilesRendered}
|
|
<CardList files={acceptedFiles} />
|
|
{:else}
|
|
<FileList title="Rejected Files" files={rejectedFiles} isError />
|
|
<FileList title="Selected Files" files={acceptedFiles} />
|
|
{/if}
|
|
|
|
<style>
|
|
@media only screen and (max-device-width: 812px) {
|
|
#form {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|