Page MenuHomePhabricator

Drag-and-drop of image from the file page into VisualEditor should insert a thumbnail, not an external link
Open, MediumPublic1 Estimate 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

matmarex created this task.Nov 25 2016, 5:33 PM
Restricted Application added a project: VisualEditor. · View Herald TranscriptNov 25 2016, 5:33 PM
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 triaged this task as Medium priority.Nov 29 2016, 8:12 PM
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 added a subscriber: Jdforrester-WMF.

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.

Deskana moved this task from To Triage to Freezer on the VisualEditor board.Sep 20 2017, 12:40 PM
TheDJ added a subscriber: TheDJ.Dec 20 2017, 9:25 PM

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.