Before submitting, make sure you've checked the following:
Target branch: Please verify that the pull request targets the dev branch.
Description: Provide a concise description of the changes made in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests to validate the changes?
Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
Prefix: To clearly categorize this pull request, prefix the pull request title using one of the following:
BREAKING CHANGE: Significant changes that may affect compatibility
build: Changes that affect the build system or external dependencies
ci: Changes to our continuous integration processes or workflows
chore: Refactor, cleanup, or other non-functional code changes
docs: Documentation update or addition
feat: Introduces a new feature or enhancement to the codebase
fix: Bug fix or error correction
i18n: Internationalization or localization changes
perf: Performance improvement
refactor: Code restructuring for better maintainability, readability, or scalability
style: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
test: Adding missing tests or correcting existing tests
WIP: Work in progress, a temporary label for incomplete or ongoing work
Changelog Entry
Description
This pull request addresses an issue where dropping non-JSON data onto the Folder component (e.g., in the chat sidebar) would lead to SyntaxError: JSON.parse: unexpected character being logged in the console. Although the error was caught and didn't crash the application, the changes refine the drag-and-drop handling to gracefully ignore non-JSON text/plain data without logging errors, improving the developer experience.
Changed
Refactored the onDrop event handler in Folder.svelte to specifically handle cases where e.dataTransfer.getData('text/plain') might not be valid JSON or might be empty.
Changed console.error to console.log for expected SyntaxError when dropped text/plain data is not JSON, reducing console noise for non-pertinent drops.
Added a check if (dataTransfer) before attempting JSON.parse to prevent parsing empty strings.
Ensured draggedOver state is consistently reset to false in the non-file drop path, regardless of parsing success or failure.
folderElement.addEventListener('dragover', onDragOver); changed to folderElement.removeEventListener('dragover', onDragOver);.
Fixed
Fixed the issue where SyntaxError: JSON.parse: unexpected character was logged in the console when non-JSON data was dropped onto the Folder component. The component now gracefully handles such drops without error logs.
This PR fixes the following browser console error (LibreWolf):
This change specifically targets a user experience improvement for developers by cleaning up console output during drag-and-drop interactions where unexpected data types are involved. It does not alter the core functionality of how valid JSON files or text/plain JSON data are processed.
Related to visual bug where the chat sidebar remained greyed out due to draggedOver not always being reset, although the primary focus of this PR is console noise. The draggedOver reset logic was also improved.
Screenshots or Videos
Browser console error (before fix applied):
Lighter gray area in chat sidebar (before fix applied):
By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/15093
**Author:** [@silentoplayz](https://github.com/silentoplayz)
**Created:** 6/18/2025
**Status:** ✅ Merged
**Merged:** 6/18/2025
**Merged by:** [@tjbck](https://github.com/tjbck)
**Base:** `dev` ← **Head:** `fix-sidebar-drag-and-drop`
---
### 📝 Commits (1)
- [`b120637`](https://github.com/open-webui/open-webui/commit/b120637127e03a550a39ae07dbdb4341593e3bc9) fix: refine folder component's drag-&-drop error handling
### 📊 Changes
**1 file changed** (+17 additions, -7 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/common/Folder.svelte` (+17 -7)
</details>
### 📄 Description
# Pull Request Checklist
**Before submitting, make sure you've checked the following:**
- [x] **Target branch:** Please verify that the pull request targets the `dev` branch.
- [x] **Description:** Provide a concise description of the changes made in this pull request.
- [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description.
- [x] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources?
- [x] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation?
- [x] **Testing:** Have you written and run sufficient tests to validate the changes?
- [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
- [x] **Prefix:** To clearly categorize this pull request, prefix the pull request title using one of the following:
- **BREAKING CHANGE**: Significant changes that may affect compatibility
- **build**: Changes that affect the build system or external dependencies
- **ci**: Changes to our continuous integration processes or workflows
- **chore**: Refactor, cleanup, or other non-functional code changes
- **docs**: Documentation update or addition
- **feat**: Introduces a new feature or enhancement to the codebase
- **fix**: Bug fix or error correction
- **i18n**: Internationalization or localization changes
- **perf**: Performance improvement
- **refactor**: Code restructuring for better maintainability, readability, or scalability
- **style**: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
- **test**: Adding missing tests or correcting existing tests
- **WIP**: Work in progress, a temporary label for incomplete or ongoing work
# Changelog Entry
### Description
- This pull request addresses an issue where dropping non-JSON data onto the `Folder` component (e.g., in the chat sidebar) would lead to `SyntaxError: JSON.parse: unexpected character` being logged in the console. Although the error was caught and didn't crash the application, the changes refine the drag-and-drop handling to gracefully ignore non-JSON `text/plain` data without logging errors, improving the developer experience.
### Changed
- Refactored the `onDrop` event handler in `Folder.svelte` to specifically handle cases where `e.dataTransfer.getData('text/plain')` might not be valid JSON or might be empty.
- Changed `console.error` to `console.log` for expected `SyntaxError` when dropped `text/plain` data is not JSON, reducing console noise for non-pertinent drops.
- Added a check `if (dataTransfer)` before attempting `JSON.parse` to prevent parsing empty strings.
- Ensured `draggedOver` state is consistently reset to `false` in the non-file drop path, regardless of parsing success or failure.
- `folderElement.addEventListener('dragover', onDragOver);` changed to `folderElement.removeEventListener('dragover', onDragOver);`.
### Fixed
- Fixed the issue where `SyntaxError: JSON.parse: unexpected character` was logged in the console when non-JSON data was dropped onto the `Folder` component. The component now gracefully handles such drops without error logs.
- This PR fixes the following browser console error (LibreWolf):
```js
SES_UNCAUGHT_EXCEPTION: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
L Folder.svelte:74
lI Folder.svelte:98
J utils.js:41
_t Component.js:47
_t scheduler.js:99
promise callback*ut scheduler.js:20
ht Component.js:81
ctx Component.js:139
Eo +layout.svelte:637
J utils.js:41
_t Component.js:47
_t scheduler.js:99
Rt Component.js:164
wt root.svelte:23
ft client.js:472
ee client.js:1580
Ce client.js:398
An client.js:1926
$n client.js:323
async* (index):130
promise callback* (index):129
lockdown-install.js:1:138390
<anonymous> lockdown-install.js:1
(Async: EventListener.handleEvent)
lI Folder.svelte:98
J utils.js:41
_t Component.js:47
_t scheduler.js:99
(Async: promise callback)
ut scheduler.js:20
ht Component.js:81
ctx Component.js:139
Eo +layout.svelte:637
J utils.js:41
_t Component.js:47
_t scheduler.js:99
Rt Component.js:164
wt root.svelte:23
ft client.js:472
ee client.js:1580
Ce client.js:398
An client.js:1926
$n client.js:323
<anonymous> (index):130
(Async: promise callback)
<anonymous> (index):129
```
---
### Additional Information
- This change specifically targets a user experience improvement for developers by cleaning up console output during drag-and-drop interactions where unexpected data types are involved. It does not alter the core functionality of how valid JSON files or `text/plain` JSON data are processed.
- Related to visual bug where the chat sidebar remained greyed out due to `draggedOver` not always being reset, although the primary focus of this PR is console noise. The `draggedOver` reset logic was also improved.
### Screenshots or Videos
**Browser console error (before fix applied):**
**Lighter gray area in chat sidebar (before fix applied):**
**Browser console.log (after fix applied):**
```js
Dropped on the Button
Dropped data is not valid JSON text or is empty. Ignoring drop event for this type of data.
```
### Contributor License Agreement
By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/15093
Author: @silentoplayz
Created: 6/18/2025
Status: ✅ Merged
Merged: 6/18/2025
Merged by: @tjbck
Base:
dev← Head:fix-sidebar-drag-and-drop📝 Commits (1)
b120637fix: refine folder component's drag-&-drop error handling📊 Changes
1 file changed (+17 additions, -7 deletions)
View changed files
📝
src/lib/components/common/Folder.svelte(+17 -7)📄 Description
Pull Request Checklist
Before submitting, make sure you've checked the following:
devbranch.Changelog Entry
Description
Foldercomponent (e.g., in the chat sidebar) would lead toSyntaxError: JSON.parse: unexpected characterbeing logged in the console. Although the error was caught and didn't crash the application, the changes refine the drag-and-drop handling to gracefully ignore non-JSONtext/plaindata without logging errors, improving the developer experience.Changed
onDropevent handler inFolder.svelteto specifically handle cases wheree.dataTransfer.getData('text/plain')might not be valid JSON or might be empty.console.errortoconsole.logfor expectedSyntaxErrorwhen droppedtext/plaindata is not JSON, reducing console noise for non-pertinent drops.if (dataTransfer)before attemptingJSON.parseto prevent parsing empty strings.draggedOverstate is consistently reset tofalsein the non-file drop path, regardless of parsing success or failure.folderElement.addEventListener('dragover', onDragOver);changed tofolderElement.removeEventListener('dragover', onDragOver);.Fixed
SyntaxError: JSON.parse: unexpected characterwas logged in the console when non-JSON data was dropped onto theFoldercomponent. The component now gracefully handles such drops without error logs.Additional Information
text/plainJSON data are processed.draggedOvernot always being reset, although the primary focus of this PR is console noise. ThedraggedOverreset logic was also improved.Screenshots or Videos
Browser console error (before fix applied):
Lighter gray area in chat sidebar (before fix applied):
Browser console.log (after fix applied):
Contributor License Agreement
By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.