•  
     
    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
Done
Development
Empty
Empty
Details
#12964
Manuel Vacelet (vaceletm)
2019-06-05 18:23
2019-02-05 17:23
3435

References

List of items referenced by or referencing this item.

Follow-ups

  • User avatar
    gerrit #15113 integrated into Tuleap 11.2.99.35
  • User avatar
    First part of the story is delivered in 11.2. Closing it.

    Remaining work will be done in story #13453

    • Status changed from On going to Done
  • User avatar
    gerrit #15070 and gerrit #15072 integrated into Tuleap 11.2.99.1.
  • User avatar
    gerrit #15069 integrated into Tuleap 11.1.99.152
  • User avatar
    gerrit #15068 integrated into Tuleap 11.1.99.151
  • User avatar
    gerrit #15063 integrated into Tuleap 11.1.99.148.
  • User avatar
    gerrit #15057 integrated into Tuleap 11.1.99.146.
  • User avatar
    gerrit #15061 integrated into Tuleap 11.1.99.144.
  • User avatar
    gerrit #15054 integrated into Tuleap 11.1.99.137.
  • User avatar
    gerrit #15043 integrated into Tuleap 11.1.99.129.
  • User avatar
    gerrit #15036 integrated into Tuleap 11.1.99.123.
  • User avatar
    gerrit #15029 integrated into Tuleap 11.1.99.119.
  • User avatar
    gerrit #15021 integrated into Tuleap 11.1.99.111.
  • User avatar
    gerrit #14999 integrated into Tuleap 11.1.99.96
  • User avatar
    gerrit #14976 integrated into Tuleap 11.1.99.89.
  • User avatar
    gerrit #14979 integrated into Tuleap 11.1.99.76.
  • User avatar
    gerrit #14968 integrated into Tuleap 11.1.99.67.
  • User avatar
    gerrit #14963 integrated into Tuleap 11.1.99.60.
  • User avatar
    gerrit #14954 integrated into Tuleap 11.1.99.58.
  • User avatar
    gerrit #14945 integrated into Tuleap 11.1.99.52.
  • User avatar
    gerrit #14935 integrated into Tuleap 11.1.99.41.
  • User avatar
    gerrit #14924 integrated into Tuleap 11.1.99.27.

    • Status changed from To be done to On going
  • 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
    Copy is done in word
    Paste is done in Tuleap html area
  • 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
  • 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

    I'll need to check but could you highlight the use case with the browse button ?

  • 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