Page MenuHomePhabricator

Drag-and-drop of image from the file page into VisualEditor should insert a thumbnail, not an external link
Open, MediumPublic1 Estimated Story Points

Description

If I drag the big image thumbnail from a file page (e.g. https://commons.wikimedia.org/wiki/File:Kinder-Bueno-Split.jpg, https://commons.wikimedia.org/wiki/File:Cementerio,_Tulc%C3%A1n,_Ecuador,_2015-07-21,_DD_60.JPG) into a VisualEditor surface, I expect the image to be inserted as thumbnail (or the "Media settings" dialog to pop up). Instead, I get an external link to the file (in Firefox), or nothing at all (in Chrome).

https://meta.wikimedia.org/wiki/2016_Community_Wishlist_Survey/Categories/Commons#Drag_and_drop_Commons_files_to_Wikimedia_projects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Playing with http://html5demos.com/drag-anything and dragging the image from https://commons.wikimedia.org/wiki/File:Kinder-Bueno-Split.jpg, I see this:

In Chrome:

https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/plain)
https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/uri-list)
<img alt="File:Kinder-Bueno-Split.jpg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/800px-Kinder-Bueno-Split.jpg" width="800" height="267" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/1200px-Kinder-Bueno-Split.jpg 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/1600px-Kinder-Bueno-Split.jpg 2x" data-file-width="2700" data-file-height="900"> (content-type: text/html)

In Firefox:

https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg File:Kinder-Bueno-Split.jpg (content-type: text/x-moz-url)
https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/x-moz-url-data)
File:Kinder-Bueno-Split.jpg (content-type: text/x-moz-url-desc)
https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/uri-list)
<html class="client-js ve-available" dir="ltr" lang="en"><body class="mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-6 ns-subject page-File_Kinder-Bueno-Split_jpg rootpage-File_Kinder-Bueno-Split_jpg skin-vector action-view"><div id="content" class="mw-body" role="main"><div id="bodyContent" class="mw-body-content"><div id="mw-content-text"><div class="fullImageLink" id="file"></div></div></div></div></body></html> (content-type: text/_moz_htmlcontext)
0,0 (content-type: text/_moz_htmlinfo)
<div style="float: left; width: 800px; position: relative;"><div style="position: relative; width: 800px;"><a href="https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg"><img alt="File:Kinder-Bueno-Split.jpg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/800px-Kinder-Bueno-Split.jpg" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/1200px-Kinder-Bueno-Split.jpg 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/1600px-Kinder-Bueno-Split.jpg 2x" data-file-width="2700" data-file-height="900" width="800" height="267"></a></div></div> (content-type: text/html)
https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/plain)
(content-type: application/x-moz-nativeimage)
(content-type: application/x-moz-file-promise)
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Kinder-Bueno-Split.jpg/800px-Kinder-Bueno-Split.jpg (content-type: application/x-moz-file-promise-url)
800px-Kinder-Bueno-Split.jpg (content-type: application/x-moz-file-promise-dest-filename)

In Edge:

https://upload.wikimedia.org/wikipedia/commons/a/a0/Kinder-Bueno-Split.jpg (content-type: text/plain)

So I guess we'll need a way to detect whether a drag-and-dropped URL refers to an image accessible from the wiki, and if so, extract the image name and insert a thumbnail.

Jdforrester-WMF moved this task from To Triage to TR0: Interrupt on the VisualEditor board.
Jdforrester-WMF set the point value for this task to 1.
Jdforrester-WMF subscribed.

Hmm, this sounds like a regression. It used to start the media upload dialog.

No, dragging and dropping an image file from your computer still starts an upload.

Bump. There's no media upload dialog as tested with Chrome and Safari.

There shouldn't be an upload dialog in this case, the file is already uploaded on Commons. It should just insert the thumbnail, or maybe display a properties dialogs. Are we talking about the same thing? Is the actual upload dialog not working?

There shouldn't be an upload dialog in this case, the file is already uploaded on Commons. It should just insert the thumbnail, or maybe display a properties dialogs. Are we talking about the same thing? Is the actual upload dialog not working?

Thanks for that clarification. In that case, the upload dialog works fine but dragging in a thumbnail from commons doesn't work - no thumbnail insert nor a properties dialog.

The dropped HTML in this case is:

<img alt="File:Name.jpg" src="thumburl/a/ab/Name-1000px" ...>

We could look at the alt attribute and see if it is a file namespace title, but I'm not sure how robust that is. Either we need to be able to convert the thumburl back to an file target, or we need to add more attributes to the image page.

This still seems like a nice quick win, that would make the life of the causal contributor a lot simpler. One of those smaller features that would make people appreciate VE a lot.