Uppy: iOS photos display rotated

[MDJCM]

On the demo at: https://uppy.io/examples/dashboard/

Selecting a portrait photo on an iPhone displays it rotated. I attached the original photo and the screenshot.

[MDJCM]

I know this is a common iPhone/iOS problem but other sites have handled it and I think sooner or later this uploader will have to handle the same rotate issue.

[kvz]

Thanks for reporting this @MDJCM! Our commercial service Transloadit gets this right (https://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/). I wonder if we can also resolve this purely in the browser on the client side (so without using our service). If we can, we will!

[pbowyer]

Re the client-side image preview (handling it server-side is beyond uppy's responsibility surely?) it is possible to get the EXIF rotation and act on it when using the HTML <canvas> tag for resizing. My findings:

• https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images which points to this library https://github.com/blueimp/JavaScript-Load-Image, plus many code solutions
• code: https://gist.github.com/runeb/c11f864cd7ead969a5f0

If I get a chance I'll have a look at Uppy's source code. I'm not up-to-speed with ES6 so reading the source is a bit hit and miss.

[alexbde]

I'm experiencing the same issue. Is there any progress on this? Or maybe a client-side workaround?

[somethingchanged]

Has there been any progress on this? If not, can anybody point to where in the codebase the rotation might be happening? If it's an issue with a third-party library, which one would it be? I can't find in the codebase where the orientation is determined and rotation performed.

[goto-bus-stop]

Sorry, no progress. @somethingchanged We don't rotate the images in Uppy, it seems that that is exactly the problem :sweat_smile: Probably, to make the thumbnails display correctly, we need to change the thumbnail-generator to check the EXIF metadata for JPEG files, and apply the appropriate rotation there.

[mppben]

Thanks for the update, @goto-bus-stop. I've had a go at looking into this, without any success on the front-end. My first effort was to rotate all thumbnails when writing the thumbnails to the canvas during resizing. The code executes without error but doesn't rotate them. If that was successful, my plan was to add code to identify the need to rotate and return the type of rotation needed. I'm not a JS dev so this effort would be a bit of a hack, and something I could share in pieces of code rather than contributing to the codebase.

For now, I have rotation working in the backend, so while it doesn't look great in the web interface, at least the end result has the correct orientation. Here's a snippet of PHP code from my function for creating thumbnails on the back-end:

$imageSource = ImageCreateFromjpeg($fromFilename);
if (!$imageSource) {
    return false;
}

$imageDestination = ImageCreateTrueColor($targetWidth, $targetHeight);
if (!$imgDestination) {
    return false;
}

if (!imagecopyresampled($imageDestination, $imageSource, 0, 0, 0, 0, $targetWidth, $targetHeight, $originalWidth, $originalHeight)) {
    return false;
}

$exif = @exif_read_data($filename);

if (!$exif) {
    $exif = array();
}

// Handle rotation of images, particularly those from iOS devices
if (isset($exif['Orientation']) && $exif['Orientation']) {
    switch ($exif['Orientation']) {
        case 3:
            $imgDestination = imagerotate($imageDestination, 180, 0);
            break;
        case 6:
            $imgDestination = imagerotate($imageDestination, -90, 0);
            break;
        case 8:
            $imgDestination = imagerotate($imageDestination, 90, 0);
            break;
    }
}

return imagejpeg($imageDestination, $toFilename, $quality * 100);

[antony]

Just run into this issue. It's particularly relevant when you upload photos from a mobile phone since the phone will show the adjusted orientation, but when the image is uploaded, it will show something completely different.

I don't send my images to a server, I post them directly to a signed url from GCP, so I don't have the opportunity to rotate them there.

[kvz]

This issue will be closed when we merge the PR :tada:

[somethingchanged]

Great stuff, @kvz. Any idea on when that merge might be made?

[kvz]

It is pending review but we’ve been a bit swamped! I agree it has been open for too long, we’ll try to improve!