[PR #15093] [MERGED] fix: refine folder component's drag-&-drop error handling #46761

New Issue

GiteaMirror · 2026-04-29T21:41:33-05:00

GiteaMirror commented

2026-04-29 21:41:33 -05:00

📋 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)

b120637 fix: 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:

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):

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):

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), 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):** ![image](https://github.com/user-attachments/assets/f0b2ddc1-382d-4874-985b-71eb9ca7c6d2) **Lighter gray area in chat sidebar (before fix applied):** ![image](https://github.com/user-attachments/assets/69965ee7-225e-4288-bbac-bb43b14e1507) **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>

GiteaMirror added the pull-request label 2026-04-29 21:41:33 -05:00

GiteaMirror closed this issue

2026-04-29 21:41:34 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#46761