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

bug(CDK Drag and Drop): Drag fails when dragging a div including an input with type="file" and an image #20783

Closed
Warwizza opened this issue Oct 14, 2020 · 1 comment · Fixed by #20793
Closed

bug(CDK Drag and Drop): Drag fails when dragging a div including an input with type="file" and an image #20783

Warwizza opened this issue Oct 14, 2020 · 1 comment · Fixed by #20793
Assignees
@crisbeto
Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround

Comments

@Warwizza
Copy link

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-9pkfah

Steps to reproduce:

  1. Click the add image button.
  2. Select an image using the file picker.
  3. Try to drag the image to another position.
  4. The app will crash.

Expected Behavior

The div including the image will be dragged (and dropped) to a new position

Actual Behavior

The app crashes when trying to drag the div
Error massage Chrome and Edge:
DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Error message Firefox:
DOMException: An attempt was made to use an object that is not, or is no longer, usable

Environment

  • Angular: 10.1.5
  • CDK/Material: 10.2.4
  • Browser(s): Chrome 86.0.4240.75 (Official Build) (64-bit), Firefox 81.0.2 (64-bits), Edge 86.0.622.38 (Official Build) (64-bits)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
@Warwizza Warwizza added the needs triage This issue needs to be triaged by the team label Oct 14, 2020
@crisbeto crisbeto self-assigned this Oct 14, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 14, 2020
@crisbeto
fix(cdk/drag-drop): error when cloning file input with value
5cea3a5 
When we clone the dragged element to generate its preview, we transfer the values of
inputs so that they look identical. The problem is that assigning the value of a `file` input
will throw an error so we have to skip it.

**Note:** does not include a unit test, because we can't set the of a test element programmatically.

Fixes angular#20783.
@crisbeto crisbeto added area: cdk/drag-drop has pr P2 The issue is important to a large percentage of users, with a workaround and removed needs triage This issue needs to be triaged by the team labels Oct 14, 2020
@crisbeto crisbeto mentioned this issue Oct 14, 2020
Merged
annieyw pushed a commit that referenced this issue Oct 16, 2020
@crisbeto
fix(cdk/drag-drop): error when cloning file input with value (#20793)
5eb1035 
When we clone the dragged element to generate its preview, we transfer the values of
inputs so that they look identical. The problem is that assigning the value of a `file` input
will throw an error so we have to skip it.

**Note:** does not include a unit test, because we can't set the of a test element programmatically.

Fixes #20783.
annieyw pushed a commit that referenced this issue Oct 16, 2020
@crisbeto @annieyw
fix(cdk/drag-drop): error when cloning file input with value (#20793)
ff5d09f 
When we clone the dragged element to generate its preview, we transfer the values of
inputs so that they look identical. The problem is that assigning the value of a `file` input
will throw an error so we have to skip it.

**Note:** does not include a unit test, because we can't set the of a test element programmatically.

Fixes #20783.

(cherry picked from commit 5eb1035)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 16, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@crisbeto @wagnermaciel
fix(cdk/drag-drop): error when cloning file input with value (angular…
26afe9a 
…#20793)

When we clone the dragged element to generate its preview, we transfer the values of
inputs so that they look identical. The problem is that assigning the value of a `file` input
will throw an error so we have to skip it.

**Note:** does not include a unit test, because we can't set the of a test element programmatically.

Fixes angular#20783.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/drag-drop): error when cloning file input with value crisbeto/material2
2 participants
@crisbeto @Warwizza