•  
     
    story #12964 drag'n drop images in tracker text areas
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
4125

References
Referencing story #12964

Git commit

tuleap/tuleap/stable

Refactoring: move UploadPathAllocator in core 2c1c621d3b
Implement tus protocol for Tracker REST API 4a93b8d118
File uploaded via tus can be downloaded via REST 144edc4716
Clean expired work files that were being uploaded 1e31134eb5
Generate thumbnail for uploaded images cef86a48f9
Refactoring: extract the save of File value 36c9b11d8f
Use new url pattern for already linked attachments 9f3a62992d
attach uploaded file to the artifact 9127cf9526
Refactoring: Webpackify RichTextEditor.js 7530cef521
Text fields allows dropping of images a021263839
Do not initiate upload if file is too big f69888c4b2
Disallow upload if file field is frozen 75003d8c9c
Prevent artifact submit if files are being uploaded 937cab43ec
Inform user that DnD is possible in text editor 5c422062cb
Show upload progression 7f8d06c6e8
Prevent paste of images when not supported 20536b7389
Remove inline style for images in ckeditor 3af7e86c17
Disable paste of images in copy artifact 64a628e651
Reinject tus-uploaded-id on form error at artifact submit f7a0b34b61
Typehint and unwrap submitted_values array 09f89447a8
Fix outdated Composer lockfile of Tuleap Core 01bf8e7a4b
Typehint and unwrap submitted_values array in TTM 3bdd53df9f
TTM must be compatible with Tracker api be4697776b

Follow-ups

User avatar

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
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

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

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
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
  • 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

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
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
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

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
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
Hi
Our initial need was to have a browser button (sla #49199).
Will there be any browse button in your implelmentation ?
User avatar
  • 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