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

Apostrophes in assets' metadata messes up control panel #2177

knut-forkalsrud opened this Issue Sep 18, 2018 · 1 comment


None yet
3 participants

knut-forkalsrud commented Sep 18, 2018

Describe the bug
I believe there is a missing HTML encoding of single quote, or something more specific to Vue. I'm not sure. The effect is that when I add an apostrophe in an asset's title the settings screen becomes messed up. Or maybe the YAML written by the asset manager isn't correct. I'll explain better in the steps to reproduce.

To Reproduce
Steps to reproduce the behavior:

  1. Start with the stock install, with the demo site.
  2. Go to the asset manager, open the image coffee-mug.jpg
  3. Change the description to from "Coffee Mug" to "Muggle's Coffee Mug", notice the apostrophe.
  4. Hit "Save"
  5. Navigate to "Editing Asset Container", i.e "configure -> content -> assets" in the left side navigation. Choose the "Main Assets" to bring up the edit screen. The equivalent of going directly to http://localhost:3000/cp/configure/content/assets/main
  6. Notice that the edit screen isn't populated with the details from main.yaml, and that the save button doesn't work. If you have the developer tools open you may notice an error message:
jabbascripts.js?v=2.8.12:2 Uncaught TypeError: Cannot read property 'driver' of undefined
    at AssetContainerForm.ready (jabbascripts.js?v=2.8.12:2)
    at AssetContainerForm.Sn.t._callHook (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.e (johnny-deps.js?v=2.8.12:7)
    at AssetContainerForm.n (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.Rn.t.$emit (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.Sn.t._callHook (johnny-deps.js?v=2.8.12:6)
    at e (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.t.$before (johnny-deps.js?v=2.8.12:6)
    at Dn.transition (johnny-deps.js?v=2.8.12:8)
    at Dn.mountComponent (johnny-deps.js?v=2.8.12:8)

I believe the culprit is this funny looking tag, which is not a normal HTML tag I'm used to. The value for the :container attribute is enclosed in single quotes, but also contains a single quote, i.e. the apostrophe from earlier.

    <asset-container-form :is-new="false"
                          :container='{"title":"Main Assets","path":"assets","url":"\/assets","assets":{"img\/black-bear-cubs.jpg":{"title":"Black Bear Cubs","alt":"Some black bears standing up"},"img\/coffee-mug.jpg":{"title":"Muggle's Coffee Mug"},"img\/me.jpg":{"title":"Me","alt":"Niles Peppertrout"},"img\/redwood-sign.jpg":{"title":"redwood sign"},"img\/desert.jpg":{"focus":"77-70"}},"id":"main","driver":"local"}'>

Expected behavior
The edit screen should not have Javascript errors.

screen shot 2018-09-17 at 21 43 05

Environment details (please complete the following information):

  • Statamic Version 2.10.5
  • This is an upgrade from 2.8.12
  • OS: macOS 10.13.6 (17G65)
  • Browser: Chrome 68.0.3440.106
  • Web Server: I'm using just php -S localhost:3000 statamic/server.php
  • PHP Version: 7.1.16
  • Addons installed: none

Additional context
I have also reproduced it with a stock install of Statamic 2.8.12


This comment has been minimized.


jackmcdade commented Oct 26, 2018

Nice catch! Thanks! ❤️

@jackmcdade jackmcdade self-assigned this Oct 26, 2018

@jasonvarga jasonvarga closed this Nov 6, 2018

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