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: "Import from URL" functionality #30061

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

Image Field: "Import from URL" functionality #30061

nicobytes opened this issue Sep 18, 2024 · 3 comments · Fixed by #30295
Assignees
@dsilvam
Labels
dotCMS : Content Management OKR : Core Features Owned by Will QA : Approved Release : 24.10.16 Upgrade Fixes Team : Falcon

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Sep 18, 2024 •
edited
Loading

Parent Issue

#29692

Task

Implement the "Import from URL" feature for Image Field, which opens a popup for users to enter a URL and import a file from that location.

Proposed Objective

User Experience

Proposed Priority

Same as Parent Issue

Acceptance Criteria

  1. An "Import from URL" option is available in the File field
  2. Clicking the option opens a popup with a URL input field
  3. The system attempts to download and import the file from the provided URL
  4. Error handling if the URL is invalid or the file cannot be imported
  5. The popup remains open and displays an error message if the import fails
  6. Successfully imported files are treated as if they were uploaded directly

Assumptions & Initiation Needs

  • Backend API for importing files from URLs is available
  • Security measures for URL validation and file scanning are in place
@nicobytes nicobytes mentioned this issue Sep 18, 2024
Open
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Sep 18, 2024
@nicobytes nicobytes moved this from Next 1-3 Sprints to Current Sprint Backlog in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes removed the Triage label Oct 2, 2024
@nicobytes nicobytes moved this from Current Sprint Backlog to Next 1-3 Sprints in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes self-assigned this Oct 2, 2024
nicobytes added a commit that referenced this issue Oct 8, 2024
@nicobytes
chore(edit-content): Validate proper files #30061
5aa1686
@nicobytes nicobytes linked a pull request Oct 8, 2024 that will close this issue
chore(edit-content): Import From URL for Image Field #30295
Merged
3 tasks
nicobytes added a commit that referenced this issue Oct 8, 2024
@nicobytes
chore(edit-content): send accepted files to dialog #30061
92332f0
nicobytes added a commit that referenced this issue Oct 8, 2024
@nicobytes
chore(edit-content): show error #30061
9e0af8b
nicobytes added a commit that referenced this issue Oct 8, 2024
@nicobytes
chore(edit-content): validate errors #30061
2a693e9
nicobytes added a commit that referenced this issue Oct 8, 2024
@nicobytes
chore(edit-content): validate errors #30061
34c9a05
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): fix unit tests with new features #30061
a6c3f5c
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): apply format #30061
8461e1a
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): sync with master #30061
fe65cec
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): add unit test for utils #30061
aca7190
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): apply format #30061
b12e303
@nicobytes nicobytes mentioned this issue Oct 9, 2024
Merged
3 tasks
nicobytes added a commit that referenced this issue Oct 9, 2024
@nicobytes
chore(edit-content): fix linter #30061
d52e8eb
@nicobytes
Copy link
Contributor Author

nicobytes commented Oct 10, 2024 •
edited
Loading

QA Notes:

  1. Create a new content type with a Image Field
  2. Create a content based on the previously created content type
  3. Click the "Import from URL" button
  4. A popup/dialog should show

Screenshot 2024-10-10 at 10 28 30 AM

Case 1: Upload Images

Steps Image
1. Enter the image URL in the input field and import it. Screenshot 2024-10-10 at 10 29 34 AM
2. The dialog should close and show the preview. Screenshot 2024-10-10 at 10 29 41 AM

Case 2: Only allow Images

Steps Image
1. Provide a non-image URL in the input and import it. Screenshot 2024-10-10 at 10 35 06 AM
2. Should show an error message Screenshot 2024-10-10 at 10 35 55 AM

Case 3: Show error for not valid URLs for Image Fields and File Fields

Steps Image
1. Enter an invalid URL in the input field and attempt to import it. Screenshot 2024-10-10 at 10 39 13 AM
2. Should show an error message Screenshot 2024-10-10 at 10 39 21 AM

nicobytes added a commit that referenced this issue Oct 10, 2024
@nicobytes
chore(edit-content): add class #30061
c9e7b9b
github-merge-queue bot pushed a commit that referenced this issue Oct 10, 2024
@nicobytes
chore(edit-content): Import From URL for Image Field (#30295)
434f28e 
## Parent Issue

#30061 

## Summary

This pull request includes significant updates to the
`DotFormImportUrlComponent` and its associated store, focusing on
improving file upload handling and adding comprehensive unit tests. The
most important changes include updating the component and store to
handle accepted file types, adding abort functionality for uploads, and
enhancing test coverage.

### Component and Store Enhancements:

* Updated the `DotFormImportUrlComponent` to handle accepted file types
and added an abort controller to manage upload cancellations.
* Modified the `FormImportUrlStore` to include accepted file types in
its state and added methods to initialize setup and handle file uploads
with abort functionality.

### Unit Tests Enhancements:

* Added comprehensive unit tests for the `DotFormImportUrlComponent`,
covering initialization, form submission, and upload cancellation
scenarios.

* Added unit tests for the `FormImportUrlStore` to verify state
initialization, setup, and file upload handling.

### Minor UI Adjustments:

* Adjusted the error message and button styles to improve the user
interface.

### Test Updates for File Field Component:

* Updated existing tests to use the new `uploadFile` method instead of
`uploadDotAsset`.

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

### Video
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Oct 10, 2024
@nicobytes nicobytes removed their assignment Oct 14, 2024
@dsilvam dsilvam self-assigned this Oct 14, 2024
@dsilvam
Copy link
Contributor

dsilvam commented Oct 14, 2024 •
edited
Loading

Passed IQA: All the scenarios above working as expected.

Image

@dsilvam dsilvam moved this from Internal QA to QA - Backlog in dotCMS - Product Planning Oct 14, 2024
@josemejias11
Copy link
Contributor

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

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Oct 15, 2024
spbolton pushed a commit that referenced this issue Nov 11, 2024
@nicobytes @spbolton
chore(edit-content): Import From URL for Image Field (#30295)
aaf3e4f 
## Parent Issue

#30061 

## Summary

This pull request includes significant updates to the
`DotFormImportUrlComponent` and its associated store, focusing on
improving file upload handling and adding comprehensive unit tests. The
most important changes include updating the component and store to
handle accepted file types, adding abort functionality for uploads, and
enhancing test coverage.

### Component and Store Enhancements:

* Updated the `DotFormImportUrlComponent` to handle accepted file types
and added an abort controller to manage upload cancellations.
* Modified the `FormImportUrlStore` to include accepted file types in
its state and added methods to initialize setup and handle file uploads
with abort functionality.

### Unit Tests Enhancements:

* Added comprehensive unit tests for the `DotFormImportUrlComponent`,
covering initialization, form submission, and upload cancellation
scenarios.

* Added unit tests for the `FormImportUrlStore` to verify state
initialization, setup, and file upload handling.

### Minor UI Adjustments:

* Adjusted the error message and button styles to improve the user
interface.

### Test Updates for File Field Component:

* Updated existing tests to use the new `uploadFile` method instead of
`uploadDotAsset`.

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

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

@dsilvam dsilvam

Labels
dotCMS : Content Management OKR : Core Features Owned by Will QA : Approved Release : 24.10.16 Upgrade Fixes Team : Falcon
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(edit-content): Import From URL for Image Field dotCMS/core
3 participants
@dsilvam @nicobytes @josemejias11