lutra 0.0.33 → 0.1.4

package/dist/form/ImageUpload.svelte

@@ -1,99 +1,139 @@
-<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
+<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();
+        }
     });
-    uploadState = "idle";
-    if (!response.ok) {
-      addNotification({ content: "Something went wrong. Please try again.", autoClose: 3e3 });
-      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();
     }
-    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;
-});
+
+    let jsEnabled = $state(false);
+
+    onMount(() => {
+        jsEnabled = true;
+    });
+
 </script>
 
 <div class="ImageUpload {shape}">

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

@@ -1,15 +1,5 @@
 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<{
+type $$ComponentProps = {
     src?: string | null;
     uploadUrl: string;
     name: string;
@@ -21,11 +11,10 @@ declare const ImageUpload: $$__sveltets_2_IsomorphicComponent<{
     compressMaxWidth?: number;
     accept?: string;
     removable?: boolean;
-    shape?: "square" | "circle" | "banner";
+    shape?: 'square' | 'circle' | 'banner';
     onFile?: (file: File) => void;
     children?: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ImageUpload = InstanceType<typeof ImageUpload>;
+};
+declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
 export default ImageUpload;