Preview Orientation

[mahsaad]

Hi,

I'm using Plupload 2.1.9, the core API I'm displaying a preview of the image before upload, some of the images appears upside down or sideways, specially images that are taken by a mobile phone

I did a LOT of googling about the issue, from stackoverflow to github ... forums, got not where

So i did a test in the examples section on the plupload website in the UI Widget, same issue

http://www.plupload.com/examples/

If you try the demo from your mobile, you'll notice the preview image doesn't show with the correct orientation

I would like to mention, that in my application, even that the preview appears upside down, once uploaded, it's uploaded with the correct orientation, (since i set preserve_headers: false in the plupload options)

https://i.imgsafe.org/7efef4c33d.png

The images that appears in the wrong orientation, are from a mobile phone, resizing them on the computer, works fine.

Some research mentioned about the exif data in the image, but that got me now where

Here's a sample of my code:

`uploader.bind('FilesAdded', function(up, files) {

    //maximum number of allowed files to add
    max_files = 5 - nb_images;

    if (up.files.length > max_files) {
        up.splice(max_files);
    }

    $.each(files, function(i, file){

        img = new mOxie.Image();

        img.onload = function() {

             thumb_wrapper = $('<div/>', { class: 'thumbnail pull-left', id: file.id }).appendTo('#files');

            $("#files .thumbnail").css("position", "relative");

            this.crop({
                width: 120,
                height: 120,
                preserveHeaders: true
            });

            this.embed(thumb_wrapper.get(0), {
                /*width: 120,
                height: 120,*/
                crop: true
            });

            //initialize the remove button
             removeBtn = "<a href='javascript:void(0)' class='img-del' style='background: #CC0000; color: #FFF; width: 25px; height:25px; position:absolute; right:4px; padding-top: 3px;'>";

            removeBtn = removeBtn + "<strong>X</strong>";

            removeBtn = removeBtn + "</a>";

            $("#" + file.id).append(removeBtn);

        };

        img.onembedded = function() {
            this.destroy();
        };

        img.onerror = function() {
            this.destroy();
        };

        img.load(this.getSource());   

    });

});`

Changing the preserveHeaders to false, won't make a difference Any help would be greatly appreciated

[mahsaad]

Ok, this might help somebody who has the same issue and i hope the developers for the Plupload debug the issue After some research, I fell on this stackoverflow link: http://stackoverflow.com/questions/17339899/plupload-html5-preview-after-fileselect

which led me to the jsfiddle in the answer: http://jsfiddle.net/Ec3te/2/

where the preview appears in the correct orientation by testing with the same pictures i was using before to upload and had the orientation issue with.

Noticed that the version of the plupload.full.min.js file in the jsfiddle is: v1.2.1 while the one that comes with the plupload v2.1.9 has the version: 1.3.5

Switched those file it's solved my preview orientation problem

Hoping in the next release of the plupload this will be fixed

Regards,

[jayarjo]

Yeah, that's kind of serious problem with all fiddles using library files from master branch. Since some of our recent releases were made from other branches...

I should probably say that jsFiddle is not our fiddler of choice for Plupload (as well as any other fiddlers around the web), since it doesn't support legacy browsers and Plupload is all about legacy browsers. So we developed our own Playground here: http://play.plupload.com.

[mahsaad]

Hi Jayarjo,

Thanks for the reply. Good to know that there is a test environment for the plupload.

Regardless, my issue got fixed after switching the plupload.full.min.js file to the older version, so it's more related to the plupload.full.min.js library

Wondering if it's going to be fixed in next release

Thanks again,

[jayarjo]

The problem wasn't the plupload.full.min.js itself but the fact that fiddle was using older version of it.

[jayarjo]

Related: http://www.plupload.com/punbb/viewtopic.php?id=15103

[reichertm]

Just to confirm the issue still exists in Plupload 2.3.6. Tried both with iPhone and an Android phone. Took a picture in portrait orientation and it shows up rotated in the preview. However the uploaded files have correct orientation. The following is how I'm generating the preview (Coffescript):

    uploader.bind "FilesAdded", (up, files) ->
      $.each files, (i, file) ->
        preloader = new plupload.moxie.image.Image()
        preloader.onload = () ->
          preloader.downsize(2000, 1500)
        preloader.load file.getSource()

[strider72]

Part of the issue may be that the Safari engine on iOS displays an image according to its EXIF rotation. NO other browsers do this. WTH Apple....

https://caniuse.com/#search=image-orientation