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

Image Field: Drag and drop functionality for image upload #30059

Closed
Tracked by #29692
nicobytes opened this issue Sep 18, 2024 · 3 comments · Fixed by #30184
Closed
Tracked by #29692

Image Field: Drag and drop functionality for image upload #30059

nicobytes opened this issue Sep 18, 2024 · 3 comments · Fixed by #30184
Assignees
@hmoreras
Labels
OKR : Core Features Owned by Will QA : Approved QA : Passed Internal Release : 24.10.02 Bug Fixing Team : Falcon

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Sep 18, 2024 •
edited
Loading

Parent Issue

#29692

Task

Develop the drag and drop functionality for file uploads in the enhanced Image 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
@nicobytes nicobytes mentioned this issue Sep 18, 2024
Open
@nicobytes nicobytes changed the title Image Field: Drag and Drop or Choose file Image Field: Drag and drop functionality for file upload Sep 18, 2024
@nicobytes nicobytes changed the title Image Field: Drag and drop functionality for file upload Image Field: Drag and drop functionality for image upload Sep 18, 2024
@nicobytes nicobytes self-assigned this Sep 24, 2024
@nicobytes nicobytes removed the Triage label Sep 24, 2024
nicobytes added a commit that referenced this issue Sep 27, 2024
@nicobytes
feat(editor-content): add unit tests to file field store #30059
feb9fbb
@nicobytes nicobytes linked a pull request Sep 27, 2024 that will close this issue
feat(editor-content): add unit tests to file field store #30059 #30184
Merged
3 tasks
nicobytes added a commit that referenced this issue Sep 30, 2024
@nicobytes
feat(editor-content): add testing cases #30059
5a356cf
@nicobytes nicobytes mentioned this issue Sep 30, 2024
Merged
3 tasks
nicobytes added a commit that referenced this issue Sep 30, 2024
@nicobytes
feat(editor-content): apply feedback #30059
0e7199a
@nicobytes
Copy link
Contributor Author

nicobytes commented Sep 30, 2024 •
edited
Loading

QA Notes:

Create a new content type with File field.

Screenshot 2024-09-30 at 1 25 50 PM

Case 1: Upload files as dotAssets by dragging and dropping or by clicking the "Choose File" button "ONLY Images are allowed".

2024-09-30.12-52-44.mp4

Case 2: Should display a message when the user tries to drag and drop a non-image.

Screenshot 2024-09-30 at 1 27 44 PM

Case 3: If the user uses the button, the allowed files should be images.

Screenshot 2024-09-30 at 1 28 33 PM

github-merge-queue bot pushed a commit that referenced this issue Sep 30, 2024
@nicobytes
feat(editor-content): add unit tests to file field store #30059 (#30184)
ec4a905 
### Parent Issue

#30059 

### Proposed Changes
* Add more unit tests
* Cases for Image field

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

### Screenshots


https://github.com/user-attachments/assets/b46c6f97-2dfa-4da2-9710-200ce3396600
@hmoreras hmoreras assigned hmoreras and unassigned nicobytes Sep 30, 2024
@hmoreras
Copy link
Contributor

pass internal. show errors when is not an image (pdf), and with images display correctly the preview:

image

@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

@hmoreras hmoreras

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

Successfully merging a pull request may close this issue.

feat(editor-content): add unit tests to file field store #30059 dotCMS/core
3 participants
@nicobytes @hmoreras @josemejias11