Skip to content

fix: enable file upload for push notifications #2679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ItzNotABug merged 3 commits into from
Dec 10, 2025
Merged

fix: enable file upload for push notifications #2679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44898e5
enable file upload for push notifications
HarshMN2345 Dec 7, 2025
1503e21
addressed comments
HarshMN2345 Dec 7, 2025
04a7ef0
Update src/lib/elements/forms/inputFilePicker.svelte
HarshMN2345 Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/lib/components/filePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
import { IconInfo, IconPlus, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
import { showCreateBucket } from '$routes/(console)/project-[region]-[project]/storage/+page.svelte';
import { preferences } from '$lib/stores/preferences';
import { addNotification } from '$lib/stores/notifications';

export let show: boolean;
export let mimeTypeQuery: string = 'image/';
Expand Down Expand Up @@ -110,7 +111,10 @@
}
selectFile(file);
} catch (e) {
console.error(e);
addNotification({
type: 'error',
message: e.message
});
} finally {
uploading = false;
}
Expand Down Expand Up @@ -351,7 +355,9 @@
<Layout.Stack gap="l">
<Typography.Title size="s" color="--fgcolor-neutral-primary"
>{localFileBucketTitle}</Typography.Title>
<Upload.Dropzone bind:files={localFile} extensions={[allowedExtension]}>
<Upload.Dropzone
bind:files={localFile}
extensions={allowedExtension === '*' ? undefined : [allowedExtension]}>
Comment on lines +358 to +360
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Find the filePicker.svelte file and read the relevant sections
fd filePicker.svelte --type f

Repository: appwrite/console

Length of output: 96

🏁 Script executed:

# Read the filePicker.svelte file to see the relevant sections
cat -n src/lib/components/filePicker.svelte | sed -n '350,390p'

Repository: appwrite/console

Length of output: 2850

🏁 Script executed:

# Get the full file to understand context
wc -l src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 100

🏁 Script executed:

# Read the relevant sections of filePicker.svelte
head -n 400 src/lib/components/filePicker.svelte | tail -n +330

Repository: appwrite/console

Length of output: 4221

🏁 Script executed:

# Search for allowedExtension in the file to understand its format
rg 'allowedExtension' src/lib/components/filePicker.svelte -n -C 3

Repository: appwrite/console

Length of output: 2158

🏁 Script executed:

# Look for Upload.Dropzone in the codebase to find the component definition
find . -type f -name "*.svelte" -o -name "*.ts" -o -name "*.tsx" -o -name "*.js" | xargs rg "Upload\s*[\{\.]\s*Dropzone" -l

Repository: appwrite/console

Length of output: 973

🏁 Script executed:

# Check imports in filePicker.svelte to understand where Upload comes from
head -n 50 src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 2075

🏁 Script executed:

# Search for Upload imports in the file
rg "import.*Upload" src/lib/components/filePicker.svelte -A 2 -B 2

Repository: appwrite/console

Length of output: 42

🏁 Script executed:

# Let's read the first 100 lines to see imports
sed -n '1,100p' src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 3657

🌐 Web query:

@appwrite.io/pink-svelte Upload.Dropzone extensions prop format documentation

💡 Result:

I couldn't find official documentation for a pink-svelte Upload.Dropzone "extensions" prop at the URL you gave. Can you paste the exact page/repo link or a screenshot (or say whether you mean Appwrite's Pink UI repo or a different package)? I can then look up the exact prop format and examples.

🏁 Script executed:

# Read more of the filePicker file, especially around the relevant lines
sed -n '350,400p' src/lib/components/filePicker.svelte | cat -n

Repository: appwrite/console

Length of output: 3424

🏁 Script executed:

# Get a wider view of the file context
sed -n '1,20p' src/lib/components/filePicker.svelte && echo "---" && sed -n '340,395p' src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 4024

🏁 Script executed:

# Let's check the entire filePicker.svelte structure - maybe smaller sections
head -n 30 src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 1034

🏁 Script executed:

# Find all Svelte files in lib/components to understand the structure
ls -la src/lib/components/ | head -20

Repository: appwrite/console

Length of output: 1328

🏁 Script executed:

# Search for filePicker in all formats
find src/lib/components -name "*ilePicker*" -o -name "*file*icker*"

Repository: appwrite/console

Length of output: 96

🏁 Script executed:

# List all files in src/lib/components recursively
find src/lib/components -type f -name "*.svelte" | grep -i file

Repository: appwrite/console

Length of output: 96

🏁 Script executed:

# Get all svelte files in components
find src/lib/components -type f -name "*.svelte"

Repository: appwrite/console

Length of output: 7376

🏁 Script executed:

# Search for filePicker across the entire repo
find . -type f -name "*filePicker*"

Repository: appwrite/console

Length of output: 98

🏁 Script executed:

# Search for PascalCase FilePicker
find . -type f -name "*FilePicker*"

Repository: appwrite/console

Length of output: 107

🏁 Script executed:

# Use git to find the file
git ls-files | grep -i filepicker

Repository: appwrite/console

Length of output: 142

🏁 Script executed:

# Try searching for the Upload.Dropzone reference instead
rg "Upload\.Dropzone" --type svelte

Repository: appwrite/console

Length of output: 90

🏁 Script executed:

# Search more broadly for Upload.Dropzone
rg "Upload\.Dropzone"

Repository: appwrite/console

Length of output: 2479

🏁 Script executed:

# Try searching for Upload component imports
rg "from.*Upload" --type svelte --type ts --type tsx

Repository: appwrite/console

Length of output: 90

🏁 Script executed:

# Check the structure of the repo
ls -la

Repository: appwrite/console

Length of output: 2027

