Manuel, I understand your point of view about concerning the size of the DB, however for example in our case it won't be a big problem.

I understand but we cannot design the application with low volume in mind.

Some of the largest deployments have more than 1 million artifacts, it would be a real issue to have all those data stored in changeset

But somehow the image is already stored in DB, because when I reopen the artifact (in bug tracker) and edit the submission field with the built-in CKEditor, the previously pasted screenshot is there. (currently I'm using trial1.mytuleap.com site for testing)
How can this image be displayed also in normal view?

That's a bug, it should be stripped before being saved. We should check that, I created art #10769 to track that.

Manuel, I understand your point of view about concerning the size of the DB, however for example in our case it won't be a big problem.

But somehow the image is already stored in DB, because when I reopen the artifact (in bug tracker) and edit the submission field with the built-in CKEditor, the previously pasted screenshot is there. (currently I'm using trial1.mytuleap.com site for testing)
How can this image be displayed also in normal view?

Manuel, is this intended? Can it be modified to be able to display the image in normal view?

Yes it intended is because it would lead to store blobs of base64 encoded images inside the database and it's really not what you -actually your DBA ;)- want to do.

The way to go is the one discussed with Seif in the thread below.

Hi,
Let me connect this thread and show my view of this.
First of all, I'm just trying Tuleap system, to examine if we can use it in our process flow to manage incoming user requests.
The submission field in HTML mode could accept paste from clipboard which is very useful and in our case it is a must condition. If I do this the following source code appears in the editor view (CKEditor):
<p><img data-cke-saved-src="data:image/png;base64,iVBORw0KGg ..... src="data:image/png;base64,iVBORw0KGg ..... alt=""><br></p>
But when I submit the request and go back to normal view (without the CKEditor interface) the image is not shown on screen, the HTML code is only <p></p>
Seems to me, that Tuleap cut out this IMG tag with SRC in normal view. When re-enter to editor mode, the screenshot appears, so it is stored somewhere.
Manuel, is this intended? Can it be modified to be able to display the image in normal view?
The CKEditor Image function (where referring to an URL of the image) works, but it is not suitable for us, noone would upload the printscreen of his/her issue to somewhere and link it to the tracker.
Attaching a file of the screenshot is also not so convenient, because users have to save the screen, attach the file, then support have to open the file.
Displaying the screenshot directly in the tracker helps us to fasten our response to user's request.
Cheers,
Zoltan

Following today's discussion the current proposal is to:

• Modify POST \Tuleap\Tracker\REST\v1\ArtifactTemporaryFilesResourceModel1 resource to add an optional "field_id"
  • This field id should correspond to an attachment field of the corresponding tracker
  • Store this field_id information into tracker_fileinfo_temporary
• Modify the attachment rendering url to remove dependency on artifac and field id:
  • Replace
    • https://tuleap-web.tuleap-aio-dev.docker/plugins/tracker/?aid=3047&field=17138&func=show-attachment&attachment=53
  • by
    • https://tuleap-web.tuleap-aio-dev.docker/plugins/tracker/?field=17138&func=show-attachment&attachment=53
  • WARNING 1: Modify URLVerification so it can retrieve the project id from the field id
  • WARNING 2: It should not be possible to by pass artifact / tracker / project permissions by specifiyng only the field id
• Re-use this URL in CKeditor Uploadimage
• Inject into artifact  submission/update DOM form information about the temporary attachment uploaded previously
• At artifact creation/update create the attachment based on the FileInfoRepresentation (instead of $_FILES)

Hi,

I don t really get it. I can t call POST /artifact_temporary_files without using :

//curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);

//curl_setopt($curl, CURLOPT_USERPWD, "admin:ynyVRLOGuD7TUr0");

if i call it without, i get :

array
  'error' => 
    array
      'code' => int 401
      'message' => string 'Unauthorized' (length=12) 

i ll explain a little what am doing :

Basically the drag and drop event sends a json request to my php file "upload.php", it contains tmp_filename , size and so on ...

In upload.php i am trying to call POST /artifact_temporary_files building it s parameters from the request i recieved from ckeditor, However the call doesn t go through if i don t provide password and username .

I don  know what i am missing

You should have a look at: https://tuleap-documentation.readthedocs.io/en/latest/user-guide/rest.html

In your case, as CKEditor and related code is done in javascript, you don't need to authenticate the user, the REST call will re-use session tokens.

I want to ask about the authentication when calling REST API. How would you advise me to authenticate the user that issues the call of the REST method on drag&drop.

TBH, this my first time laying hands on REST :) 

I use this function to cal lthe methods :  

function CallAPI($method, $url, $data = false)
{
    $curl = curl_init();

    switch ($method)
    {
        case "POST":
            curl_setopt($curl, CURLOPT_POST, 1);

            if ($data)
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            break;
        case "PUT":
            curl_setopt($curl, CURLOPT_PUT, 1);
            break;
        default:
            if ($data)
                $url = sprintf("%s?%s", $url, http_build_query($data));
    }

    // Optional Authentication:
    //curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    //curl_setopt($curl, CURLOPT_USERPWD, "admin:ynyVRLOGuD7TUr0");
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(                                                                          
    'Content-Type: application/json',                                                                                
    'Content-Length: ' . strlen($data))                                                                       
    );
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

    $result = curl_exec($curl);
    $result = json_decode($result, true);
    curl_close($curl);

    return $result;
}

I don't think using password and username is the way

You should have a look at REST API:

• First you upload a file using POST /artifact_temporary_files and PUT /artifact_temporary_files/:id 
• and then you can attach the file to the artifact with PUT /artifact/:id

Note: it might change a lot of things in the way artifacts are updated.

yeah sounds great, Any hints on how to do that?

What about storing the pasted images as attachments directly ?

This would avoid having to implement a new storage layer + dealing with that in all tracker places (UI, REST, modals, etc).

Hi,
I would like to know where the attachment are stored on the file system so i could do the same for the uploaded file via drag and drop.
So far i am able to upload an image to the server's file system and give the url back to ckeditor as a response via a drag and drop.
I have been looking through the code and I would really appreciate a hint to where the deletion of artifact is causing the deletion of the attachments, so i can replicate this for the uploaded images via drag and drop.

No problem with that but you will have to package (rpm) the newest version

I ll be working on the last version of Ckeditor wich is 4.6.2 since the plugin works from 4.5<, is that okay?

if we would store the images on the file system we would have to remove them once the comment/artifact/tracker is Removed/Edited, which as far as i can think of is kind of tricky to implement.

Well, it requires a bit more of work for sure but for update or removal we can play a simple rule, the image is removed from filesystem if the artifact is removed (with deletion of artifact for instance). As you guess, detecting at comment update if an image is still referenced can be tricky but I don't think it's worth to worry about that (at least in a first implemenation) as it's really a concern when someone update a comment in which there is an image that was pasted AND the image is removed or replaced. IMHO, this situation is rare enough to be forgotten, esp. regarding the benefit of the feature.

I ve tried puting an image inline on the previous comments wich was my second solution, but it looks like you have some kind of filter for that ?

Yes, as it's a bad practice. In the end it would mean storing more or less large binaries base64encoded inside the DB:

• Bigger DB
• Slower operations
• And as the bin data are base64encoded they take more space than if stored as binary
• Cannot be cached by browser (hence more CPU, etc, etc)

 

After some testing, it turned out that the plugin needs to upload the image on the server's file system to be able to call it back, the response it generates looks something like this:
{
"uploaded": 1,
"fileName": "foo.jpg",
"url": "/files/foo.jpg"
}

if we would store the images on the file system we would have to remove them once the comment/artifact/tracker is Removed/Edited, which as far as i can think of is kind of tricky to implement.

I ve tried puting an image inline on the previous comments wich was my second solution, but it looks like you have some kind of filter for that ?

Hi,

I don't understand the issue related to using UploadImage plugin, could you detail what would be tricky and messy to manage ?

This is strange.
it actually works on my local environment i am including the image like this:

"<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAKlBMVEX///8kJCQmJiYkJCQjIyMlJSUkJCQmJiYlJSUlJSUlJSUlJSUlJSUlJSUyoNtPAAAADXRSTlMAODxASEx/gLjAwsfJ/p3wDgAAAFRJREFUCNdj0Lm7gJ1h7R0FhqMMDLYGDKwHGC4wMMydwACkgAxeBhBjAYQBpCAMBgaWDSDGFgaG3LtgkMDA2AASaWRAqIHrgpsDN/kI2C6WAwww2wEitR7G6bsk5gAAAABJRU5ErkJggg==" />"

Hi Nicolas, We are actually not trying to upload attachments, we want to be able to include images into the follow-up/submission fields, so they show up. Giving the user a better way to express themselves.

like this:

For your information, there is a REST route to upload attachments: https://tuleap.net/api/explorer/#!/artifact_temporary_files/create

Maybe this information could help.

Hi, I have been looking into the way ckeditor is managing the image inclusion.

There are two ways you can include  an image into the submission field right now:

1. Using the URL of the image wich is hosted on the web. This would make the image disappear once it is deleted from that location.
2. Firefox manages the drag and drop feature, including in the html, the image encoded into base64 as a BLOB.

Proposed solutions: 

1. If we are going to use the plugin "UploadImage" that manuel suggested we will have to upload the image into the server's file system and manage the changes applied to this data, once the affiliated comment/artifact/tracker are updated/deleted.
2. We have thought of tweaking ckeditor's plugin "UploadImage" to return the encoded image as part of a json object.

I think that the first solution would be a lot more complicated to implement probably a mess (-_-)". What do you suggest? 

Thanks for the direction, Much Appreciated!

BTW, it seems that ckeditor has plugins to deal with this issue: http://ckeditor.com/addon/uploadimage

Great!

May I suggest that you reply to posts that are talking about this subject on tuleap-devel ML so people are aware that you are working on that ?

Hi,

I ll be looking into the matter, will update with how am going to tackle the problem once i have a better understanding of the way things are working so far.