Way in VisualEditor to initiate Commons file uploading, and insert image on completion
Closed, ResolvedPublic40 Estimated Story Points
Actions

Assigned To

Authored By

	• brooke
	Jun 28 2012, 5:17 PM

Description

Our traditional editor toolbars have buttons to insert a [[File:Foo.png]] or similar, but not that would help you with the actual editing process.

A button that launches the UploadWizard -- possibly uploading to Commons -- and ends with inserting the image(s) into the article would be a big leap forward.

User journey:

User clicks on "insert media"
In the dialog, user clicks on "upload new"

Screen Shot 2015-06-08 at 16.09.21.png (460×629 px, 76 KB)

… or 'User drags a file into the editor', see T40031

Dialog is launched

Screen Shot 2015-06-08 at 15.59.27.png (552×475 px, 189 KB)

User confirms that the media file is theirs, and accepts that it will thus be under the default licence (CC-BY-SA-3.0); file starts uploading with a progress bar (indeterminate for now)

Screen Shot 2015-06-08 at 16.10.48.png (361×385 px, 148 KB)

… or user is directed to Special:Upload if local uploads are available.

"To upload a file which cannot be freely re-used, please use the __restricted form__."

… or user is directed to Special:UploadWizard on Commons.

"To upload a file created by someone else, or under a different licence, please use the __advanced form__."

User enters a title.

Screen Shot 2015-06-08 at 16.11.27.png (473×508 px, 235 KB)

User enters a description (default in the user's interface language, with a control to set the language to something else).

User optionally over-rides the date of creation from 'today'.

User optionally enters (Commons) categories.

Screen Shot 2015-06-08 at 16.10.28.png (787×651 px, 378 KB)

User clicks "Publish and Insert", and file is un-gated on the stash and published on Commons, and inserted locally as a thumb|right (or |left on RTL) at default size with the description as the caption (if the description is in the content language).

Screen Shot 2015-06-08 at 16.35.53.png (306×993 px, 291 KB)

… or user clicks "Cancel Publishing" and the file is left in the stash for garbage collection, never published.

Done.

Details

Reference: bz38030

	Subject	Repo	Branch	Lines +/-
	Add image upload tab to media dialog	mediawiki/extensions/VisualEditor	master	+137 -11

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Florian	T39932 VisualEditor: Upload-by-insertion of images via copy-paste
Resolved	Esanders	T40031 VisualEditor: Initiate file upload by drag-and-drop
Resolved	Esanders	T40030 Way in VisualEditor to initiate Commons file uploading, and insert image on completion
Resolved	• Prtksxna	T91717 Be able to embed an upload dialog so that other extensions (e.g. WikiEditor, VisualEditor) can provide it to users
Resolved	Jdforrester-WMF	T62002 Separate UploadWizard's data-handling, interface, and other controlling methods and put generally-applicable code into MediaWiki
Resolved	MarkTraceur	T64513 Create mw.Api.plugin.upload for uploading from MediaWiki frontend code
Resolved	MarkTraceur	T105071 Create frontend API based on mw.Upload for Commons uploads
Resolved	• Prtksxna	T111791 Create mw.widgets.CategorySelector
Resolved	Anomie	T88250 Create tag list / tokenizer / capsule controls widget
Resolved	Slaporte	T111910 Figure out legal text to be put in the mw.ForeignStructuredUpload.Dialog.js
Resolved	• Prtksxna	T111993 Validate according to range in mw.widget.DateInputWidget
Resolved	matmarex	T112676 DateInputWidget does not support $overlay
Resolved	matmarex	T112673 FloatingMenuSelectWidget does not update its position after its $container's scrollable parent is scrolled

Event Timeline

• bzimport raised the priority of this task from to Low.Nov 22 2014, 12:46 AM

• bzimport added a project: VisualEditor-MediaWiki.

• bzimport set Reference to bz38030.

• brooke created this task.Jun 28 2012, 5:17 PM

This is not on schedule for before the next big release; noting as such.

Bug 64158 has been marked as a duplicate of this bug. ***

Jdforrester-WMF added a project: VisualEditor.Nov 24 2014, 4:08 PM

Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.Nov 24 2014, 4:19 PM

Nemo_bis mentioned this in T62398: Show a user's recent uploads in the MW insert media dialog (MediaSearchWidget).Dec 18 2014, 8:40 AM

Nemo_bis mentioned this in T78524: UploadWizard lacks path from it to other sister projects.

Jdforrester-WMF added a subtask: T91717: Be able to embed an upload dialog so that other extensions (e.g. WikiEditor, VisualEditor) can provide it to users.Mar 6 2015, 12:09 AM

Jdforrester-WMF removed a parent task: T40031: VisualEditor: Initiate file upload by drag-and-drop.Mar 6 2015, 12:17 AM

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 7:18 PM

Jdforrester-WMF set Security to None.

Jdforrester-WMF updated the task description. (Show Details)

MarkTraceur updated the task description. (Show Details)Jun 8 2015, 7:26 PM

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 7:27 PM

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 7:31 PM

Jdforrester-WMF updated the task description. (Show Details)

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 7:36 PM

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 11:33 PM

Jdforrester-WMF updated the task description. (Show Details)

Jdforrester-WMF updated the task description. (Show Details)Jun 8 2015, 11:36 PM

• Catrope updated the task description. (Show Details)Jun 10 2015, 4:17 PM

• Prtksxna subscribed.Jun 10 2015, 4:31 PM

Comments from the product pitch meeting today

@Esanders: inline inspectors are there for things that probably shouldn’t be easily dismissed
Need to think about when information should be required - some things can be postponed
Can we use a non-linear workflow for this? Additional information is recorded non-modally
Doesn’t provide any user education about what’s allowed on Commons and what’s not
- @Jdforrester-WMF: almost all users skip straight past that page in the UploadWizard anyway

Pginer-WMF subscribed.Jun 25 2015, 7:06 AM

Rosencrantz subscribed.Jul 15 2015, 3:15 PM

Glaisher subscribed.Aug 1 2015, 5:45 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 1 2015, 5:45 AM

Ricordisamoa subscribed.Aug 1 2015, 12:42 PM

Comments from the pitch meeting last week

Show a preview of the image in the dialog? Easier in VE but useful for WE.
Licensing imposition info and user click-through
- Let them choose? Danger of choice turning into what we have with UW?
Build a preview whilst you go through the steps – show where the caption will be rendered, anticipate the final result.
Description and caption. If we’re doing it in an article, do users have that distinction? Hard to provide them as separate things?
- Separation between local information and global information? Do local activities after the ‘publish’ step?
- Show caption as part of preview?
- Just use caption as description?
- Call out “how it will appear in the article” vs “how it will appear to re-users”?
- Each step may have a different license, need to split them by those lines
Split licences – possibly CC0 for description/etc. but CC-BY-SA-3.0 [or whatever] for the image and possibly CC-BY-SA-3.0 or CC-BY-SA-4.0 or PD or … for the caption (and may be different)

I had a discussion with @Nirzar, on how we can integrate the upload dialog in core with VisualEditor. @Nirzar explained to me the expectations of the user when in VE, and how a simplified workflow would work best. @MarkTraceur was talking about a bare bones version for the first iteration too, more in my next comment. In simplifying the workflow, we wanted to cut some details currently required to upload, but aren't sure if it is acceptable from a product or legal point of view—

Isolate global and local information to avoid cognitive overload.
Pick sane license defaults and don't give the user too much choice
Auto-categorize the image to— from-VE, or some such, making it easier to find these images on Commons.
Hide where the image is going (local wiki vs commons). Inform user later that the image went to commons — Thanks for uploading to Commons. Learn More.

When uploading through VE there would be two entry points—

An Add more button in the Insert Media (Media settings) dialog [1].
Dropping a file into VE.

The first option would lead to the first pane of the upload dialog [2]. The second option would jump straight to the second pane [3]. For VE we'll always skip the last, Usage pane and directly insert the image on the page.

@Nirzar wanted the local editing to be more inline in VE, but, it currently opens up a dialog [4] (this isn't exactly in the purview of making upload work with VE, but deserves mentioning). We need to decide whether we want to automatically open up this dialog or let the user initiate the action.
He has also requested User Research for this workflow, but I don't know much about that yet.

Notes from #wikimedia-multimedia, with @matmarex and @MarkTraceur (logs are edited to keep only relevant messages):

P1870 logs from #wikimedia-multimedia 2MatmaRex: 3MatmaRex: 4ed 5MatmaRex: 6prtksxna: 7MatmaRex: 8MatmaRex: 9prtksxna: 10MatmaRex: 11MatmaRex: 12MatmaRex: 13prtksxna: 14MatmaRex: 15MatmaRex: 16MatmaRex: 17MatmaRex: 18prtksxna: 19MatmaRex: 20 21MatmaRex: 22MatmaRex: 23prtksxna: 24MatmaRex: 25prtksxna: 26MatmaRex: 27MatmaRex: 28prtksxna: 29prtksxna: 30marktraceur: 31marktraceur: 32 33marktraceur: 34marktraceur: 35then 36marktraceur: 37 38marktraceur: 39marktraceur: 40marktraceur: 41marktraceur: 42marktraceur: 43MatmaRex: 44MatmaRex: 45ign 46MatmaRex: 47MatmaRex: 48marktraceur: 49MatmaRex: 50marktraceur: 51marktraceur: 52MatmaRex: 53MatmaRex: 54marktraceur: 55marktraceur: 56marktraceur: 57MatmaRex: 58marktraceur: 59marktraceur: 60marktraceur: relevant to T40030

1	prtksxna: MatmaRex: How do I write a plugin for VE? Couldn't find any docs on mw, but I didn't try to hard… hm prtksxna: this doesn't seem to actually be documented, heh. there is documentation on writing plugins as gadgets (https://www.mediawiki.org/wiki/VisualEditor_gadgets). to write them as MW extensions, it looks like you ne\ to register your RL module in $wgVisualEditorPluginModules. examples are in Citoid and SyntaxHighlight_GeSHi prtksxna: hmm, but don't we actually want to do this in VisualEditor proper? Hmmm as i understand it: * we have mw.Upload.Dialog in core, that provides a barebones interface suitable for small third-party wikis without weird licensing requirements I am still confused about where files go and where the user thinks they go — commons vs local wiki * we will have an extended upload dialog in UploadWizard, that puts in the million boxes required for commons * we will have some integration in VisualEditor, that will use UploadWizard's or core's upload dialog. hmm. And marktraceur pointed out that the user sometimes would want to explicitly upload to the local wiki due to some licensing stuff I don't understand. yeah, true. i hadn't considered that so… i guess we need to make sure that mw.Upload works for cross-wiki uploads, and add a selector to mw.Upload.Dialog to let the user choose whether to upload locally, or to foreign repo, if any is confugred i'm not sure if we can do this magically. there is $wgForeignFileRepos… and the entries can have a 'apibase' property… so maybe How often do users make that choice? Is it a power user thing? Can we hide this complexity from the others? Maybe James_F\|Away knows. prtksxna: afaik for Wikimedia there are two cases, first is users who think Commons people are generally not nice and want nothing to do with them, and second is users who want to upload copyrighted fair-use media to the\ few Wikipedias that allow them (including en.wp) largely things like movie posters, logos, book covers it should probably default to Commons. i'm not sure how visible the option should be. So in the license picker we should be asking them if this is copyrighted fair-use media and silently switching them over to local wiki (if allowed). hmm. that sounds neat s/./? yeah, that actually sounds like a good idea to me, but we should check iwth marktraceur in case that's not possible for some bizzarre reason we just need to come up with a sane way to separate this between core, VisualEditor and UploadWizard I think we'll move to the UW dialog next The VE plugin will in some cases skip the first, and last step. The file might get dropped anywhere and call the dialog, and once the save is complete we can switch back to VE instead of showing the stupid usage panel. MatmaRex, prtksxna: OK, let's see if I can clarify what I have in my head and if it makes any sense to you guys MatmaRex, prtksxna: My current priority is to get a tool into VisualEditor, and secondarily WikiEditor, that uploads a file from enwiki to Commons, with a default license choice, and sends the user to WP:FUW or COM:UW if\ someone doesn't like it. MatmaRex, prtksxna: I believe we can add licensing choices or whatever else (local vs. remote choice) in later iterations, I don't think they're necessary for the base case we're trying to address MatmaRex, prtksxna: I think the Commons-specific mw.Upload and mw.Upload.Dialog subclasses will go into CommonsMetadata, because I dislike the idea that UploadWizard is Commons-specific, and I even more hate the idea of \ loading it outside of Commons MatmaRex, prtksxna: Those classes will add fields and getters/setters for descriptions (the model will have support for multilingual, I'm not sure we ever came to a decision about that in the UI), licenses (in text form,\ it has no clue about them though), categories, date, locations, and so on Basically "mw.CommonsUpload" is a euphemism for "{{information}}-enabled upload model class" As well as hard-coding the mw.Api URL to commons.wikimedia.org I haven't yet tried to subclass mw.Upload.Dialog to add fields. That somewhat concerns me but I'll go do that now I think prtksxna, MatmaRex: Also I definitely think that the upload dialog can go into VE-mediawiki at the end Maybe we could make that more palatable by putting CommonsUpload into core, and not calling it CommonsUpload but MediaRepoUpload or something hmm. marktraceur: there is some precedent for hardcoding Commons in core, like $wgUseInstantCommons, so i think it could go in core. from the technical side, the only difference between uploading to Commons and any other fore\ repo is just the API URL, right? marktraceur: we might want to separate these concepts. a local upload vs foreign upload, and a simple form vs {{information}}-enabled form. i haven't tried to subclass mw.Upload.Dialog either, but it looked well-engineered for subclassing. you override some render() and get() methods, and presto. Urgh. InstantCommons. marktraceur: soo… we just put everything in core, and say "foreign file repository" when we really mean "Commons"? ;) Something like that It's what we've always done! i think it's sensible more than splitting the code over four places MatmaRex: "foreign file repository" almost universally means Commons, anyway At least in the context of the things that we're writing MatmaRex: I'll explore the code again with an eye towards refactoring, maybe we can get the dialog merged today at least mw.Upload.Dialog? i just merged it. :P Oh. Well shit! Exciting times

prtksxna: MatmaRex: How do I write a plugin for VE? Couldn't find any docs on mw, but I didn't try to hard… hm prtksxna: this doesn't seem to actually be documented, heh. there is documentation on writing plugins as gadgets (https://www.mediawiki.org/wiki/VisualEditor_gadgets). to write them as MW extensions, it looks like you ne\ to register your RL module in $wgVisualEditorPluginModules. examples are in Citoid and SyntaxHighlight_GeSHi prtksxna: hmm, but don't we actually want to do this in VisualEditor proper? Hmmm as i understand it: * we have mw.Upload.Dialog in core, that provides a barebones interface suitable for small third-party wikis without weird licensing requirements I am still confused about where files go and where the user thinks they go — commons vs local wiki * we will have an extended upload dialog in UploadWizard, that puts in the million boxes required for commons * we will have some integration in VisualEditor, that will use UploadWizard's or core's upload dialog. hmm. And marktraceur pointed out that the user sometimes would want to explicitly upload to the local wiki due to some licensing stuff I don't understand. yeah, true. i hadn't considered that so… i guess we need to make sure that mw.Upload works for cross-wiki uploads, and add a selector to mw.Upload.Dialog to let the user choose whether to upload locally, or to foreign repo, if any is confugred i'm not sure if we can do this magically. there is $wgForeignFileRepos… and the entries can have a 'apibase' property… so maybe How often do users make that choice? Is it a power user thing? Can we hide this complexity from the others? Maybe James_F|Away knows. prtksxna: afaik for Wikimedia there are two cases, first is users who think Commons people are generally not nice and want nothing to do with them, and second is users who want to upload copyrighted fair-use media to the\ few Wikipedias that allow them (including en.wp) largely things like movie posters, logos, book covers it should probably default to Commons. i'm not sure how visible the option should be. So in the license picker we should be asking them if this is copyrighted fair-use media and silently switching them over to local wiki (if allowed). hmm. that sounds neat s/./? yeah, that actually sounds like a good idea to me, but we should check iwth marktraceur in case that's not possible for some bizzarre reason we just need to come up with a sane way to separate this between core, VisualEditor and UploadWizard I think we'll move to the UW dialog next The VE plugin will in some cases skip the first, and last step. The file might get dropped anywhere and call the dialog, and once the save is complete we can switch back to VE instead of showing the stupid usage panel. MatmaRex, prtksxna: OK, let's see if I can clarify what I have in my head and if it makes any sense to you guys MatmaRex, prtksxna: My current priority is to get a tool into VisualEditor, and secondarily WikiEditor, that uploads a file from enwiki to Commons, with a default license choice, and sends the user to WP:FUW or COM:UW if\ someone doesn't like it. MatmaRex, prtksxna: I believe we can add licensing choices or whatever else (local vs. remote choice) in later iterations, I don't think they're necessary for the base case we're trying to address MatmaRex, prtksxna: I think the Commons-specific mw.Upload and mw.Upload.Dialog subclasses will go into CommonsMetadata, because I dislike the idea that UploadWizard is Commons-specific, and I even more hate the idea of \ loading it outside of Commons MatmaRex, prtksxna: Those classes will add fields and getters/setters for descriptions (the model will have support for multilingual, I'm not sure we ever came to a decision about that in the UI), licenses (in text form,\ it has no clue about them though), categories, date, locations, and so on Basically "mw.CommonsUpload" is a euphemism for "{{information}}-enabled upload model class" As well as hard-coding the mw.Api URL to commons.wikimedia.org I haven't yet tried to subclass mw.Upload.Dialog to add fields. That somewhat concerns me but I'll go do that now I think prtksxna, MatmaRex: Also I definitely think that the upload dialog can go into VE-mediawiki at the end Maybe we could make that more palatable by putting CommonsUpload into core, and not calling it CommonsUpload but MediaRepoUpload or something hmm. marktraceur: there is some precedent for hardcoding Commons in core, like $wgUseInstantCommons, so i think it could go in core. from the technical side, the only difference between uploading to Commons and any other fore\ repo is just the API URL, right? marktraceur: we might want to separate these concepts. a local upload vs foreign upload, and a simple form vs {{information}}-enabled form. i haven't tried to subclass mw.Upload.Dialog either, but it looked well-engineered for subclassing. you override some render*() and get*() methods, and presto. Urgh. InstantCommons. marktraceur: soo… we just put everything in core, and say "foreign file repository" when we really mean "Commons"? ;) Something like that It's what we've always done! i think it's sensible more than splitting the code over four places MatmaRex: "foreign file repository" almost universally means Commons, anyway At least in the context of the things that we're writing MatmaRex: I'll explore the code again with an eye towards refactoring, maybe we can get the dialog merged today at least mw.Upload.Dialog? i just merged it. :P Oh. Well shit! Exciting times

tl;dr
Our first step is to make a tool that can upload a file from enwiki to commons with a default license. The local vs remote and license choices can come later.
The commons specific subclass of mw.Upload.Dialog can go to CommonsMetadata. The mw.CommonsUpload model will take care of the {{information}} template on Commons.
This new code could live in VE-mediawiki, or in core, after naming it MediaRepoUpload instead of CommonsUpload.

@Nirzar, @matmarex, @MarkTraceur, please clarify if I've missed or misunderstood anything.

Jdforrester-WMF added projects: VisualEditor-MediaWiki-Media, Multimedia.Sep 15 2015, 3:44 PM

Restricted Application added a subscriber: Matanya. · View Herald TranscriptSep 15 2015, 3:44 PM

Jdforrester-WMF moved this task from Untriaged to Next up on the Multimedia board.Sep 15 2015, 3:44 PM

Jdforrester-WMF renamed this task from VisualEditor: Button to initiate UploadWizard and insert image on completion to Button in VisualEditor to initiate Commons file uploading, and insert image on completion.Sep 21 2015, 3:32 PM

Jdforrester-WMF assigned this task to Esanders.

Jdforrester-WMF moved this task from Next up to Doing on the Multimedia board.

Restricted Application added a subscriber: Steinsplitter. · View Herald TranscriptSep 21 2015, 3:33 PM

Change 240116 had a related patch set uploaded (by Esanders):
[WIP] Image uploading

https://gerrit.wikimedia.org/r/240116

gerritbot added a project: Patch-For-Review.Sep 22 2015, 7:39 PM

Jdforrester-WMF added a project: User-notice.Sep 23 2015, 4:44 PM

Johan moved this task from To Triage to Not ready to announce on the User-notice board.Sep 24 2015, 12:13 PM

Jdforrester-WMF closed subtask T91717: Be able to embed an upload dialog so that other extensions (e.g. WikiEditor, VisualEditor) can provide it to users as Resolved.Sep 29 2015, 4:15 PM

• gpaumier subscribed.Sep 29 2015, 5:25 PM

Jdforrester-WMF renamed this task from Button in VisualEditor to initiate Commons file uploading, and insert image on completion to Way in VisualEditor to initiate Commons file uploading, and insert image on completion.Oct 2 2015, 3:38 PM

Jdforrester-WMF raised the priority of this task from Low to High.

Jdforrester-WMF added a parent task: T40031: VisualEditor: Initiate file upload by drag-and-drop.Oct 5 2015, 11:12 PM

Change 240116 merged by jenkins-bot:
Add image upload tab to media dialog

https://gerrit.wikimedia.org/r/240116

Jdforrester-WMF mentioned this in rEVED97ddc8af2b2e: Add image upload tab to media dialog.Oct 7 2015, 1:54 AM

Jdforrester-WMF mentioned this in T40031: VisualEditor: Initiate file upload by drag-and-drop.Oct 7 2015, 2:07 AM

ReleaseTaggerBot added a project: MW-1.27-release (WMF-deploy-2015-10-13_(1.27.0-wmf.3)).Oct 7 2015, 7:02 PM

Jdforrester-WMF closed this task as Resolved.Oct 7 2015, 7:32 PM

Johan moved this task from Not ready to announce to Announce in next Tech/News on the User-notice board.Oct 8 2015, 2:56 PM

Trizek-WMF awarded a token.Oct 8 2015, 2:58 PM

Johan moved this task from Announce in next Tech/News to In current Tech/News draft on the User-notice board.Oct 9 2015, 3:11 PM

Johan moved this task from In current Tech/News draft to Recently announced in Tech/News on the User-notice board.Oct 14 2015, 2:49 PM

matmarex mentioned this in T115748: Allow uploading files directly from the wikitext editor.Oct 16 2015, 7:13 PM

Jdforrester-WMF moved this task from Freezer to Blocked on the VisualEditor board.Oct 21 2015, 10:12 PM

Jdforrester-WMF edited a custom field.

Quiddity moved this task from Recently announced in Tech/News to Already announced/Archive on the User-notice board.Oct 22 2015, 9:12 PM

Trizek-WMF mentioned this in T78346: Wikitext editing toolbar for Flow.Oct 23 2015, 1:17 PM

Jdforrester-WMF moved this task from Doing to Done on the Multimedia board.Oct 23 2015, 4:59 PM

Ladsgroup edited projects, added User-notice-archive; removed User-notice.Aug 13 2022, 1:54 PM

	F1360346: media settings dialog: local info
	Aug 12 2015, 8:41 AM

	F176555: Screen Shot 2015-06-08 at 16.35.53.png
	Jun 8 2015, 11:36 PM

	F176551: Screen Shot 2015-06-08 at 16.10.28.png
	Jun 8 2015, 11:35 PM

	F176539: Screen Shot 2015-06-08 at 16.09.21.png
	Jun 8 2015, 11:33 PM

	F176534: Screen Shot 2015-06-08 at 15.59.27.png
	Jun 8 2015, 11:33 PM

Way in VisualEditor to initiate Commons file uploading, and insert image on completionClosed, ResolvedPublic40 Estimated Story PointsActions

Description

Details

Related ObjectsSearch...

Event Timeline

Way in VisualEditor to initiate Commons file uploading, and insert image on completion
Closed, ResolvedPublic40 Estimated Story Points
Actions

Related Objects
Search...