fix: enable file upload for push notifications #2679
Conversation
Console (appwrite/console)Project ID: Tip Build commands execute in runtime containers during deployment |
WalkthroughAdded two props to inputFilePicker.svelte: mimeTypeQuery (default "image/") and allowedExtension (default "") and forwarded them to FilePicker. In filePicker.svelte, Upload.Dropzone extensions is now undefined when allowedExtension === "" or an array containing the single extension otherwise. The dropzone tooltip content is conditional: shows a mimeTypeQuery-based message when allowedExtension is "*" or the specific extension otherwise. On upload errors, console.error(e) was replaced with addNotification({ type: 'error', message: e.message }). Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)**/*.{ts,tsx,js,jsx,svelte}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx,svelte,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.svelte📄 CodeRabbit inference engine (AGENTS.md)
Files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
src/lib/components/filePicker.svelte
Outdated
| } | ||
| selectFile(file); | ||
| } catch (e) { | ||
| console.error(e); |
src/lib/components/filePicker.svelte
Outdated
| console.error(e); | ||
| addNotification({ | ||
| type: 'error', | ||
| message: e.message || 'Failed to upload file' |
There was a problem hiding this comment.
there will always be a message from AppwriteException. No need for a fallback.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/components/filePicker.svelte (1)
238-238:acceptvalue is likely incorrect whenallowedExtension === '*'The
extensionvariable becomesmimeTypeQuerydirectly whenallowedExtension === '*', so with the defaultmimeTypeQuery = 'image/', the<input accept={extension}>attribute is set toaccept="image/". This is not a valid browser accept pattern according to HTML5 specifications—valid wildcard patterns require an asterisk (e.g.,image/*). The invalid pattern may cause the browser file picker to ignore the filter or behave inconsistently.Consider deriving a proper accept pattern for the input case:
- $: extension = allowedExtension === '*' ? mimeTypeQuery : `.${allowedExtension}`; + $: extension = + allowedExtension === '*' + ? `${mimeTypeQuery}*` // e.g. "image/*" + : `.${allowedExtension}`;This keeps
mimeTypeQueryas‑is for queries while ensuring the file input constraint conforms to the HTML5 standard.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/lib/components/filePicker.svelte(4 hunks)src/lib/elements/forms/inputFilePicker.svelte(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx,svelte}: Import reusable modules from the src/lib directory using the $lib alias
Use minimal comments in code; reserve comments for TODOs or complex logic explanations
Use $lib, $routes, and $themes aliases instead of relative paths for module imports
Files:
src/lib/elements/forms/inputFilePicker.sveltesrc/lib/components/filePicker.svelte
**/*.{ts,tsx,js,jsx,svelte,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use 4 spaces for indentation, single quotes, 100 character line width, and no trailing commas per Prettier configuration
Files:
src/lib/elements/forms/inputFilePicker.sveltesrc/lib/components/filePicker.svelte
**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development
Files:
src/lib/elements/forms/inputFilePicker.sveltesrc/lib/components/filePicker.svelte
src/lib/components/**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Use PascalCase for component file names and place them in src/lib/components/[feature]/ directory structure
Files:
src/lib/components/filePicker.svelte
🧠 Learnings (1)
📓 Common learnings
Learnt from: CR
Repo: appwrite/console PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:15:27.539Z
Learning: Applies to **/*.svelte : Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: e2e
- GitHub Check: build
🔇 Additional comments (3)
src/lib/elements/forms/inputFilePicker.svelte (1)
15-16: Prop defaults and wiring look consistent withfilePicker.svelte
mimeTypeQuery/allowedExtensionare sensibly defaulted and correctly forwarded to<FilePicker>, keepingshowLocalFileBucket={true}and existing bindings/handlers intact. This should be backwards compatible for existing usages that rely on images as the default.Also applies to: 98-105
src/lib/components/filePicker.svelte (2)
36-36: Good addition of user-facing error notification on upload failureImporting
addNotificationand surfacing an error whenuploadFile()fails improves UX and debuggability, while keeping the existingconsole.errorfor dev insight.If your TS config enables
useUnknownInCatchVariables, you may want to narrowefirst to avoid type errors and safely handle non-Errorthrows, for example:const message = e instanceof Error ? e.message : 'Failed to upload file'; addNotification({ type: 'error', message });Also applies to: 115-118
205-212: Query logic for mime vs extension filtering is reasonable
getProperQuery()switching betweenQuery.startsWith('mimeType', mimeTypeQuery)whenallowedExtension === '*'andQuery.endsWith('name', \.${allowedExtension}`)` otherwise is a clear, simple way to support both mime-based and extension-based filtering without complicating the API.Please sanity‑check that the backend consistently stores
mimeTypevalues prefixed withmimeTypeQuery(e.g.image/pngforimage/), and that filenames always contain the expected.${allowedExtension}suffix, especially for existing buckets.
| <Upload.Dropzone | ||
| bind:files={localFile} | ||
| extensions={allowedExtension === '*' ? undefined : [allowedExtension]}> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find the filePicker.svelte file and read the relevant sections
fd filePicker.svelte --type fRepository: 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.svelteRepository: 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 +330Repository: 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 3Repository: 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" -lRepository: 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.svelteRepository: 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 2Repository: 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.svelteRepository: 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 -nRepository: 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.svelteRepository: 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.svelteRepository: 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 -20Repository: 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 fileRepository: 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 filepickerRepository: appwrite/console
Length of output: 142
🏁 Script executed:
# Try searching for the Upload.Dropzone reference instead
rg "Upload\.Dropzone" --type svelteRepository: 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 tsxRepository: appwrite/console
Length of output: 90
🏁 Script executed:
# Check the structure of the repo
ls -laRepository: 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 -5Repository: appwrite/console
Length of output: 410
🏁 Script executed:
# Get the full file structure of src
find src -type f | head -20Repository: 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 fRepository: appwrite/console
Length of output: 146
🏁 Script executed:
# Check git status to see what files are in the repo
git ls-files | head -30Repository: 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.jsonRepository: 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 1Repository: appwrite/console
Length of output: 4495
🏁 Script executed:
# Look at package.json to understand dependencies
cat package.jsonRepository: 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 -5Repository: 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 -30Repository: 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 2Repository: 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.svelteRepository: 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.
Co-authored-by: Darshan <itznotabug@gmail.com>
ItzNotABug
deleted the
fix-SER-468-file-upload-for-push-notifications
branch
What does this PR do?
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.