RocketChat / RocketChat/Rocket.Chat

[BUG] Drag And Drop Not Working For All File Formats

Open
#24,718 0 comments 0 reactions 0 assignees View on GitHub

@nishant23122000 is already working on this.

Since Mar 8, 2022.

  • #24733 by @nishant23122000 — open
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

Our platform supports the Drag and drops feature, where users can drag and simply drop files inside the room.

Steps to reproduce:
  1. Go To File section From top right file icon

image

  1. Drag And Drop Files except for the image.
  2. It will not drop file inside the room.
Expected behavior:

When users drag any format file, we should provide a dialog box to upload that file again as we do for images.
Like that :

https://user-images.githubusercontent.com/53515714/156992667-06bff1d7-c731-441e-ab17-629e2dcf89bd.mp4

Actual behavior:

Not able to drop other files except images.

When we drag from the files section,

https://user-images.githubusercontent.com/53515714/156992346-21f972b6-65a5-4a4a-915c-88341dbf5207.mp4

When we drag any file from the direct room,

https://user-images.githubusercontent.com/53515714/156992424-3cf37f13-23c2-496b-a0de-3d7f1e5b906e.mp4

Server Setup Information:
  • Version of Rocket.Chat Server: 4.5.0
  • Operating System: Windows 10
  • Deployment Method:
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version: 14.18.3
  • MongoDB Version: 4.4.4
Client Setup Information
  • Desktop App or Browser Version:
  • Operating System:
Additional context
Relevant logs:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the drag-and-drop flow from both the top-right Files section and a direct room, comparing image files with other formats. Start by tracing the frontend upload and drop entry points used by those two paths. Done means supported file formats can be dragged into a room and trigger the same upload dialog behavior described for images.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.