MLA and ACF image upload conflict

Thank you for your interest and for this report. I installed the Advanced Custom Fields plugin and took the following steps to reproduce your issue as I understand it. Here are the steps I followed:

1. Define a new ACF Field Group containing a field of type Image.
2. Open the Pages/Add New screen and click the “Add Image” button for the ACF Image field.
3. In the Media Manager pop-up window, select the “Upload Files” tab, then drag and drop an image into the “Drop files anywhere to upload” area.
4. The pop-up window changes to the Media Library tab, the file details are displayed in the right-hand pane. The file is not added to the list in the left-hand pane and the “Select” button is disabled.
5. Click the “Search Media” button in the top-center part of the window. The file list is refreshed with the new file selected, and the “Select” button is enabled.
6. Click the “Select” button. The pop-up window closes and the image has been added to the new page.

Do the above steps agree with the problem you are describing? If so, I will continue my investigation, although I have found getting two (or more) plugins to cooperate in the new Media Manager window to be a challenge.

In the interim, clicking the “Search Media” button is a quick and painless way to refresh the list. Thanks for your understanding and your patience while I work on this issue.

Hello,
yes, it right as you describe it. Yes, I know that when I refresh it manualy, the new image is displayed in the list. Unfortunately I use the ACF image field in the frontend, so this solution is useless.
I spent some time trying to solve it yesterday and I think that I solved it. The problem is in the mla-media-modal-scripts rows 241-247. In the WP file media-models.min.js there is the allowed array defined on the row: 656. If I add the ‘mla_source’, ‘mla_search_value’, ‘mla_search_fields’, ‘mla_search_connector’ to the array, it works fine (not 100% tested yet). Unfortunately I wasn’t able to solve it without changing the WP file directly.

