pr comments

packages/backend-core/src/objectStore/buckets/app.ts

@@ -56,7 +56,7 @@ export async function getAppFileUrl(s3Key: string) {
 export async function enrichPWAImages(
   images: PWAManifestImage[]
 ): Promise<PWAManifestImage[]> {
-  if (!images || images.length === 0) {
+  if (images.length === 0) {
     return []
   }
 

packages/bbui/src/Form/Core/File.svelte

@@ -6,10 +6,8 @@
 
   const BYTES_IN_MB = 1000000
 
-  export let value:
-    | File
-    | { name: string; type: string; size?: number }
-    | undefined = undefined
+  export let value: File | undefined = undefined
+  export let statusText: string | undefined = undefined
   export let title: string = "Upload file"
   export let disabled: boolean = false
   export let allowClear: boolean | undefined = undefined
@@ -60,7 +58,16 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="field">
-  {#if value}
+  {#if statusText}
+    <div class="file-view status">
+      <div class="filename">{statusText}</div>
+      {#if !disabled || (allowClear === true && disabled)}
+        <div class="delete-button" on:click={clearFile}>
+          <Icon name="Close" size="XS" />
+        </div>
+      {/if}
+    </div>
+  {:else if value}
     <div class="file-view">
       {#if previewUrl}
         <img class="preview" alt="" src={previewUrl} />
@@ -100,6 +107,9 @@
     border-radius: var(--spectrum-global-dimension-size-50);
     padding: 0px var(--spectrum-alias-item-padding-m);
   }
+  .file-view.status {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
   input[type="file"] {
     display: none;
   }

packages/bbui/src/Form/File.svelte

@@ -12,8 +12,8 @@
   export let extensions: string[] | undefined = undefined
   export let error: string | undefined = undefined
   export let title: string | undefined = undefined
-  export let value: File | { name: string; type: string } | undefined =
-    undefined
+  export let value: File | undefined = undefined
+  export let statusText: string | undefined = undefined
   export let tooltip: string | undefined = undefined
   export let helpText: string | undefined = undefined
 
@@ -30,6 +30,7 @@
     {allowClear}
     {title}
     {value}
+    {statusText}
     {previewUrl}
     {handleFileTooLarge}
     {extensions}

packages/builder/src/pages/builder/app/[application]/settings/pwa.svelte

@@ -41,12 +41,7 @@
   }
 
   $: iconCount = pwaConfig.icons?.length || 0
-  $: iconFileDisplay = iconCount
-    ? {
-        name: `${iconCount} icons uploaded`,
-        type: "file",
-      }
-    : undefined
+  $: iconStatusText = iconCount ? `${iconCount} icons uploaded` : undefined
 
   function getCssVariableValue(cssVar: string) {
     try {
@@ -69,7 +64,10 @@
   }
 
   async function handlePWAZip(file: File) {
-    if (!file) return
+    if (!file) {
+      notifications.error("No file selected")
+      return
+    }
 
     try {
       uploadingIcons = true
@@ -196,7 +194,7 @@
               notifications.error("File too large. 20mb limit")}
             extensions={[".zip"]}
             on:change={e => e.detail && handlePWAZip(e.detail)}
-            value={iconFileDisplay}
+            statusText={iconStatusText}
             disabled={!pwaEnabled || uploadingIcons}
           />
         </div>