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.

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

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

Comments

@rjvelazco
Copy link
Contributor

rjvelazco commented Aug 15, 2023

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 moved this from New to Current Sprint Backlog in dotCMS - Product Planning Aug 15, 2023
@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
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 moved this from Current Sprint Backlog to In Progress in dotCMS - Product Planning Aug 16, 2023
@rjvelazco rjvelazco moved this from In Progress to In Review in dotCMS - Product Planning Aug 28, 2023
fmontes pushed a commit that referenced this issue Aug 28, 2023
* 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
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants