Skip to content
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

Jump to bottom

File field: Drag and drop functionality for file upload #29872

Closed
Tracked by #29691
oidacra opened this issue Sep 4, 2024 · 5 comments · Fixed by #30135
Closed
Tracked by #29691

File field: Drag and drop functionality for file upload #29872

oidacra opened this issue Sep 4, 2024 · 5 comments · Fixed by #30135
Assignees
@dsilvam
Labels
Merged Next Release Bug Fixing NW Removed OKR : Core Features Owned by Will QA : Passed Internal Team : Falcon

Comments

@oidacra
Copy link
Member

oidacra commented Sep 4, 2024 •
edited
Loading

Parent Issue

#29691

Task

Develop the drag and drop functionality for file uploads in the enhanced File field. This should allow users to drag files from their local system and drop them into the field for immediate upload.

Proposed Objective

User Experience

Proposed Priority

Same as Parent Issue

Acceptance Criteria

  1. Users can drag files from their local system and drop them into the File field
  2. Visual feedback is provided when a file is being dragged over the drop area
  3. File upload process begins automatically when a file is dropped
  4. Error handling for invalid file types or upload failures
  5. Progress indicator for file uploads

Assumptions & Initiation Needs

  • Backend API for file uploads is available and documented
  • File type restrictions and size limits are defined
@oidacra oidacra mentioned this issue Sep 10, 2024
Open
@nicobytes nicobytes removed the Triage label Sep 18, 2024
@nicobytes nicobytes changed the title Develop drag and drop functionality for file upload File field: Develop drag and drop functionality for file upload Sep 18, 2024
@nicobytes nicobytes changed the title File field: Develop drag and drop functionality for file upload File field: Drag and drop functionality for file upload Sep 18, 2024
@nicobytes nicobytes self-assigned this Sep 18, 2024
nicobytes added a commit that referenced this issue Sep 23, 2024
@nicobytes
feat(editor-content): working on preview component #29872
fb7c358
nicobytes added a commit that referenced this issue Sep 25, 2024
@nicobytes
feat(editor-content): work on upload dotAsset #29872
52d1cf7
nicobytes added a commit that referenced this issue Sep 25, 2024
@nicobytes
feat(editor-content): apply format #29872
14866a2
@nicobytes nicobytes mentioned this issue Sep 25, 2024
Merged
3 tasks
@nicobytes nicobytes linked a pull request Sep 25, 2024 that will close this issue
feat(edit-content): drag and drop functionality #30135
Merged
3 tasks
nicobytes added a commit that referenced this issue Sep 25, 2024
@nicobytes
feat(editor-content): enable links #29872
15724e5
nicobytes added a commit that referenced this issue Sep 25, 2024
@nicobytes
feat(editor-content): working on preview for text files #29872
bd896c4
nicobytes added a commit that referenced this issue Sep 25, 2024
@nicobytes
feat(editor-content): remove contentlet #29872
89f8239
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): add jsdoc #29872
c0cb8bf
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): add unit tests to DotFileFieldUploadService #29872
3aad446
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): fix css error #29872
597b056
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): fix error with sonar #29872
e6a12ab
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): add unit tests to DotFileFieldPreviewComponent #…
5654d70 
…29872
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): add unit tests to DotFileFieldPreviewComponent #…
d84ea81 
…29872
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): fix unit tests #29872
4cbbfbb
nicobytes added a commit that referenced this issue Sep 26, 2024
@nicobytes
feat(editor-content): apply format #29872
b496933
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): fix sonar issue #29872
710f81a
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): add unit tests to DotUploadFileService #29872
25869cf
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): add unit tests to DotFileFieldUiMessageComponent …
a89e9e2 
…#29872
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): apply format #29872
38287eb
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): refactor upload asset #29872
b531157
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): refactor upload service #29872
6ffdd79
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): apply format #29872
274c6af
@nicobytes
Copy link
Contributor

nicobytes commented Sep 27, 2024 •
edited
Loading

QA Notes:

Create a new content type with File field.

Screenshot 2024-09-27 at 11 42 25 AM

Case 1: Responsive for large screens

Screenshot 2024-09-27 at 11 43 41 AM

Case 2: Responsive for small screens

Screenshot 2024-09-27 at 11 44 12 AM

Case 3: Upload files as dotAssets by dragging and dropping or clicking the "Choose File" button

2024-09-25.17-52-04.mp4

Case 4: Preview options: info, download and remove buttons

Large screens

Screenshot 2024-09-27 at 11 51 49 AM

Small screens

Screenshot 2024-09-27 at 11 52 16 AM

Case 5: For images should to show the dimensions

Screenshot 2024-09-27 at 11 47 59 AM

Case 6: For text files, to display a content preview

Screenshot 2024-09-27 at 11 53 51 AM

Case 7: For videos, a player should be displayed.

Screenshot 2024-09-27 at 11 54 47 AM

Case 8: When the content is saved and the user comes back, the file should have a proper preview.

Screenshot 2024-09-27 at 11 58 19 AM

nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): fix error with preview #29872
991f7ab
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): change id #29872
fb22f8f
github-merge-queue bot pushed a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(edit-content): drag and drop functionality (#30135)
b72fb24 
### Parent Issue

#29872 

### Proposed Changes
* Create new component for Image & File component
* Create new state to handle drag and drop functionality
* Work in Preview component
* Upload file as dotAsset

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Screenshots


https://github.com/user-attachments/assets/90f5deb2-a416-4e7f-bfcd-db68d9d51a76
@nicobytes nicobytes removed their assignment Sep 27, 2024
@dsilvam dsilvam self-assigned this Sep 27, 2024
@dsilvam
Copy link
Contributor

dsilvam commented Sep 27, 2024

Passed IQA:
Tested all the cases from the last comment.

Created a related issue #30182

@josemejias11
Copy link
Contributor

Failed: Tested on trunk_324de85, Docker, macOS 14.5, FF v126.0.1

Unable to drop multiple files at a time

Screen.Recording.2024-10-01.at.10.57.03.AM.mov

@oidacra
Copy link
Member Author

oidacra commented Oct 1, 2024

Removed 6. Support for multiple file uploads if dropped simultaneously. This field handles files one by one.

@josemejias11
Copy link
Contributor

Approved: Tested on trunk_324de85, Docker, macOS 14.5, FF v126.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dsilvam dsilvam

Labels
Merged Next Release Bug Fixing NW Removed OKR : Core Features Owned by Will QA : Passed Internal Team : Falcon
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(edit-content): drag and drop functionality dotCMS/core
4 participants
@dsilvam @oidacra @nicobytes @josemejias11