[ticket/16682] Fix plupload to work with rotated images in all browsers

[mtwhitney]

Currently ACP attachment settings that engage plupload (image resizing)
will not work correctly with browsers that implement auto-image rotate based
on EXIF metadata. This happens regardless of whether or not the new ACP EXIF
stripping option is selected. As long as phpBB ships with plupload it seems
this should be fixed.

(1) added a flag to plupload.full.js to do auto-rotation if the browser does
not do it already, and does not auto-rotate if the browser already did it and
(2) added code to plupload.html to set the flag. Both changes are small.
(More details in ticket)

PHPBB3-16682

Checklist:

• Correct branch: master for new features; 3.3.x for fixes
• Tests pass
• Code follows coding guidelines: master and 3.3.x
• Commit follows commit message format

Tracker ticket (set the ticket ID to your ticket ID):

https://tracker.phpbb.com/browse/PHPBB3-12345

[3D-I]

It is not possible to edit the vendor's library JS file as phpBB did not write it, you should contact their creators and create a PR with them instead.

https://github.com/moxiecode/plupload

This is the primary reason why I suggested you use an extension in the tracker. Also, the settings you're talking about aren't involved in the whole thing, there is a logic in the code that follows a flow that can't be changed in this way, as far as I know.

[mtwhitney]

As I said in my first forum post here [https://www.phpbb.com/community/viewtopic.php?f=64&t=2429206&start=45], plupload has been commercialized and appears to be a dead public domain product - for several years.

[3D-I]

I know. But you can't edit the JS otherwise someone else would have already done it don't you think?

[DavidIQ]

Can't really tell what you changed in the minified file so we would have no idea what has changed. Your only option here is to override whatever function(s) it is you changed in the minified file in plupload.js instead with your full unminified changes.

[mtwhitney]

Here is the original, unminified, snippet:

                function f(e, i) {
                    var n = Math.PI / 180, r = document.createElement("canvas"), o = r.getContext("2d"), a = e.width, s = e.height;
                    switch (t.inArray(i, [ 5, 6, 7, 8 ]) > -1 ? (r.width = s, r.height = a) : (r.width = a, 
                    r.height = s), i) {
                      case 2:
                        o.translate(a, 0), o.scale(-1, 1);
                        break;
                      case 3:
                        o.translate(a, s), o.rotate(180 * n);
                        break;
                      case 4:
                        o.translate(0, s), o.scale(1, -1);
                        break;
                      case 5:
                        o.rotate(90 * n), o.scale(1, -1);
                        break;
                      case 6:
                        o.rotate(90 * n), o.translate(0, -s);
                        break;
                      case 7:
                        o.rotate(90 * n), o.translate(a, -s), o.scale(-1, 1);
                        break;
                      case 8:
                        o.rotate(-90 * n), o.translate(-a, 0);
                    }
                    return o.drawImage(e, 0, 0, a, s), r;
                }

and here is the modified version:

                function f(e, i) {
                    var n = Math.PI / 180, r = document.createElement("canvas"), o = r.getContext("2d"), a = e.width, s = e.height;
                    r.width = a, r.height = s;
                    if (browserRotates === true) {
                        // Browser auto-rotated image drawn to canvas based on EXIF so do nothing
                        return o.drawImage(e, 0, 0, a, s), r;
                    }
                    if (t.inArray(i, [ 5, 6, 7, 8 ]) > -1) {
                        r.width = s, r.height = a;
                    }
                    switch (i) {
                      case 2:
                        o.translate(a, 0), o.scale(-1, 1);
                        break;
                      case 3:
                        o.translate(a, s), o.rotate(180 * n);
                        break;
                      case 4:
                        o.translate(0, s), o.scale(1, -1);
                        break;
                      case 5:
                        o.rotate(90 * n), o.scale(1, -1);
                        break;
                      case 6:
                        o.rotate(90 * n), o.translate(0, -s);
                        break;
                      case 7:
                        o.rotate(90 * n), o.translate(a, -s), o.scale(-1, 1);
                        break;
                      case 8:
                        o.rotate(-90 * n), o.translate(-a, 0);
                    }
                    return o.drawImage(e, 0, 0, a, s), r;
                }

[DavidIQ]

I might not have been clear. We aren't going to accept modification of a vendor's library so this pr cannot be merged as is. Your option for review and merge consideration will be to override the function through plupload.js and then undo any changes to the vendor library.

[mtwhitney]

I appreciate your reply. I finally see your position on this approach.

[3D-I]

As I have tried to explain, just tried... (forgive me I am not English mother-tongue).. In physics, for every action there is an equal and opposite reaction. In this case this approach in any case is not what it should be. You want to do it server side (PHP) , that's it.
Hence I made an extension about all of that. 😄

[gvp9000]

This bug must be fixed one way or another ... plupload seems to be a dead project ...
For 4 months I was trying to fix the problem ... some people told me that it was a samsung phone bug, xiaomi phone bug, iphone phone bug etc but when I uploaded the patched files I had zero problems with all the devices.
Its very annoying ...

As far as I know it's not illegal to modify the code of a AGPLv3 licensed product.
https://www.gnu.org/licenses/agpl-3.0.en.html

"Developers that use our General Public Licenses protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License which gives you legal permission to copy, distribute and/or modify the software."

Am I wrong ?

[DavidIQ]

Maybe what was said can be explained this way:

In JavaScript you can override functions. Something like:

function foo() { console.log("fooing"); }
foo = function bar() { console.log("baring"); }

The person that sent in this PR knows what exactly they changed so it would have been easiest for them to isolate their changes and do such an override and we would be able to review the changes. This never happened unfortunately and now there are conflicts specifically with the plupload min file so I'm wondering if this is even needed at all. Could maybe take a look and make a proper PR later.

However which of the two files fixed it for you?

[gvp9000]

However which of the two files fixed it for you?

I changed (patched) both files from here
https://github.com/phpbb/phpbb/pull/6131/files

phpBB/assets/plupload/plupload.full.min.js
and
phpBB/styles/prosilver/template/plupload.html