Thanks for this update confirming my understanding of the issue and for the great detective work you’ve done in identifying the source of the problem. If you look a little earlier in the media-models.js source code on row 610 you can see Query = media.model.Query = Attachments.extend({. The Query variable is a private instance of the media.model.Query object and I couldn’t find a way of extending it to do things like adding the mla_ variables to the array. This is one aspect of the challenge I referred to in my earlier post.

I will admit that JavaScript and Backbone are not my strongest skills. I’ll see what I can do.

Thanks again for your help, your understanding and your patience.

If it would be of any help, here’s my two cents.
We just have to trigger a click on the button as soon as the image is shown.

I was able to run this on the browser console and things just go as expected

jQuery(“#search-submit”).click();

Perhaps adding this line will fix the problem

Well, that was an adventure!

It turns out that this issue is not specific to the Advanced Custom Fields plugin; you can get the same problem with the WordPress “Add Media” feature. Further, the issue is timing-dependent. If you click the “Upload Files” tab before the default search fills the window, insertion works fine. Since this issue occurs with WordPress alone, I decided it is a defect I must try to fix.

As I suspected, I could find no way to extend the “upload queue observer” to include the additional MLA search/filter parameters. I could not find a reliable place to simulate a “search submit click” either.

My solution is pragmatic at best. I have eliminated all of the additional parameters required to support the month and term filters as well as the enhanced search box. All of the information MLA requires is now stuffed into the existing “s” (search) parameter. The logic required to manage this shared use of the “s” parameter while responding to changes in the individual filter and search controls is not pretty.

It works very well, except when the MLA “Media Manager Enhanced Search Media box” is disabled. The default Media Manager search box is an odd thing; it often searches through the items already downloaded to the browser without going back to the server to look for additional matches. Mostly, I got this to work, but if you use the “Upload Files” tab after adding a search string to the “Media Library” tab you can sometimes freeze the Media Manager entirely. Pressing the Escape key closes the window, allowing you to start over.

I am not sure what you meant by “Unfortunately I use the ACF image field in the frontend, so this solution is useless.“, so I have not tested this case. If you can be more specific I can be more helpful.

If you would like to get the fix and try it out before my next release, send me your e-mail address, using the “Contact Us” page at our web site:

Fair Trade Judaica/Contact Us

Any additional testing you can do would be most helpful; let me know what you’d like to do. Thanks for your interest and your patience.

David, I have made an extension to the plugin so to simulate a click on submit button. This works on my end. Hope this helps.

[link]

I have noticed that front-end hi-cup as well when using a WYSIWYG editor with AFC. The upload stalls when adding a image.

jamarante,does this extension help remedy that?

I haven’t tried the front-end though… All tested on the back-end. Feel free to test…

jamarante,

Thank you for sharing your “Media Library Assistant – Extension (ACF Compat Fix)” plugin. It’s a nice piece of work; your JavaScript/Backbone skills are better than mine. I see that you only attach your click function to the “reset” event. If you look at media-models.js in the wp.media.model.Attachments.observe function you can see that it also monitors the ‘add change remove’ functions. Why did you decide to ignore them?

Even with your simulate a click fix, leaving the additional MLA filter/search parameters in the args array means that the Media Manager observe logic does not run. I am concerned about other side effects if that happens, and I believe eliminating the extra parameters is a safer approach.

rorymheaney,

Can you give me more information on your “front-end” issue? I don’t understand ACF well enough to reproduce what you’re experiencing. Thanks for any help you can give me.

Thank you both for your interest and for taking the time to contribute to this topic.

David, that’s only a quick fix. I’m actually aware of the side effects but that is what I can do for now. Will update you guys with a safer code. Thanks for the feedback.

Hey David,

When AFC installed and you are on a page editing the content and uploading images. The Add Media comes up great. The first file or 2 that you upload with also work naturally and the “insert into page” button will be active.

Once you exit that area and lets say you scroll to the bottom of the content to add an image or even replace what you just added with a new image. If you then drag a new image into the media area, it will now “freeze”. You can still click out and press esc to continue editing the page normally. But you are unable to add that image while currently on page. You have to refresh the page to see that the image was in fact added to the media library and is now select able.

Does this make sense?

rorymheaney,

Thanks for your additional comments. I’m embarrassed to say that I am still not sure what you mean.

1. When you say “Once you exit that area“, do you mean that you close the Media Manager pop-up window by clicking the “Insert into post” button or just closing the window?
2. When you say “add an image or even replace what you just added“, do you mean that you click the “Add Media” button again, or are you clicking the ACF “Add Image” button? Is there another way to add or replace an image?
3. When you say “drag a new image into the media area“, do you mean the “Drop files anywhere” area on the “Upload Files” tab of the Media Manager pop-up window or the thumbnail list area of the “Media Library” tab of the pop-up window or somewhere else?
4. When you say “currently on page” and “refresh the page“, do you mean the page/post you are editing and trying to add another image to? I am guessing that “currently on page” means you are clicking “Add media” again without leaving the page – is that right?
5. I guess my initial confusion starts with the comment about a “front-end” problem, which I understand to mean viewing the site as a normal visitor, i.e., not in the Admin screens. Am I missing something?

The failure scenario I can reproduce is:

1. Click the ACF “Add Image” button to bring up the “Select Image” window.
2. Drag an image into the thumbnail area. It is added to the list and the “Select” button is enabled.
3. Click the “Select” button. The pop-up window closes and the image is added to the ACF field.
4. Hover over the thumbnail and click the “X” to remove the image. The thumbnail is replaced with “No image selected”.
5. Click the “Add Image” button again. The pop-up window opens. At this point you could select an existing image and everything works. Instead,
6. Drag another image into the thumbnail area. The image is added to the thumbnail area, but the pop-up window stops responding to all clicks or other input. You must press Escape to close the pop-up window.

If that’s what you mean, I will work on it.

I am sorry to be so slow, but I want to make sure I understand and test for every aspect of the issue before I declare a victory. Thanks for your understanding and your patience.

I have been able to reproduce the failure scenario I described above even when the MLA enhancements are disabled and no MLA JavaScript code is present. If you repeatedly go through the six steps, dragging and dropping new images into the thumbnail area, eventually the window stops responding and must be closed. This implies a problem with ACF or the Media Manager itself, and I’m not sure I can do anything about it. I am open to any suggestions you may have.

I’m definitely seeing that happen (eventually stop working).

Either way, amazing plugin, and I love using it. I wish I could be of more assistance in terms of a possible solution. Appreciate your time on this.

Thanks, rorymheaney, for the encouragement.

I added jamarante‘s click simulation to my code and continued my testing. I was interested to see that only the first “click” actually forces a new request to the server for updated data. If you do more drag & drop uploads without refreshing the page, the “click” event fires but nothing else happens. Only if you actually change one of the filters or the search values does another query go out.

Sadly, the simulated “click” has no effect on the “stops responding” failure; it still happens. I also discovered that if you drag & drop another image after the window stops responding, it will spring back into life and start responding to UI clicks once again!

I welcome any further help from those with sharper JavaScript skills than mine. I regret that I am not able to get all the way to the root cause of this issue.