web/download: support downloading and sharing raw files

web/src/components/dialog/PickerItem.svelte

@@ -18,7 +18,13 @@
     $: itemType = item.type ?? "photo";
 </script>
 
-<button class="picker-item" on:click={() => downloadFile(item.url)}>
+<button
+    class="picker-item"
+    on:click={() =>
+        downloadFile({
+            url: item.url,
+        })}
+>
     <div class="picker-type">
         {#if itemType === "video"}
             <IconMovie />
@@ -32,11 +38,9 @@
     <img
         class="picker-image"
         src={item.thumb ?? item.url}
-
         class:loading={!imageLoaded}
         class:video-thumbnail={["video", "gif"].includes(itemType)}
-        on:load={() => imageLoaded = true}
-
+        on:load={() => (imageLoaded = true)}
         alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
     />
     <Skeleton class="picker-image elevated" hidden={imageLoaded} />

web/src/components/dialog/SavingDialog.svelte

@@ -2,7 +2,13 @@
     import { t } from "$lib/i18n/translations";
 
     import { device } from "$lib/device";
-    import { copyURL, openURL, shareURL } from "$lib/download";
+    import {
+        copyURL,
+        openURL,
+        shareURL,
+        openFile,
+        shareFile,
+    } from "$lib/download";
 
     import DialogContainer from "$components/dialog/DialogContainer.svelte";
 
@@ -17,9 +23,11 @@
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
     export let id: string;
-    export let url: string;
-    export let bodyText: string = "";
     export let dismissable = true;
+    export let bodyText: string = "";
+
+    export let url: string = "";
+    export let file: File | undefined = undefined;
 
     let close: () => void;
 
@@ -45,13 +53,20 @@
                     {$t("dialog.saving.title")}
                 </h2>
             </div>
+
             <div class="action-buttons">
                 {#if device.supports.directDownload}
                     <VerticalActionButton
                         id="save-download"
                         fill
                         elevated
-                        click={() => openURL(url)}
+                        click={() => {
+                            if (file) {
+                                return openFile(file);
+                            } else if (url) {
+                                return openURL(url);
+                            }
+                        }}
                     >
                         <IconDownload />
                         {$t("button.download")}
@@ -63,26 +78,34 @@
                         id="save-share"
                         fill
                         elevated
-                        click={async () => await shareURL(url)}
+                        click={async () => {
+                            if (file) {
+                                return await shareFile(file);
+                            } else if (url) {
+                                return await shareURL(url);
+                            }
+                        }}
                     >
                         <IconShare2 />
                         {$t("button.share")}
                     </VerticalActionButton>
                 {/if}
 
-                <VerticalActionButton
-                    id="save-copy"
-                    fill
-                    elevated
-                    click={async () => {
-                        copyURL(url);
-                        copied = true;
-                    }}
-                    ariaLabel={copied ? $t("button.copied") : ""}
-                >
-                    <CopyIcon check={copied} />
-                    {$t("button.copy")}
-                </VerticalActionButton>
+                {#if !file}
+                    <VerticalActionButton
+                        id="save-copy"
+                        fill
+                        elevated
+                        click={async () => {
+                            copyURL(url);
+                            copied = true;
+                        }}
+                        ariaLabel={copied ? $t("button.copied") : ""}
+                    >
+                        <CopyIcon check={copied} />
+                        {$t("button.copy")}
+                    </VerticalActionButton>
+                {/if}
             </div>
 
             {#if device.is.iOS}