Automattic / Automattic/jetpack

VideoPress Uploader + ACF Image Validator Conflict

Open
#26,445 1 comment 0 reactions 0 assignees View on GitHub
[Feature] VideoPress [Focus] Compatibility [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Install [Advanced Custom Fields 5.12.3 ](https://wordpress.org/plugins/advanced-custom-fields/) (also reproducible with ACF PRO 5.12.3)
2. Make sure VideoPress is enabled from JetPack -> Settings -> Performance in `wp-admin/admin.php?page=jetpack#/performance`
3. Create a new ACF image field, define maximum width 1px and height 1px (or any arbitrary value) and set the field rules to `Show this field group if -> Post Type -> is equal to -> Post (or Page)`
4. Go to any post or page, and try to upload an image that exceeds the maximum dimensions in the ACF field.

### A clear and concise description of what you expected to happen.

An error should be shown in the UI of the file uploader:

```
test.jpg
Image width must not exceed 1px.
Image height must not exceed 1px.
```

### What actually happened

The uploader progress "hangs" and there is a JS error caused by the VideoPress Uploader JS:

```
ReferenceError: Can't find variable: error
handleStandardResponse — videopress-uploader.min.js:1:206
(anonymous function) — videopress-plupload.min.js:1:3076
dispatchEvent — plupload.min.js:1:14654
(anonymous function) — plupload.min.js:1:8934
(anonymous function) — moxie.min.js:1:19224
(anonymous function) — moxie.min.js:1:18746
t — moxie.min.js:1:1726
inSeries — moxie.min.js:1:1761
dispatchEvent — moxie.min.js:1:18783
(anonymous function) — moxie.min.js:1:40789
(anonymous function) — moxie.min.js:1:18746
t — moxie.min.js:1:1726
inSeries — moxie.min.js:1:1761
dispatchEvent — moxie.min.js:1:18783
(anonymous function) — moxie.min.js:1:59907
```

### Browser

_No response_

### Other information

## Summary

When the "Enable VideoPress" toggle is enabled from `wp-admin/admin.php?page=jetpack#/performance`, there's a conflict with the Advanced Custom FIelds (ACF) plugin.

If an ACF image field has maximum width/height defined, and you upload a new image that exceeds the dimensions, there's a JS error in the console and the warning for exceeding the dimensions doesn't show up. As soon as VideoPress is disabled from JetPack's settings, ACF image validation starts working again.
### Expected Result

## Not Reproducible When

This issue, as far as I can tell, is only reproducible on post/page edit screens that have ACF image fields with validation criteria.

The issue doesn't reproduce on Taxonomy screens (and maybe others). For example, set the ACF image field Rules to `Show this field group if -> Taxonomy -> is equal to -> All`. Then go and edit a category or tag taxonomy item and upload an image exceeding the dimensions there. The issue doesn't reproduce.

## Site Info

The issue was originally reported by a customer on WP VIP.

The issue is the same everywhere and reproducible with the latest public version of Jetpack – 11.2 as well as the latest pre-release 11.3-a.7.

### Platform (Simple, Atomic, or both?)

Simple, Atomic, Self-hosted

### Reproducibility

Consistent

### Severity

Some (< 50%)

### Available workarounds?

_No response_

### Workaround details

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the conflict on a post or page with VideoPress enabled and an ACF image field limited to 1px dimensions. Start with the VideoPress uploader code indicated by videopress-uploader.min.js and videopress-plupload.min.js, then trace how the ACF validation response is handled. Done means the uploader shows the width and height validation errors without a JavaScript error or stalled progress.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.