🏁 Script executed:

# List src directory
ls -la src/

Repository: appwrite/console

Length of output: 662

🏁 Script executed:

# Check if src/lib/components exists and its contents
ls -la src/lib/components/ 2>/dev/null || echo "Directory not found"

Repository: appwrite/console

Length of output: 7661

🏁 Script executed:

# Try to find if lib exists somewhere
find . -type d -name "components" 2>/dev/null | head -5

Repository: appwrite/console

Length of output: 410

🏁 Script executed:

# Get the full file structure of src
find src -type f | head -20

Repository: appwrite/console

Length of output: 579

🏁 Script executed:

# Check if the file path from the review exists
test -f "src/lib/components/filePicker.svelte" && echo "File exists" || echo "File not found"

Repository: appwrite/console

Length of output: 71

🏁 Script executed:

# Maybe case sensitive - try different variations
find . -iname "*filepicker*" -type f

Repository: appwrite/console

Length of output: 146

🏁 Script executed:

# Check git status to see what files are in the repo
git ls-files | head -30

Repository: appwrite/console

Length of output: 662

🏁 Script executed:

# Check package.json for @appwrite.io/pink-svelte version and dependencies
grep -A 5 -B 5 "pink-svelte" package.json

Repository: appwrite/console

Length of output: 666

🏁 Script executed:

# Search for any other Upload.Dropzone usages with extensions prop to understand the pattern
rg "extensions\s*=" src/ -A 1 -B 1

Repository: appwrite/console

Length of output: 4495

🏁 Script executed:

# Look at package.json to understand dependencies
cat package.json

Repository: appwrite/console

Length of output: 3596

🌐 Web query:

@appwrite.io/pink-svelte Upload Dropzone extensions prop expected format with/without dot

💡 Result:

Short answer: use the leading dot (e.g. ".png", ".jpg"). This follows the HTML file input/accept spec and how Dropzone-style components commonly expect extensions. [1][2]

Sources

  • MDN: input accept attribute — filename extensions must start with a period (e.g. ".jpg"). [1]
  • Example Dropzone docs showing accept object using extensions with leading dots (e.g. ['.png']). [2]

🏁 Script executed:

# Check if there's a node_modules or any documentation
find . -name "*.md" -type f | xargs grep -l "Upload.Dropzone\|extensions" 2>/dev/null | head -5

Repository: appwrite/console

Length of output: 42

🏁 Script executed:

# Let's check the specific code paths where allowedExtension is passed and used
# Look at the storage bucket creation page where extensions is also used
sed -n '1,50p' src/routes/\(console\)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte | head -30

Repository: appwrite/console

Length of output: 1356

🏁 Script executed:

# Search for Upload.Dropzone with extensions in that file
rg "Upload.Dropzone" "src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte" -A 10 -B 2

Repository: appwrite/console

Length of output: 927

🏁 Script executed:

# Get the full context of how allowedExtension is used through the component
# Check what the line 211 context shows about extension format
sed -n '200,220p' src/lib/components/filePicker.svelte

Repository: appwrite/console

Length of output: 714

Normalize extension format with leading dots and clarify wildcard notation in tooltip

The extensions prop should use leading dots per HTML input standards (e.g., ['.json'] instead of ['json']). Update line 361:

-            extensions={allowedExtension === '*' ? undefined : [allowedExtension]}>
+            extensions={allowedExtension === '*' ? undefined : [`.${allowedExtension}`]}>

Also improve the tooltip clarity at lines 380-382 to explicitly show wildcard notation:

-    {allowedExtension === '*'
-        ? `${mimeTypeQuery} files are allowed`
-        : `${allowedExtension} files are allowed`}
+    {allowedExtension === '*'
+        ? `${mimeTypeQuery}* files are allowed`
+        : `${allowedExtension} files are allowed`}

This aligns with Upload.Dropzone expectations and gives users a clearer view of wildcard filtering (e.g., "image/*").

Also applies to: 380-382

🤖 Prompt for AI Agents 
In src/lib/components/filePicker.svelte around lines 359-361 and 380-382, the
Upload.Dropzone extensions prop and its tooltip need updating: normalize
allowedExtension so when it's '*' you pass undefined, otherwise pass an array
with a leading dot (e.g., ['.json']) — implement a small normalization (prepend
'.' if missing) before passing to extensions; and update the tooltip text at
380-382 to explicitly show wildcard notation (for example "image/*" or
"video/*") and explain that '*' will be treated as no restriction, so users see
the exact format expected.

<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack
Expand All @@ -370,7 +376,9 @@
<Icon icon={IconInfo} size="s" />
</Layout.Stack>
<svelte:fragment slot="tooltip"
>{allowedExtension} files are allowed</svelte:fragment>
>{allowedExtension === '*'
? `${mimeTypeQuery} files are allowed`
: `${allowedExtension} files are allowed`}</svelte:fragment>
</Tooltip>
</Layout.Stack>
<Typography.Caption variant="400"
Expand Down
11 changes: 10 additions & 1 deletion src/lib/elements/forms/inputFilePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
export let optionalText: string = null;
export let tooltip: string = null;
export let isPopoverDefined = true;
export let mimeTypeQuery: string = 'image/';
export let allowedExtension: string = '*';

let show = false;

Expand Down Expand Up @@ -93,5 +95,12 @@
</div>

{#if show}
<FilePicker selectedFile={value?.$id} selectedBucket={value?.bucketId} bind:show {onSelect} />
<FilePicker
selectedFile={value?.$id}
selectedBucket={value?.bucketId}
bind:show
{onSelect}
showLocalFileBucket
{mimeTypeQuery}
{allowedExtension} />
{/if}