Cannot use Quick Edit to delete an image

Can you provide more detailed exception information? Preferably a stack trace. Thanks!

Error in console.log

POST: http://drupal8/quickedit/form/node/1/field_image/en/full?element_parents=field_image/widget&_wrapper_format=drupal_ajax&ajax_form=1&_wrapper_format=drupal_ajax

Uncaught AjaxError: 
An AJAX HTTP error occurred.
HTTP Result Code: 500
Debugging information follows.
Path: /quickedit/form/node/1/field_image/en/full?element_parents=field_image/widget&_wrapper_format=drupal_ajax&ajax_form=1
StatusText: Internal Server Error
ResponseText: {}

Db error:

LogicException: The database connection is not serializable. This probably means you are serializing an object that has an indirect reference to the database connection. Adjust your code so that is not necessary. Alternatively, look at DependencySerializationTrait as a temporary solution. in Drupal\Core\Database\Connection->__sleep() (line 1433 of /home/drupal/drupal-core/core/lib/Drupal/Core/Database/Connection.php).

I've been stepping through it a couple of times already, not yet found where it happens :/
Will check for stack trace.

This then sounds like an AJAX request triggered by a form, and the form is trying to save something to the DB that contains services that end up being serialized (presumably in the submit handler).

Also, note that #2475483: Cannot quickedit an image or date field indeed already fixed a bug that is nearly identical to this, and it added test coverage. But only for adding an image, not for deleting an image.

When we find the root cause, we should expand the test coverage in QuickEditLoadingTest::testImageField().

Same in my case.
I added a custom image field in article content type. I created a node of type article.
Through quickedit i am unable to delete the image when i click on remove nothing happens.

I get the same issue, but not only when quick editing, I also get it when trying to delete an image or file from a field in regular editing form.

It's hard to tell under what circumstances this happens, though... it happens on some files but not others (on the same field).

Why not remove the feature if it doesn't work I also get the error, only, I can edit text without issue. It is custom image field displayed in a view. error is

Uncaught PHP Exception LogicException: "The database connection is not serializable. This probably means you are serializing an object that has an indirect reference to the database connection. Adjust your code so that is not necessary. Alternatively, look at DependencySerializationTrait as a temporary solution." at /srv/bindings/806bfe9376874bacabadd75195a7312a/code/core/lib/Drupal/Core/Database/Connection.php line 1433

#10: Because it's very hard to reproduce and not actually caused by Quick Edit, see #8.

I want to confirm that this happens only when I use Quickedit for image field. I am able to delete the image in the backend. Is there any direction/instruction I can follow?

What is the mean of quick edit, if are not able to delete the image from the frontend.
I think it is correct bug for new patch.

The problem is the validator. Thing is, it's not even used either, so why bother injecting it. Removing it fixes this.

Patch #14 fix issues using quick edit on paragraphs fields (with images field inside).

Triaging Issue with @catapipper.

issue reproduced with @catapipper. Able to reproduce bug in 8.2.x using same steps. Patch #14 solves ajax error but does not trigger the ability to save the change. If you re-upload an image the save submit button is available.

Thanks @catapipper and @dbyers55 for triaging the issue. Updating issue credit to include @dbyers55. @catapipper, if you are following, can you comment as well so we can ensure you are credited for the triage contribution?

Added the necessary JS bits in the patch attached to make quick edit image removal works.

What's going on here is that quick edit doesn't perceive the click on the Remove button as something that changes the form, and thus doesn't expose its Save button. Attached patch manually triggers the formUpdated event to make sure that everything's notified of the change.

Patch of #20 tried and it is working fine on Drupal 8.1.1, thx @DeFr

#2828528: Add Quick Edit Functional JS test coverage will make it much easier to write test coverage for this.

this issue seems to persist (in core 8.2.4) -- this is such a great feature, i find it hard to believe that there aren't more posts about it... am i missing something

#20 does not resolve the issue for 8.2.4

Thanks for triaging this and confirming it's still a bug.

Discussed with @alexpott, @cilefen, @cottser, @laurii, and @xjm and we agreed on the major priority due to the user-facing error. There's a workaround for the actual image deletion to use the full node edit form.

This happens with file field too. When add a new file (multiple instance field) and with file deletion.

As reported here this issue seems to affect all file fields not only images, wether or not they are single or multiple instance field. Is it possible to change the name of this issue to reflect that?

Attached is an updated patch for 8.3.x and 8.4.x with the workaround of removing the typed data validator to prevent the issue. Certainly not a good long term solution but maybe it can be of some help to anyone with their projects or the maintainers to fix the issue.

I think the patch should look like the attached one for 8.4

Bump. Could a maintainer point to indications as which steps to follow to get one of these patches included in a 8.4.x or 8.5.x release? I’m willing to work on this but not sure what to do exactly.

#2828528: Add Quick Edit Functional JS test coverage landed! Now tests are totally feasible to write. Let's get this done!

Is this issue actually different from #2952906: Hitting the 'Remove' button to delete a file with Quick Edit fails with a 500?

I suspect it's indeed probably the same. Let's make this the canonical issue. Would you like to move over any relevant information from that other issue to this issue and marking it Closed (duplicate)?

Sure, done.

🙏

Added test.

JavaScript fix.

Added dependency on "file/drupal.file" to "quickedit/quickedit" library.
This enables entity browsers to work with Quick Edit (tested on Lightning media browser).

Install file module in test.

We talked about this with @huzooka, and adding file.js is not the responsibility of Quick Edit, so I'll hide patch 47 and 49.
I'll also hide patch 42 because it failed testing.

1. +++ b/core/modules/quickedit/quickedit.libraries.yml
   @@ -40,6 +40,7 @@ quickedit:
   +    - file/drupal.file
   

   This means quickedit now depends on file implicitly. Hence the fail in #47.

   What we need to do instead is modify this asset library conditionally: if the file module is installed,add this dependency.

   EDIT: actually, is this even truly necessary? AFAICT the core bug is fixed even without this.

2. +++ b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditFileTest.php
   @@ -0,0 +1,100 @@
   +class QuickEditFileTest extends QuickEditJavascriptTestBase {
   

   YAY FOR TEST COVERAGE! 👍

   But can you please upload a test-only patch too? That one should fail. If you upload 2 patches at the same time, the first one test-only, the second one test+fix, then it's perfectly clear whether there's adequate test coverage or not :)

I think it's not necessary, it was a bad idea. I think patch #44 is enough.

Here's patch #44 and the test only for comparison.

Perfect! 👍

Committed and pushed b3576bbe73 to 8.7.x and c1eaf1e75a to 8.6.x. Thanks!

Whilst there is a constructor change it is in a form class so not API and this is a long standing bug so it deserves to be fixed in 8.6.x. Great to see javascript tests for JS bugs.