Upgrade the file uploader

[azaozz]

As discussed at the dev. meetup on 2011/07/20, merge the GSoC project ​http://gsoc.trac.wordpress.org/search?q=jacobwg ​http://gsoc.trac.wordpress.org/browser/2011/jacobwg in trunk.

[jacobwg]

Initial patch on latest WP trunk (r18463)

[jacobwg]

To test, unzip the wp-includes.zip at the WP root (the new Plupload libraries with binary files), apply the patch, and delete wp-includes/js/swfupload/* and wp-includes/js/swfobject.js.

[SergeyBiryukov]

With the patch applied, there's a warning when uploading a file from Media > Add New:

Notice: Use of undefined constant IFRAME_REQUEST - assumed 'IFRAME_REQUEST' in wp-admin/includes/media.php on line 1569

After uploading:

Notice: Undefined variable: resize in wp-admin/includes/file.php on line 334

[jacobwg]

New patch - should fix the issues with the previous patch

[ocean90]

Nice work!

• The link to the flash file has an error, it's js/plupload/plupload.flash.swf. But after the change it seems that it doesn't work anyway. ( OX Chrome and Firefox)

• Also view this ticket #11520. If it's final check if you need to use localize or add_script_data

• If I want to upload a ZIP file I get this message (because it's not an image ;) )

Warning: imagecreatefromstring() [function.imagecreatefromstring]: Data is not in a recognized format in wp-includes/media.php on line 254
376

• Don't know if it's public, but "Allowed files" isn't translatable.

[ocean90]

Related: #14829, #17578

[jacobwg]

plupload libraries for inclusion

[jacobwg]

Thanks, ocean90! I believe I fixed the things you mentioned... I've uploaded a new patch (patch number 3) and replaced the wp-includes.zip as the patch now contains most of the new files in that folder.

As always, you can get my latest updates at ​http://gsoc.svn.wordpress.org/2011/jacobwg

Thanks for testing!

[pento]

So, is it too late for feature requests? :-D

In wp-admin/includes/admin.php, media_upload_form(), you have JavaScript to create the uploader, and bind the various events to the handler functions. Currently, you only have a filter for the uploadSuccess() function, plupload_success_handler. It would be nice to have filters on all of the other event handlers, too.

[azaozz]

Replying to pento:

...Currently, you only have a filter for the uploadSuccess() function, plupload_success_handler. It would be nice to have filters on all of the other event handlers, too.

Perhaps we can add JS hooks there. We are using simple pubsub in DFW that works very well (thanks to @koopersmith that put it together), maybe it's time to make it global.

[azaozz]

There are two TODOs in script-loader:

1. "find out if we can use the plupload.full.js (it does load browserplus)". Think we should use it. There may be time in the future when we turn browserplus support on.

2. "find out if we really need this debug clause with plupload". SCRIPT_DEBUG is checked so we can load the .dev.js files but that concerns only our JS. We don't have non-minified versions for most external libraries (jQuery, UI, etc.) so no need to check for SCRIPT_DEBUG. Or perhaps we can load plupload.full.js by default and switch to loading the different components if SCRIPT_DEBUG.

[azaozz]

In [18482]:

Pluploader take 1, props jacobwg, see #18206

[azaozz]

In [18483]:

Remove debug bits, see #18206

[azaozz]

Will probably need to keep the old uploader around too for plugin compat. Also to make sure it still can be used.

[scribu]

It works, but it looks just like before. Am I missing something?

[ocean90]

Am I missing something?

No, only that it's now HTML5 instead of Flash (if you have a modern browser. ;))

[dimadin]

I don't see why are SWFObject and SWFUpload removed since they are used by plugins, we should keep them.

Also, you have a typo here:

'image_memory_exceeded' => __('Memery exceeded. Please try another smaller file.'),

[jacobwg]

Fix for spelling error

[jacobwg]

Replying to scribu:

It works, but it looks just like before. Am I missing something?

Yeah, it's just a backend change - the currently enabled runtimes are html5, silverlight, flash, and html4 - so the uploader will pick the first one in that order that the browser supports when doing the uploading. The UI is the same (with the addition of a resize option box).

[azaozz]

In [18484]:

Add SWFUpload back for plugins that queue it directly, fix some escaping in media.php, see #18206

[scribu]

[18484] introduced a typo in script-loader.php:

// error messagoe for both plupload and swfupload 

[ocean90]

Related: #16518

[aaroncampbell]

I can drag/drop to upload if I go into a post and click to add an image. However, if I go to Media->Add New (wp-admin/media-new.php) drag/drop isn't working for me.

I'm on Chrome on Win7

[kirasong]

I'm noticing that the default size is "Full Size" rather then "Medium" with the new uploader.

Is this intentional?

[jacobwg]

Replying to DH-Shredder:

I'm noticing that the default size is "Full Size" rather then "Medium" with the new uploader.

Is this intentional?

Yeah, that was intentional as per a request from azaozz. I think it's mainly intended to combat the uploading of huge resolutions when they will never get used on the site.

[kirasong]

Replying to jacobwg:

Yeah, that was intentional as per a request from azaozz. I think it's mainly intended to combat the uploading of huge resolutions when they will never get used on the site.

Hmm. It seems to me that this could get a bit frustrating, as I often do want my "actual" image to be larger than the one that's in the post.

If you can choose which size is default within settings somewhere, this sounds fine, although I do think you'll get a few complaints, since I can think of very few times I want a full size image inline within my post.

[azaozz]

Replying to DH-Shredder:

Resizing the image on/after uploading is optional (that's why we have the checkbox). If it's selected the image will be resized to the "large" size in Media Settings->Image sizes and then saved. You can of course uncheck the checkbox and the original image will be uploaded and saved. We will need better explanation there :)

When the image matches the "large" size, the choice in media library skips it and offers "full size" instead as they are the same. There's no default size there, WP "remembers" the last size you selected.

[azaozz]

Replying to aaroncampbell:

I can drag/drop to upload if I go into a post and click to add an image. However, if I go to Media->Add New (wp-admin/media-new.php) drag/drop isn't working for me.

Yes, not working there yet. Will need to add another wrapper. On the other hand there are plans to change the UI around the uploader so the current HTML will disappear.

[duck_]

If we're trying to get nice output we should get it to work

[azaozz]

In [18489]:

Remove tabs from JS, props duck_, see #18206

[kirasong]

Replying to azaozz:

<snip>
When the image matches the "large" size, the choice in media library skips it and offers "full size" instead as they are the same. There's no default size there, WP "remembers" the last size you selected.

Gotcha, thanks for the explanation! Essentially, what I'd been noticing was that WP wasn't "remembering" my choice between image inserting "sessions" (i.e. new post -> insert image, insert image [remembers]; another new post -> insert image [forgets last choice] )

However, I'm now (of course) not able to reproduce it again, so it's possible it was a one-time quirk. If I can find a way to regularly reproduce it again, I'll post here.

[Otto42]

Bug: The new resize option box doesn't work. It always resizes my uploaded images even with it unchecked. I'm attempting to upload an image with a 3000px size, and it's resizing to 1024 on upload.

[ocean90]

I can confirm the bug mentioned by otto42.

Is it possible to hide the Or you can drop the files into this window notice if the runtime, eg flash, doesn't support it?

[ocean90]

18206.fix.resize.patch will fix the resize bug.

---

Another warning:

Notice: Undefined variable: plupload in /wp-admin/includes/media.php on line 1592

[ocean90]

I have tested the Silverlight runtime but it fails. Chrome and IE on Win 7 64bit.

Chrome:

Uncaught TypeError: Cannot read property 'length' of null

IE:

SCRIPT5007: Unable to get value of the property 'length': object is null
or undefined
plupload.silverlight.js?ver=1.4.3.2, line 1 letter 329

It works on the demo page.

---

Drag&drop doesn't work on /wp-admin/media-new.php.

[azaozz]

In [18517]:

Fix handling of resizing images after upload, props ocean90, see #18206

[ocean90]

Related: #18540

[kurtpayne]

JavaScript error when scale images is unchecked

[kurtpayne]

Successful upload when scale images is checked

[kurtpayne]

Replying to ocean90:

I have tested the Silverlight runtime but it fails. Chrome and IE on Win 7 64bit.

Chrome:

Uncaught TypeError: Cannot read property 'length' of null

IE:

SCRIPT5007: Unable to get value of the property 'length': object is null
or undefined
plupload.silverlight.js?ver=1.4.3.2, line 1 letter 329

It works on the demo page.

This seems to be related to a bug with plupload's silverlight library. It doesn't like the image_resize checkbox coming through as a null value. See ie8-plupload-silverlight-resize-off.png​ and ie8-plupload-silverlight-resize-on.png​ for an example. The patch on #18540 should resolve this.

[azaozz]

If this is caused by the 'image_resize' checkbox (i.e. our implementation) we should probably ensure it doesn't pass a null value regardless of whether that's fixed in plupload.

[kurtpayne]

Workaround for plupload.silverlight jsonSerialize bug

[kurtpayne]

Replying to azaozz:

If this is caused by the 'image_resize' checkbox (i.e. our implementation) we should probably ensure it doesn't pass a null value regardless of whether that's fixed in plupload.

18206.diff​ replaces the null value with a false value. If I've read the php code correctly, it's looking for a true value, so this change shouldn't affect the server-side resizing operation. Tested on Windows 7 64-bit + FF 6, Chrome 13, IE 8.

[azaozz]

Replying to kurtpayne:

...If I've read the php code correctly, it's looking for a true value, so this change shouldn't affect the server-side resizing operation.

Yes, it specifically matches the string "true".

In the future could you patch the .dev.js file(s). It's easier for you (they are not minified) and it's easier to read the changes. To use the non-minified js files in WordPress add define('SCRIPT_DEBUG', true); to the top of your wp-config.php file.

[azaozz]

In [18620]:

Fix silverlight uploading when not resizing files on the fly, props kurtpayne, see #18206

[SergeyBiryukov]

Since [18482], there's a notice on the uploader page:

Notice: Undefined variable: plupload in wp-admin/includes/media.php on line 1591

To reproduce:

• Visit "Media" > "Add New" with Debug Bar enabled.
• Or "Edit Post" > "Add an Image", open Firebug, search for "undefined" in the thickbox window (the notice is hidden by hide-if-js class).

Code reference:
​http://core.trac.wordpress.org/browser/trunk/wp-admin/includes/media.php?rev=18596#L1591

There used to be media_upload_html_bypass() function hooked to post-html-upload-ui, which accepted $flash as a parameter. The function is now gone, so perhaps we can remove $plupload parameter from there, or just pass false.

[azaozz]

Replying to SergeyBiryukov:

Yes, with the old uploader it was possible to select whether to use the flash (multi-file) or the standard 'file' form field. That was needed as the old flash method had numerous problems with certain server configs so some users couldn't use it at all.

The new uploader tries several different multi-file methods before falling back to the single file field. We can probably add back the old single-file bypass if it turns out it's still needed. More importantly on the Add new media screen we need a <noscript> way of uploading a file too.

[scribu]

The media uploader is currently borked. I get a JS error from Plupload:

t.name is undefined

[kurtpayne]

Replying to scribu:

The media uploader is currently borked. I get a JS error from Plupload:

t.name is undefined

I am unable to reproduce this with the latest trunk in Chrome / IE / Firefox with or without the debug bar. Can you post the steps you're using and the browser?

[kurtpayne]

Replying to SergeyBiryukov:

Since [18482], there's a notice on the uploader page:

Notice: Undefined variable: plupload in wp-admin/includes/media.php on line 1591

...
Code reference:
​http://core.trac.wordpress.org/browser/trunk/wp-admin/includes/media.php?rev=18596#L1591

... perhaps we can remove $plupload parameter from there, or just pass false.

I can duplicate this, too. I can't find a reference to $plupload anywhere else in the code. Any reason this is still needed?

[ocean90]

I already mentioned the notice in comment:32.

In comment:33 I mentioned, that the Drag&Drop feature isn't working on media-new.php. Should it working there too?

[azaozz]

In [18674]:

Improve handling of plupload init and add a filter, stop including cookies in the init (not needed with plupload), see #18206

[azaozz]

In [18701]:

Update plupload to 1.5b and add "drop area" for drag and drop uploading, see #18206

[ocean90]

azaozz: We need to merge media.css into wp-admin.css or enqueue media.css on media-new.php or copy the drag-drop style part into wp-admin.css, because on media-new.php the drag&drop box isn't styled.

[azaozz]

In [18703]:

Add the styling for "drop area" to Media->Add New, see #18206

[azaozz]

Replying to ocean90:

Right. I had media.css merged but it's mostly redundant and since we were trying new uploader styles, had to leave it stand-alone with the intention to delete it completely. Perhaps we can merge it in 3.4 when we will have a look at the uploader UI (drop the popup, etc.) hopefully.

In any case would love some patches on #18314.

[jane]

Feature freeze! This new feature is in core. At this point, if people find new bugs with it, they should open individual bug tickets.

[azaozz]

In [18902]:

As per the recommendations: make the text inside the files drop box larger, improve the explanation about the "resize image" checkbox, see #18206

[azaozz]

In [18957]:

Fix visibility of Select Files button in IE7, change border color when hovering over the drag drop area of the uploader, see #18918, see #18206

[azaozz]

In [19100]:

Fix uploader "file size exceeded" error message, fix displaying uploaded queue errors, see #18206

[azaozz]

In [19177]:

Uploader: split "Drop files here -or-..." on two lines, see #18206

[azaozz]

In [19247]:

Uploader: fix progress bar JS and update the style (light blue bars), see #18206

[azaozz]

In [19262]:

Uploader: fix file-size-exceeded error handling, see #18206