lutra 0.0.20 → 0.0.33

package/dist/form/ImageUpload.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">import { getContext, onMount } from "svelte";
+import imageCompression from "browser-image-compression";
+import { fade } from "svelte/transition";
+import { addNotification } from "../display/index.js";
+let {
+  src,
+  uploadUrl,
+  name,
+  id = `ImageUpload-${name}`,
+  title = name,
+  button,
+  maxSize = 256e3,
+  compressSize = 0.5,
+  // MB
+  compressMaxWidth = 512,
+  // px
+  accept = "image/png,image/svg+xml,image/jpg",
+  removable = false,
+  shape = "square",
+  onFile,
+  children
+} = $props();
+let files = $state(null);
+let el = $state(null);
+let urlEl = $state(null);
+let error = $state(null);
+let resizeProgress = $state(0);
+let uploadState = $state("idle");
+const beforeSubmit = 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) => resizeProgress = progress
+    });
+    console.log("compressedFile instanceof Blob", compressedFile instanceof Blob);
+    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`);
+    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: 3e3 });
+      cancel();
+    }
+    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: 3e3 });
+    cancel();
+  }
+});
+function handleFile(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);
+  } 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) {
+  e.preventDefault();
+  e.stopPropagation();
+  src = "";
+  files = null;
+}
+function pick(e) {
+  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,31 @@
+import { type Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const ImageUpload: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ImageUpload = InstanceType<typeof ImageUpload>;
+export default ImageUpload;