s3-share/web/App.svelte
2022-05-13 11:53:55 +02:00

63 lines
1.3 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
import getComponentForShare from "./contentType";
const regex = /filename="(.*)"/gm;
const slug = window.location.pathname.split("/").pop();
let component = null;
let contentType: string;
let filename: string;
async function getFileHeadAndComponent() {
const res = await fetch(`/s/${slug}`,{method:"HEAD"});
contentType = res.headers.get("Content-Type");
let match;
while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (match.index === regex.lastIndex) {
regex.lastIndex++;
}
filename = match[1];
}
return getComponentForShare(contentType,filename);
}
</script>
<div class="dl">
<a href="/s/{slug}">Download</a>
</div>
<main>
{#await getFileHeadAndComponent()}
Loading data...
{:then v }
<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
{/await}
</main>
<style>
main {
display: flex;
justify-content: center;
padding-top: 5rem;
}
.dl {
top: 0;
right: 0;
position: absolute;
padding-top: 1rem;
padding-right: 1rem;
color: var(--color-secondary);
}
.dl a {
color: var(--color-secondary);
text-decoration: none;
}
</style>