{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/318","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/318/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/318/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/318/events","html_url":"https://github.com/Automattic/wp-calypso/issues/318","id":118117971,"number":318,"title":"Editor: drag-n-drop upload can show incorrect rotation until upload is complete","user":{"login":"designsimply","id":1119271,"avatar_url":"https://avatars.githubusercontent.com/u/1119271?v=3","gravatar_id":"","url":"https://api.github.com/users/designsimply","html_url":"https://github.com/designsimply","followers_url":"https://api.github.com/users/designsimply/followers","following_url":"https://api.github.com/users/designsimply/following{/other_user}","gists_url":"https://api.github.com/users/designsimply/gists{/gist_id}","starred_url":"https://api.github.com/users/designsimply/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/designsimply/subscriptions","organizations_url":"https://api.github.com/users/designsimply/orgs","repos_url":"https://api.github.com/users/designsimply/repos","events_url":"https://api.github.com/users/designsimply/events{/privacy}","received_events_url":"https://api.github.com/users/designsimply/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Editor","name":"Editor","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Media","name":"Media","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Bug","name":"[Type] Bug","color":"e11d21"}],"state":"open","locked":false,"assignee":{"login":"rralian","id":134044,"avatar_url":"https://avatars.githubusercontent.com/u/134044?v=3","gravatar_id":"","url":"https://api.github.com/users/rralian","html_url":"https://github.com/rralian","followers_url":"https://api.github.com/users/rralian/followers","following_url":"https://api.github.com/users/rralian/following{/other_user}","gists_url":"https://api.github.com/users/rralian/gists{/gist_id}","starred_url":"https://api.github.com/users/rralian/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rralian/subscriptions","organizations_url":"https://api.github.com/users/rralian/orgs","repos_url":"https://api.github.com/users/rralian/repos","events_url":"https://api.github.com/users/rralian/events{/privacy}","received_events_url":"https://api.github.com/users/rralian/received_events","type":"User","site_admin":false},"assignees":[{"login":"rralian","id":134044,"avatar_url":"https://avatars.githubusercontent.com/u/134044?v=3","gravatar_id":"","url":"https://api.github.com/users/rralian","html_url":"https://github.com/rralian","followers_url":"https://api.github.com/users/rralian/followers","following_url":"https://api.github.com/users/rralian/following{/other_user}","gists_url":"https://api.github.com/users/rralian/gists{/gist_id}","starred_url":"https://api.github.com/users/rralian/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rralian/subscriptions","organizations_url":"https://api.github.com/users/rralian/orgs","repos_url":"https://api.github.com/users/rralian/repos","events_url":"https://api.github.com/users/rralian/events{/privacy}","received_events_url":"https://api.github.com/users/rralian/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/89","html_url":"https://github.com/Automattic/wp-calypso/milestones/Plans:%20Maintenance","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/89/labels","id":1768456,"number":89,"title":"Plans: Maintenance","description":"","creator":{"login":"fabianapsimoes","id":1248436,"avatar_url":"https://avatars.githubusercontent.com/u/1248436?v=3","gravatar_id":"","url":"https://api.github.com/users/fabianapsimoes","html_url":"https://github.com/fabianapsimoes","followers_url":"https://api.github.com/users/fabianapsimoes/followers","following_url":"https://api.github.com/users/fabianapsimoes/following{/other_user}","gists_url":"https://api.github.com/users/fabianapsimoes/gists{/gist_id}","starred_url":"https://api.github.com/users/fabianapsimoes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fabianapsimoes/subscriptions","organizations_url":"https://api.github.com/users/fabianapsimoes/orgs","repos_url":"https://api.github.com/users/fabianapsimoes/repos","events_url":"https://api.github.com/users/fabianapsimoes/events{/privacy}","received_events_url":"https://api.github.com/users/fabianapsimoes/received_events","type":"User","site_admin":false},"open_issues":44,"closed_issues":235,"state":"open","created_at":"2016-05-16T10:50:24Z","updated_at":"2016-10-10T13:45:01Z","due_on":null,"closed_at":null},"comments":5,"created_at":"2015-11-20T20:14:46Z","updated_at":"2016-10-11T16:29:25Z","closed_at":null,"body":"Raised by @nickmomrik \r\n\r\nWhat I Did: Dragged a portrait-oriented image into the editor.\r\n\r\nWhat I Expected: To see it displayed portrait.\r\n\r\nWhat Actually Happened: It first showed up sideways while uploading, then when completed it refreshed and displayed correctly.\r\n\r\nI'm using Firefox on a Mac.\r\n\r\nExample screencast https://cloudup.com/c-ERYMHtjSY and I'm attaching the image used.\r\n\r\n![img_6492](https://cloud.githubusercontent.com/assets/684691/9741542/f4a6fc5c-5628-11e5-9bf9-6a9c5d73dbb9.JPG)\r\n\r\n/hat tip nickmomrik for the original report\r\n\r\nNotes from @aduth\r\n\r\n> This would be an easy fix if [`image-orientation: from-image`](http://caniuse.com/#feat=css-image-orientation) had good browser support. Unfortunately that's not the case. There are a few node packages that help with parsing exif data.\r\n> \r\n> https://www.npmjs.com/browse/keyword/exif\r\n\r\n> I spent a decent part of my afternoon investigating solutions here. It's a tricky problem, especially when considering transitioning from the temporary media item to the persisted copy, and accounting for changes in width/height in the oriented media item.\r\n\r\n> There were two promising libraries for assisting with parsing metadata:\r\n> - https://github.com/blueimp/JavaScript-Load-Image\r\n> - https://github.com/bwindels/exif-parser\r\n> \r\n> I tried a few strategies for applying the orientation in the editor:\r\n> - Parsing the metadata using `exif-parser`, updating the temporary media copy with REST API-formatted attributes (`width`, `height`, `exif.orientation`), then applying CSS styles using `transform`.\r\n>  - Downside: `width` and `height` aren't recalculated when applying `transform`. Possibility that we'd need to strip additional classes or attributes before pulling content on save, or when replacing the item with the persisted copy.\r\n> - Attempting to generate a new image to replace the one in the editor\r\n>  - TinyMCE has some built-in utilities to help here: https://github.com/tinymce/tinymce/blob/2a58327/js/tinymce/plugins/imagetools/classes/ImageTools.js#L21\r\n>  - `blueimp-load-image` can generate a rotated canvas object to insert into the editor, though I had encountered some trouble with it respecting orientation\r\n> \r\n> More information about EXIF rotation: http://sylvana.net/jpegcrop/exif_orientation.html"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/252969952","html_url":"https://github.com/Automattic/wp-calypso/issues/318#issuecomment-252969952","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/318","id":252969952,"user":{"login":"lancewillett","id":66797,"avatar_url":"https://avatars.githubusercontent.com/u/66797?v=3","gravatar_id":"","url":"https://api.github.com/users/lancewillett","html_url":"https://github.com/lancewillett","followers_url":"https://api.github.com/users/lancewillett/followers","following_url":"https://api.github.com/users/lancewillett/following{/other_user}","gists_url":"https://api.github.com/users/lancewillett/gists{/gist_id}","starred_url":"https://api.github.com/users/lancewillett/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lancewillett/subscriptions","organizations_url":"https://api.github.com/users/lancewillett/orgs","repos_url":"https://api.github.com/users/lancewillett/repos","events_url":"https://api.github.com/users/lancewillett/events{/privacy}","received_events_url":"https://api.github.com/users/lancewillett/received_events","type":"User","site_admin":false},"created_at":"2016-10-11T16:29:25Z","updated_at":"2016-10-11T16:29:25Z","body":"@rralian Checking in on the progress here — is there a relate pull request, does it need help along (testing, review)? "}}
{"actor":{"display_login":"lancewillett"}}