Imagefields inside a repeater fail to create thumbnail

[gmclelland]

Short description of the issue

I have a repeater with one image field. When I upload an image, Processwire doesn't create the thumbnail until the page is saved. This only happens when the image field inside the repeater is set to open by default using "Vertical list (verbose)".

Expected behavior

When I drag an image into the imagefield in the repeater, I expected a thumbnail to be created.

Actual behavior

I drag the image into the imagefield to upload the file. It uploads correctly, but it doesn't generate a proper thumbnail. It shows a stretched image thumbnail, but no new thumbnail is created. Toggling through the other different image grid mode buttons, shows no thumbnail at all on the imagefield.

Note: If I set the imagefield inside the repeater to default to any other image grid mode beside "Vertical list (verbose)", the thumbnail will be generated properly.

Steps to reproduce the issue

At this point I don't see any errors in the console or Tracy debugger. Then if I try to use the thumbnail image resize slider it throws the error in the console. I can only reproduce this on image fields inside a repeater that have been set to "Vertical list (verbose)".

Here is the error I get in the console:

JqueryUI.js?v=1563290320:7 Uncaught TypeError: Cannot read property 'addClass' of undefined
at e..._mouseCapture (JqueryUI.js?v=1563290320:7)
at e..._mouseCapture (JqueryUI.js?v=1563290320:6)
at e..._mouseDown (JqueryUI.js?v=1563290320:6)
at e..._mouseDown (JqueryUI.js?v=1563290320:6)
at HTMLSpanElement. (JqueryUI.js?v=1563290320:6)
at HTMLSpanElement.dispatch (JqueryCore.js?v=1563290320:2)
at HTMLSpanElement.u (JqueryCore.js?v=1563290320:2)

This happens in Google Chrome. I haven't tested other browsers.

Let me know if can provide any other information.

Setup/Environment

Server Details

Software	Version
ProcessWire	3.0.135
PHP	7.1.12
Webserver	Apache/2.4.29 (Unix)
MySQL	5.7.10-log

Server Settings

Parameter	Value
allow_url_fopen	1
max_execution_time	300 (changeable)
max_input_nesting_level	64
max_input_time	60
max_input_vars	1000
memory_limit	256M
post_max_size	128M
upload_max_filesize	2M
xdebug
xdebug.max_nesting_level
mod_rewrite	1
mod_security	*confirmed off
EXIF Support	1
FreeType	1

GD Settings

Parameter	Value
Version	bundled (2.1.0 compatible)
GIF	1
JPG	1
PNG	1
WebP

[teppokoivula]

I've tried to reproduce this but so far no luck. Everything seems to work as expected here: a thumbnail is always created, and no errors appear in the console.

Do you have server-side resizing for the image field enabled or disabled? Any other settings that might affect this – if you create a new repeater field and a new image field and don't change any of the settings (apart from the grid mode, which according to your post has to be "Vertical list (verbose)"), does this still occur?

Might also be something related to the image, so if you could provide a test image that is affected by this issue that would be great.

And finally, are you using Windows or something else? Asking in case the client-side resizing feature or something else in the browser might be interfering, though this seems somewhat unlikely.

---

Overall if you could provide instructions for a minimal setup where this issue can be observed, that would be quite helpful. I know it's a bit of extra work, of course. I've also found it helpful to create a new test site for this purpose, in part so that I can rule out the effects of any third party modules.

[gmclelland]

I forgot to add that I tested this on three different local sites and one production site and with many different images. One of the sites I tested this on was a minimal test site. The only settings I changed on the imagefield is maximum files allowed = 1 and required = true.

Here is an export of my two fields.
exported-fields.txt

The local sites are ran on my mac and the production site is ran on a Ubuntu server. I also changed the imagefield to use server-side resize, but it didn't make any difference.

One site the thumbnail gets created after the page is saved. On another site the thumbnail doesn't gets created at all unless I reload the page a couple of times.

Here is a picture:

If I click on the different image grid buttons you can see that no thumbnail is created:

Here is one test image:

[gmclelland]

Here is a video:
https://drive.google.com/file/d/1ZsXnxnaVQzxy7xUER0CCYZCmkWVX82G9/view?usp=sharing

[netcarver]

@gmclelland Great looking cheatsheet.

[gmclelland]

This is still an issue for me in Processwire 3.0.137. My dev sites are running on my mac and the production sites are running on VPS Linux(Ubuntu) servers.

[gmclelland]

So the image field in the repeater is initially defaulted to use the "Vertical list (verbose)" image grid mode. I prefer this because it always shows the image's description that I use as alt text.

If I click on any other image grid modes within the image field and then save the page, Processwire will remember my preference between page loads and properly generate and load the image thumbnail. From there on out I won't see an errors with that page.

[Toutouwai]

I can confirm the issue.

It seems to be due to getCookieData($inputfield, 'size') returning NaN when trying to set up the slider here.

[phlppschrr]

I think i have an (ugly) solution. Not nice enough for a PR, but maybe it helps to solve this issue.
I added some defaults return values this to the end of the getCookieData function:

if (!value) {
	if (property === 'size') return 130;
	else if (property === 'listSize') return 23;
	else if (property === 'mode') return 'list';
}
return value;

[ryancramerdesign]

Thanks @phlppschrr and @Toutouwai nice debugging, I used phlppschrr’s suggestion to expand our existing default-substitution part of the function and that seems to have resolved it on this end too.