lutra 0.1.0 → 0.1.4

package/dist/form/ImageUpload.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+    import { getContext, onMount, type Snippet } from 'svelte';
+    import type { AddBeforeSubmitFn } from './types.js';
+    import imageCompression from 'browser-image-compression';
+    import { fade } from 'svelte/transition';
+	import { addNotification } from "../components/notifications.svelte.js";
+
+    let {
+        src,
+        uploadUrl,
+        name,
+        id = `ImageUpload-${name}`,
+        title = name,
+        button,
+        maxSize = 256000,
+        compressSize = 0.5, // MB
+        compressMaxWidth = 512, // px
+        accept = 'image/png,image/svg+xml,image/jpg',
+        removable = false,
+        shape = 'square',
+        onFile,
+        children,
+    }: {
+        src?: string | null;
+        uploadUrl: string;
+        name: string;
+        id?: string;
+        title?: string;
+        button: string;
+        maxSize?: number;
+        compressSize?: number;
+        compressMaxWidth?: number;
+        accept?: string;
+        removable?: boolean;
+        shape?: 'square' | 'circle' | 'banner';
+        onFile?: (file: File) => void;
+        children?: Snippet;
+    } = $props();
+
+    let files: FileList | null = $state(null);
+    let el: HTMLElement | null = $state(null);
+    let urlEl: HTMLInputElement | null = $state(null);
+    let error: string | null = $state(null);
+    let resizeProgress = $state(0);
+    let uploadState: 'idle' | 'resizing' | 'uploading' = $state('idle');
+
+    const beforesubmit: AddBeforeSubmitFn = getContext('form.beforesubmit');
+
+    beforesubmit(id, async ({ data, cancel }) => {
+        if (!files || !files[0]) {
+            return;
+        }
+        try {
+            uploadState = 'resizing';
+            resizeProgress = 0;
+            const compressedFile = await imageCompression(files[0], {
+                maxSizeMB: compressSize,
+                maxWidthOrHeight: compressMaxWidth,
+                useWebWorker: true,
+                onProgress: (progress: number) => resizeProgress = progress,
+            });
+            console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
+            console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+            uploadState = 'uploading';
+
+            const response = await fetch(uploadUrl, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': files[0].type,
+                },
+                body: compressedFile,
+            });
+            uploadState = 'idle';
+            if(!response.ok) {
+                addNotification({ content: 'Something went wrong. Please try again.', autoClose: 3000 })
+                cancel();
+            }
+            //src = new URL(response.url).href.split('?')[0];
+            console.log('setting', name, new URL(response.url).href.split('?')[0]);
+            const imgUrl = new URL(response.url).href.split('?')[0];
+            data.set(name, imgUrl);
+            src = imgUrl;
+            console.log('response', response, response.url);
+            console.log('data', data.forEach((v, k) => console.log(k, v)));
+        } catch(err) {
+            console.error('error', err);
+            addNotification({ content: 'Something went wrong. Please try again.', autoClose: 3000 })
+            cancel();
+        }
+    });
+
+    function handleFile(event: Event) {
+        error = null;
+        const file = files ? files[0] : null;
+        if (file && file.type.startsWith('image/') && file.size < maxSize) {
+            if(onFile) onFile(file);
+            src = URL.createObjectURL(file);
+            /*
+            // show preview
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                if (e.target) {
+                    src = e.target.result as string;
+                    //dispatch('filedata', e.target.result);
+                }
+            };
+            reader.readAsDataURL(file);
+            */
+        }
+        else if(file && file.type.startsWith('image/') && file.size > maxSize) {
+            error = `Image must be less than ${maxSize/1024/1024}MB.`
+        }
+        else {
+            error = `File must be an image.`
+        }
+    }
+
+    function remove(e: MouseEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        src = '';
+        files = null;
+    }
+
+    function pick(e: MouseEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        el!.click();
+    }
+
+    let jsEnabled = $state(false);
+
+    onMount(() => {
+        jsEnabled = true;
+    });
+
+</script>
+
+<div class="ImageUpload {shape}">
+    <div class="Image" class:hasSrc={!!src}>
+        {#if src}
+            <img src={src} alt="{title} logo" />
+        {/if}
+        {#if uploadState !== 'idle'}
+            <div class="Loading" in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+                {#if uploadState === 'resizing'}
+                    <small>Resizing.. {resizeProgress}%</small>
+                {:else if uploadState === 'uploading'}
+                    <small>Uploading..</small>
+                {/if}
+            </div>
+        {/if}
+    </div>
+    <div class="ImageUploadActions" style="{!jsEnabled ? 'display: none;' : ''}">
+        {#if children}
+            <div class="description">
+                {@render children()}
+            </div>
+        {/if}
+        <button type="button" class="button outlined" onclick={pick}>
+            {button}
+        </button>
+        {#if removable && src}
+            <button type="button" class="button warn" onclick={remove}>
+                Remove
+            </button>
+        {/if}
+        {#if error}
+            <div class="error">
+                <small>{error}</small>
+            </div>
+        {/if}
+        <input
+            type="file"
+            {accept}
+            {id}
+            bind:files
+            onchange={handleFile}
+            bind:this={el}
+        />
+        <input type="hidden" {name} value={src} bind:this={urlEl} />
+    </div>
+    <noscript>
+        <small>Sorry, you need to enable Javascript to upload images.</small>
+    </noscript>
+</div>
+
+<style>
+    .ImageUpload {
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: center;
+        gap: 1rem;
+        container-type: inline-size;
+    }
+    .Image {
+        border: 1px solid var(--border-light);
+        pointer-events: none;
+        position: relative;
+        display: none;
+    }
+    .Image.hasSrc {
+        display: block;
+    }
+    .Image img {
+        display: block;
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+    .ImageUpload.square .Image img {
+        object-fit: cover;
+    }
+    .ImageUpload.circle .Image {
+        border-radius: 50%;
+        overflow: hidden;
+    }
+    .ImageUpload.circle .Image img {
+        object-fit: cover;
+    }
+    .placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+        padding: 1rem;
+        text-align: center;
+        border: 1px dashed var(--border-color);
+        border-radius: var(--border-radius);
+    }
+    .Loading {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        backdrop-filter: blur(5px);
+        background: var(--bg-overlay);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+    }
+    input {
+        display: none;
+    }
+    .error {
+        margin-top: 0.75rem;
+    }
+    .ImageUpload.banner {
+        grid-template-areas: "image";
+        width: 100%;
+    }
+    .ImageUpload.banner .Image {
+        height: 100%;
+        grid-area: image;
+        overflow: hidden;
+        object-fit: cover;
+        height: 15rem;
+        aspect-ratio: initial !important;
+    }
+    .ImageUpload.banner .Image img {
+        object-fit: cover;
+    }
+    .ImageUpload.banner .ImageUploadActions {
+        display: flex;
+        grid-area: image;
+        flex-direction: column;
+        justify-content: center;
+        padding: 1rem;
+    }
+    .ImageUpload.banner:hover .ImageUploadActions {
+        background: var(--bg-overlay);
+    }
+    .ImageUploadActions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+        align-items: start;
+    }
+    @container (min-width: 320px) {
+        .ImageUpload:not(.banner) {
+            grid-template-columns: minmax(auto, var(--max-image-width)) 1fr;
+            gap: 2rem;
+        }
+        .ImageUpload.banner .ImageUploadActions {
+            padding: 3rem;
+        }
+        .ImageUploadActions {
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+    }
+</style>

package/dist/form/ImageUpload.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    src?: string | null;
+    uploadUrl: string;
+    name: string;
+    id?: string;
+    title?: string;
+    button: string;
+    maxSize?: number;
+    compressSize?: number;
+    compressMaxWidth?: number;
+    accept?: string;
+    removable?: boolean;
+    shape?: 'square' | 'circle' | 'banner';
+    onFile?: (file: File) => void;
+    children?: Snippet;
+};
+declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;