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

Edit Contentlet: Create dropzone component #25782

Closed
Tracked by #25445
rjvelazco opened this issue Aug 15, 2023 · 2 comments · Fixed by #25833
Closed
Tracked by #25445

Edit Contentlet: Create dropzone component #25782

rjvelazco opened this issue Aug 15, 2023 · 2 comments · Fixed by #25833
Assignees
@rjvelazco
Labels
QA : Not Needed Release : 23.09.6 Release Template Builder Team : Lunik Type : Task

Comments

@rjvelazco
Copy link
Contributor

rjvelazco commented Aug 15, 2023 •
edited by fmontes
Loading

Parent Issue

#25445

Task

We need to develop a component that enables Drag & Drop functionality for file uploads. We can take a look at this PrimeNg component to see if we can use it: https://primeng.org/fileupload

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

Acceptance Criteria

  • Should allow Drag&Drop for files.
  • Should allow browser files and select one.

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

#24362

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response
@rjvelazco rjvelazco mentioned this issue Aug 15, 2023
Closed
3 tasks
@fmontes fmontes changed the title Binary Field: Create File Upload Input Binary Field: Create dropzone component Aug 15, 2023
@fmontes fmontes changed the title Binary Field: Create dropzone component Edit Contentlet: Create dropzone component Aug 15, 2023
@fmontes fmontes mentioned this issue Aug 15, 2023
Open
@fmontes
Copy link
Member

fmontes commented Aug 15, 2023

The idea behind this component is that we should be able to put it inside areas or zones of any page and allow the user to drop files in it... once the file is dropped we need to emit that file to the parent so it can take care of whatever.

I think we need to build this on top of a <input type="file"> because then we can use all the HTML native attributes and events... maybe this is even a directive to just modify that file? Not sure... but it worth exploring.

@rjvelazco rjvelazco self-assigned this Aug 16, 2023
@rjvelazco rjvelazco mentioned this issue Aug 18, 2023
Merged
3 tasks
fmontes pushed a commit that referenced this issue Aug 28, 2023
@rjvelazco
Fix #25782 Edit Contentlet: Create dropzone component
c7e15d2 
* dev: create dot-drop-zone component

* dev: create dot drop zone value accessor directive

* dev: allow drop one file

* test: setup tests

* test: dot-drop-zone component

* dev: prevent DragOver behavior to allow drop event

* test: fix tests

* dev: emit dragStart and DrahStop events

* test: add tests for  directive

* dev: create dotDropZone Value Accesor Story

* dev: fix CodeQL warning

* dev: fix mimeType Validation

* dev: add addon-actions to story-book

* feedback: unify allowedExtensions & allowedMimeTypes

* feedback: emit error on drop

* feedback: rename dot-drop-zone @output

* feedback: rename @Ouput fileDrop to fileDropped

* dev: add validity object

* dev: add NG_VALIDATORS to the DotDropZoneValueAccessorDirective
@fmontes fmontes added Release : 23.09.6 Release Template Builder QA : Not Needed and removed Triage labels Aug 28, 2023
@fmontes
Copy link
Member

fmontes commented Aug 28, 2023

This is the placeholder for binary field.

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

@rjvelazco rjvelazco

Labels
QA : Not Needed Release : 23.09.6 Release Template Builder Team : Lunik Type : Task
Projects
dotCMS - Product Planning
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Edit Contentlet: Create DropZone Component dotCMS/core
2 participants
@fmontes @rjvelazco