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

Content Edit: Allow Drag&Drop and select file #26077

Merged

Conversation

rjvelazco
Copy link
Contributor

@rjvelazco rjvelazco commented Sep 13, 2023

Proposed Changes

  • Allow user Drag & Drop Files
  • Allow user Select File

Checklist

  • Tests
  • Translations

Description

🤖 Generated by Copilot at 3147ad4

This pull request introduces a new binary field component that allows users to upload files to dotCMS. The component uses a dot-drop-zone component and a dot-drop-zone-message component to handle the file selection and validation. The pull request also updates the storybook, the styles, the tests, and the messages for the binary field component and its related components. The pull request modifies the files binary-field.component.*, dot-drop-zone.component.*, dot-drop-zone-message.component.*, binary-field-utils.ts, mock.ts, button.scss, index.ts, and Language.properties.

Related Issue

Fixes #26048

Explanation of Changes

🤖 Generated by Copilot at 3147ad4

  • Added and styled a new layout for the binary field component, including a drop zone, a file input, and two action buttons (link, link, link)
  • Implemented the functionality and behavior of the binary field component, such as validating the file type and size, displaying the drop zone message, opening the file dialog, and selecting the file (link, link, link, link, link)
  • Exported the DotDropZoneComponent and the DotDropZoneMessageComponent from the ui library and declared them as dependencies for the binary field component in the storybook (link, link, link)
  • Defined the input parameters and controls for the binary field component in the storybook (link)
  • Created the template, styles, class, and test suite for the drop zone message component, which displays a message with an icon and a link to choose a file, depending on the validity of the file dropped or selected (link, link, link, link)
  • Modified the DropZoneFileValidity interface to add the errorType property, which provides a more specific error type for the file validity (link)
  • Added the fileDragOver output property and event to the dot-drop-zone component, which indicates the active state of the drop zone when a file is dragged over it (link, link, link)

Screenshots

fix-issue-26048-content-edit-refactor-allow-dragdrop-and-select-file.mov

@rjvelazco rjvelazco marked this pull request as ready for review September 19, 2023 02:50
@rjvelazco rjvelazco requested a review from fmontes September 21, 2023 19:28
).nativeElement;
const file = new File(['test'], 'test.png', { type: 'image/png' });
const event = new Event('change');
Object.defineProperty(event, 'target', { value: { files: [file] } });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL

@fmontes fmontes changed the title Content Edit Refactor: Allow Drag&Drop and select file Content Edit: Allow Drag&Drop and select file Sep 22, 2023
@fmontes fmontes enabled auto-merge (squash) September 22, 2023 12:52
@fmontes fmontes disabled auto-merge September 22, 2023 12:52
@fmontes fmontes enabled auto-merge (squash) September 22, 2023 12:54
@fmontes fmontes disabled auto-merge September 22, 2023 12:54
@fmontes fmontes enabled auto-merge (squash) September 22, 2023 14:46
@fmontes fmontes disabled auto-merge September 22, 2023 14:46
@fmontes fmontes enabled auto-merge (squash) September 22, 2023 15:25
@dotcms-sonarqube
Copy link

@spbolton spbolton disabled auto-merge September 22, 2023 15:35
@dotcms-sonarqube
Copy link

SonarQube Quality Gate

Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

@fmontes fmontes merged commit c6060ac into master Sep 22, 2023
@fmontes fmontes deleted the issue-26048-content-edit-refactor-allow-dragdrop-and-select-file branch September 22, 2023 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Edit Contentlet: Allow Drag&Drop and select file
4 participants