Image Upload Many Bugs on iPad

[miqrogroove]

I'm afraid I must report that I am truly struggling with the image upload screen in 3.5 RC1 on iPad 3 iOS 6.0.1. It did seem to work normally when I uploaded I think one or two photos. Now when I try to upload more photos, nothing gets uploaded, and the image gallery just shows duplicate thumbnails of one of the photos I added earlier.

If instead of trying to upload I go to the gallery tab of the uploader, it only shows me two out of the three photos that are currently in the media library.

So far I've run into the same problems on both the Add New Post screen and the Dashboard QuickPress.

Next I went to the Upload New Media page from the media library. From there I was able to initiate an upload, it said "Crunching" and then all that showed up was a text link that says "Edit". Confusing! When I tap the Edit link it opens a new tab with the Edit Media page. That page makes more sense.

Returning to the tab with the Upload New Media page and the Edit link, I selected two more photos to upload. Only one photo uploaded. When that upload completed, a second Edit link appeared and then a thumbnail of the previously uploaded photo appeared on the previous line. So now I have two edit links, one thumbnail, and the third photo never appeared in the library.

I still can't upload from the post editor and still only the first two photos appear in the editor gallery, even though there are now five photos in the library.

[miqrogroove]

In the Media Library tab of the editor upload screen, if I change the drop down menu from "All media items" to "Images" then all five images show up there. It's as if the browser has cached the all media items page and wont update it.

[miqrogroove]

Confirmed. I went to the media library and uploaded a sixth photo as above. Now when I go to the post editor and look at the available photos, there are still two of them under all items and five of them under images. This is not usable.

[miqrogroove]

On Chrome 23, WinXP, I can reproduce the problem of the bare "Edit" link appearing on the Upload New Media page. Other than that, uploading is fine. Most of these problems happen on iPad and not on Windows.

[azaozz]

Seems Safari/iOS (and maybe others) keeps some JS cached. Emptying wp on unload solves it.

[azaozz]

22552.patch seems to fix the inconsistencies in iOS. Also adds nocache_headers() in wp_send_json().

May need some clean up in other places too, perhaps the plupload queue.

[nacin]

I'm surprised nocache_headers() isn't already called in admin-ajax.php.

Could you explain a bit more why window.wp needs to get emptied?

[azaozz]

Seems some (all?) mobile browsers keep a lot more stuff cached "in memory" than desktop browsers, including JS objects. Not sure if our case is a browser bug or expected behaviour, but we need to make sure all JS is removed on unload.

Yeah, I was surprised nocache_headers() is not at the top of admin-ajax.php. Think it was there at one point. Will look into it later.

[miqrogroove]

Patch didn't work from out of the box. I'll dump my Safari cache again and see if that does it.

[koopersmith]

Replying to azaozz:

Seems some (all?) mobile browsers keep a lot more stuff cached "in memory" than desktop browsers, including JS objects. Not sure if our case is a browser bug or expected behaviour, but we need to make sure all JS is removed on unload.

What parts of the wp object does Safari retain? Ideally, we'd want to take advantage of this instead of disabling it, but that might have to wait for 3.6.

[miqrogroove]

After dumping cache, I am able to upload images one-at-a-time on iPad.

[azaozz]

Replying to koopersmith:

What parts of the wp object does Safari retain?

Hard to say... Seems most/all of wp is retained. Still not sure if this is a bug or a feature.

Yeah, we can remove only the data and keep the rest of the JS, something similar to how we used Gears? Definitely 3.6 :)

[azaozz]

Currently Plupload cannot upload multiple files in iOS Safari. Only the first file makes it to the queue (confirmed on their demo page). Tried looking in the html5 runtime in plupload, but don't see a quick fix.

[azaozz]

22552-2.patch includes 22552.patch and sets 'multi_selection' = false in Plupload's init for mobile devices. This makes it possible to use the built-in camera to take a photo and upload it directly and also fixes the problem in iOS Safari.

[miqrogroove]

22552-2.patch​ tested and working. +1 commit.

[koopersmith]

