Skip to content

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

Open
mtwhitney wants to merge 1 commit intophpbb:3.3.xfrom
mtwhitney:ticket/16682
Open

[ticket/16682] Fix plupload to work with rotated images in all browsers#6131
mtwhitney wants to merge 1 commit intophpbb:3.3.xfrom
mtwhitney:ticket/16682

Conversation

@mtwhitney
Copy link
Copy Markdown

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

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
@3D-I
Copy link
Copy Markdown
Contributor

3D-I commented Jan 21, 2021

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
Copy link
Copy Markdown
Author

mtwhitney commented Jan 21, 2021

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
Copy link
Copy Markdown
Contributor

3D-I commented Jan 21, 2021

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

@DavidIQ
Copy link
Copy Markdown
Member

DavidIQ commented Jan 21, 2021

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
Copy link
Copy Markdown
Author

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
Copy link
Copy Markdown
Member

DavidIQ commented Jan 21, 2021

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
Copy link
Copy Markdown
Author

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

@3D-I
Copy link
Copy Markdown
Contributor

3D-I commented Jan 24, 2021

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
Copy link
Copy Markdown

gvp9000 commented Apr 10, 2024

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
Copy link
Copy Markdown
Member

DavidIQ commented Apr 10, 2024

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
Copy link
Copy Markdown

gvp9000 commented Apr 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants