Skip to main content

Public

Project privacy set to public. By default, its content is available to everyone (authenticated or not). Please note that more restrictive permissions might exist on some items.

  •  
     
    story #12964 drag'n drop images in tracker text areas
Actions
Summary
Empty
drag'n drop images in tracker text areas
Empty

Overview

It should be possible to drag'n drop and/or copy & paste images in all text areas of a tracker:

  • Text fields (like descriptions, etc)
  • Follow-up comments

This is only possible when those area are in "HTML" mode with an active ckeditor. Files are stored as attachments.

Acceptance criteria

Conditions that apply to be able to upload:

  • There must be at least one "attachment" field in the tracker definition (if there are several attachment fields in the definition, we take the first that match permissions constraints)
  • This field must be writeable by the user (permissions allow it and it's not read only by workflow)
  • Uploads respects the configured "max upload size"

Otherwise, users that attempt to dn'd images in the textare will get an error message and upload will fail.

Then when user drop an image, it's automatically uploaded on the server as a new attachment and associated to the artifact at submit. The created attachment as a readable url like /plugins/tracker/attachment/155-slugified-title.png

At artifact creation/update

When a user compose a new artifact with dn'd images but doesn't submit the artifact, the uploaded files must be cleaned eventually.

There is a garbage collection done with system events (SYSTEM_CHECK ?)

Limitations

Dn'd is not allowed

  • During artifact copy
  • During mass-change

Dn'd is possible in

  • Artifact view
  • Angular Modal (Kanban, TTM, Planning view)

Dn'd might be possible in

  • Modal v1 (aka "Lightwindow"): the modal window you get when you create or attach an existing artifact in Artifact view
  • Modal v2 (aka "Les Oreilles"): the modal window you get on Scrum Cardwall and Agile Dashboard home

"might be possible" means that it's attempted to be done in best effort mode but we might be unable to do it within the estimation scope (might need a dedicated story afterward).

Technical overview

This leverages the ckeditor upgrade (request #12694) as well as ckeditor uploadimage plugin.

Empty
Empty
Status
Empty
Done
Development
  • [ ] Does it involves User Interface? 
  • [ ] Are there any mockups?
  • [ ] Are permissions checked?
  • [ ] Does it need Javascript development?
  • [ ] Does it need a forge upgrade bucket?
  • [ ] Does it need to execute things in system events?
  • [ ] Does it impact project creation (templates)?
  • [ ] Is it exploratory?
Empty
Details
#12964
Manuel Vacelet (vaceletm)
2019-06-05 18:23
2019-02-05 17:23
4126

References
Artifact links
Empty
Referencing story #12964

Artifact Tracker v5

rel #13072 11.2
epic #2047 Tracker
story #13453 finish drag'n drop images in tracker text areas
story #13506 Support Images DnD in TTM steps
request #12892 We can't see images embedded by the rich text editor
request #28830 replace File upload streams by TUS client

Git commit

tuleap/tuleap/stable

Refactoring: move UploadPathAllocator in core 2c1c621d3b
User avatar Nicolas Terray (nterray) , 2019-05-07 17:56
Implement tus protocol for Tracker REST API 4a93b8d118
User avatar Nicolas Terray (nterray) , 2019-05-10 12:25
File uploaded via tus can be downloaded via REST 144edc4716
User avatar Nicolas Terray (nterray) , 2019-05-13 13:30
Clean expired work files that were being uploaded 1e31134eb5
User avatar Nicolas Terray (nterray) , 2019-05-13 17:32
Generate thumbnail for uploaded images cef86a48f9
User avatar Nicolas Terray (nterray) , 2019-05-14 12:22
Refactoring: extract the save of File value 36c9b11d8f
User avatar Nicolas Terray (nterray) , 2019-05-15 11:35
Use new url pattern for already linked attachments 9f3a62992d
User avatar Nicolas Terray (nterray) , 2019-05-16 11:16
attach uploaded file to the artifact 9127cf9526
User avatar Nicolas Terray (nterray) , 2019-05-17 09:09
Refactoring: Webpackify RichTextEditor.js 7530cef521
User avatar Nicolas Terray (nterray) , 2019-05-20 11:42
Text fields allows dropping of images a021263839
User avatar Nicolas Terray (nterray) , 2019-05-23 08:59
Do not initiate upload if file is too big f69888c4b2
User avatar Nicolas Terray (nterray) , 2019-05-23 12:55
Disallow upload if file field is frozen 75003d8c9c
User avatar Nicolas Terray (nterray) , 2019-05-24 10:02
Prevent artifact submit if files are being uploaded 937cab43ec
User avatar Nicolas Terray (nterray) , 2019-05-24 18:56
Inform user that DnD is possible in text editor 5c422062cb
User avatar Nicolas Terray (nterray) , 2019-05-27 17:51
Show upload progression 7f8d06c6e8
User avatar Nicolas Terray (nterray) , 2019-05-27 11:08
Prevent paste of images when not supported 20536b7389
User avatar Nicolas Terray (nterray) , 2019-05-28 11:06
Remove inline style for images in ckeditor 3af7e86c17
User avatar Nicolas Terray (nterray) , 2019-05-28 17:50
Disable paste of images in copy artifact 64a628e651
User avatar Nicolas Terray (nterray) , 2019-05-29 10:23
Reinject tus-uploaded-id on form error at artifact submit f7a0b34b61
User avatar Nicolas Terray (nterray) , 2019-05-29 17:00
Typehint and unwrap submitted_values array 09f89447a8
User avatar Nicolas Terray (nterray) , 2019-06-04 12:08
Fix outdated Composer lockfile of Tuleap Core 01bf8e7a4b
User avatar Thomas Gerbet (tgerbet) , 2019-06-05 17:48
Typehint and unwrap submitted_values array in TTM 3bdd53df9f
User avatar Nicolas Terray (nterray) , 2019-06-04 12:09
TTM must be compatible with Tracker api be4697776b
User avatar Nicolas Terray (nterray) , 2019-05-29 17:00
Display settings

Follow-ups

User avatar
Manuel Vacelet (vaceletm)2019-05-07 14:06

It works well.

So it should also work when integration work will be completed in Tuleap.

Is there any reason why the CKEditor in tracker is not this one ?
It seems you are restricting some options.

To activate more options we need to make an imporvement on the artifact rendering, that's the purpose of the other discussion you started privately in the sla on my.enalean.com ;)

User avatar
Denis PILAT (denis_pilat)2019-05-07 09:02
It works well.
Is there any reason why the CKEditor in tracker is not this one ?
It seems you are restricting some options.

Cheers,
Denis
User avatar
Manuel Vacelet (vaceletm)2019-05-06 17:20

There is some support for copy/past from Word to CKEditor, could you try with their online demo and tell us if it worked (and with which version of MS Word you did the test)

 

User avatar
Manuel Vacelet (vaceletm)2019-05-06 13:08

About copy/paste, will it work if copy is done into a MS Word document ?

I'm not sure to understand, you want to copy from Tuleap to MS Word ?

(This story is about pasting stuff into Tuleap, not the other way around)

User avatar
Denis PILAT (denis_pilat)2019-05-06 12:33
Hi
Thanks for the copy/paste stuff.
let's see during the implementation if a browse button can be added easily but if drag&drop is possible, if copy/paste is possible, I guess it won't be so important to users.
About copy/paste, will it work if copy is done into a MS Word document ?
User avatar
Manuel Vacelet (vaceletm)2019-05-06 10:10
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Manuel Vacelet (vaceletm)2019-04-23 11:11

users need to embed image in the texarea, that's the point.

According to uploadimage plugin documentation (the plugin we will be using to manage drag'n drop) it seems possible to also have the feature through a "button". It's pretty much the same usage than the current "image" button we already have but instead of only having URLs you have a tab to upload a file and include it in the text (afaiu because the demo is broken so it's unclear about the result).

If you are OK, we can add this behaviour as a "spike" during the implementation. If it doesn't cost "too much" to add it, we add it during the implementation. If we face difficulties, we don't do it and will propose a dedicated story for that.

My point: Is there any REST route you implement for drag & drop ? A REST route that allow attaching a file during the ticket creation ?

No, due to the way uploadimage plugin is desgined, we won't be able to use a proper REST API for that. We will implement a dedicated "ajax" pseudo-route (won't be advertise as part of std Tuleap API).

User avatar
Denis PILAT (denis_pilat)2019-04-19 11:01
I'm answering about the "browse button" question "Another way of saying that is that with "Browse button", they don't expect to add an image inline the textarea. Is that correct ?"
No, users need to embed image in the texarea, that's the point.
Let's put this browse button as an option of a new requirement if it's to complex.
User avatar
Denis PILAT (denis_pilat)2019-04-15 16:14
At artifact creation, it's not possible in REST to create an attachement, ticket must be created first, so it's a 2 steps operation to attach a file:

My point: Is there any REST route you implement for drag & drop ? A REST route that allow attaching a file during the ticket creation ?
User avatar
Manuel Vacelet (vaceletm)2019-03-20 15:21

Ok but in that case it's pretty much a way easily add an attachment into the artifact right ?

Another way of saying that is that with "Browse button", they don't expect to add an image inline the textarea. Is that correct ?

User avatar
Denis PILAT (denis_pilat)2019-03-20 15:11
For people who do not master the drag&drop
For keyboard addicted

It's just a quick way to find the attachment full path with having to open another application than the browser
User avatar
Denis PILAT (denis_pilat)2019-03-20 10:58
Hi
Our initial need was to have a browser button (sla #49199).
Will there be any browse button in your implelmentation ?
User avatar
Manuel Vacelet (vaceletm)2019-02-05 17:25
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes