CODEWITHSUNDEEP
javascriptjqueryimagefile-uploadplupload
Saad
Saad

Reputation: 1

Plupload preview image appears upside down or sideways when uploading images taken from mobile

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

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

Plupload Example on the plupload website (UI Widget)

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)

Preview before upload on my website

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

Upvotes: 0

Views: 1073

Answers (1)

Saad
Saad

Reputation: 1

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:

Plupload Html5 preview after Fileselect

which led me to the jsfiddle in the answer:

[http://jsfiddle.net/Ec3te/2/][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,

Upvotes: 0

Related Questions