I'd like to know which issues here are iOS specific before applying these changes to all mobile devices. Does Android have the same mobile safari bugs? The same upload limitations?

[koopersmith]

If someone could test and report the behavior with and without this patch applied on an Android device, that would be great.

[miqrogroove]

Re-tested on iPad with 3.5-RC1-22844 and patches for #22085 and #22553. This will be a nice RC2 with all three commits.

[nacin]

Can someone see if 22552.diff​ is good? I am trying to see if nocache_headers() is simply defense-in-depth, and is something that could wait for 3.6 and be applied to all XHR requests via admin-ajax.php.

[miqrogroove]

Re-tested on iPad with 3.5-RC1-22860.

First with no patches:

• Able to select multiple uploads.
• Unable to upload more than one file.
• After first upload, subsequent uploads fail.
• On next page view, uploaded file does not appear in modal Library.
• Files uploaded from desktop computer do not appear in modal Library.
• Refreshing the page does not solve any of the above.

Next, with 22552.diff:

• Able to select and upload one image only.
• After first upload, subsequent uploads fail.
• On next page view, uploaded file does not appear in modal Library.
• Files uploaded from desktop computer do not appear in modal Library.
• Refreshing the page does not solve any of the above.

Next, with 22552-2.patch:

• Able to select and upload one image only.
• After first upload, subsequent uploads fail.
• On next page view, uploaded file appears in modal Library.
• Files uploaded from desktop computer appear in modal Library.
• Refreshing the page does not solve any of the above.

[miqrogroove]

Next, with 22552-2.patch and also adding nocache_headers(); to the top of function wp_ajax_upload_attachment() :

• Able to select and upload images one-at-a-time.
• All uploads successful.
• On next page view, uploaded file appears in modal Library.
• Files uploaded from desktop computer appear in modal Library.
• No problems inserting images into posts.
• No PHP notices.

On one occasion switching from "All media items" to "Images" after uploading an image on the Add New Post page, only the uploaded image appeared. Could not reproduce this. Possible ajax interruption.

[miqrogroove]

Refreshed and added one more function call.

[miqrogroove]

Previous tests based on 22552-3.patch​ were successful.

[azaozz]

The combined 22552-3.patch works here too.

[nacin]

Okay. I think we should side-step nocache_headers() for all of admin-ajax.php in 3.5. We can do that in 3.6.

[nacin]

Okay, here we go: ​http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results.

Yes, iOS 6 is caching POST requests. No, they shouldn't. Yes, we should issue caching headers as a workaround. I'm game for admin-ajax.php to get nocache_headers() at the top.

(These are the GET-based ajax actions: fetch-list, ajax-tag-search, wp-compression-test, imgedit-preview, oembed-cache, autocomplete-user, dashboard-widgets, logged-in.)

[nacin]

A more generic alternative.

[ryan]

In 22872:

Always send nocache_headers() for admin-ajax.php. This prevents iOS from caching ajax calls. ​http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results

Turn off multi selection uploads for mobile devices. Currently Plupload cannot upload multiple files in iOS Safari. Only the first file makes it to the queue.

Empty wp on unload to work around caching in iOS Safari.

Props azaozz, miqrogroove, nacin

fixes #22552

[westonruter]

In 56809:

Administration: Remove deprecated unload event handlers and use pagehide (and pageshow) when appropriate.

Use pagehide event instead of unload in the following cases:

• For classic editor to release the post lock.
• In Text widget to rebuild editor after dragging widget to new location in classic widgets interface.
• To clear out the window.name when navigating away from a post preview.
• To suspend heartbeat, while also using pageshow event to resume as if it had been a focused tab in case page restored from bfcache.

Also:

• Remove obsolete mobile cleanup code in js/_enqueues/lib/gallery.js (introduced in [9894]). Do same for src/js/_enqueues/wp/media/models.js (introduced in [22872]). See #22552.
• Remove obsolete Firefox-specific workaround in js/_enqueues/wp/mce-view.js from [39282]. See #38511.

Fixes #55491.
Props spenserhale, westonruter, adamsilverstein, azaozz, shawfactor, peterwilsoncc, swissspidy.