Need a little help with Kanban attachments

Webix JS
#1

My Kanaban card file attachment uploads are actually working - files arrive on the server as expected - so I’m very close. But, I need a little help with two remaining problems:

  1. How can I send the card ID along with the file being upload, so the file can be connected to the proper card? As it is now, the server simply receives a random file with no other information about what it belongs to.

  2. After the file is uploaded, in the browser I just see a broken image. The script on the server renames the file and moves it to a proper location. So, I must have to return the image page/name, but I don’t see how to do that.

My server script returns this on success:

{ “status”: “server” }

Should I include something else in the response to specify the new file name and path? Can I also include a unique ID # for the new uploaded file?

I’m including my configuration below in case I’m doing it wrong in the first place.

    webix.ui({
        multi: true,
        container:'kbox',
        view: 'kanban',
        cols:[

          { header:'<span class="webix_icon webix_kanban_add_icon webix_kanban_icon kbi-plus-circle webixbutton add" style="margin-left: 0; padding-left: 0; "></span>To Do',
            body:{ view:'kanbanlist', status:'0' },
            onClick:{
                'add':function(){
                this.getParentView().add({ status:'0', text:'New task' });
                return false;
              }
            }
          },
          { header:'In Progress',
             body:{ view:'kanbanlist', status:'1' }},
          { header:'Review',
             body:{ view:'kanbanlist', status:'2' }},
          { header:'Done',
             body:{ view:'kanbanlist', status:'3' }}
        ],
        save: {
          'insert': 'json->kanban_saveCard.php?bid=21',
          'update': 'json->kanban_updateCard.php?bid=21',
          'delete': 'json->kanban_deleteCard.php?bid=21'
        },
	userList: true,
        attachments: 'kanban_upload.php?bid=21',
        comments: {currentUser: 30001},
        data:  base_task_set,
        editor: true,
        cardActions: true,
        colors: colors_set,
        tags: tags_set,
        users: users_set
    });
#2

Hello @robert ,

It seems that both issues can be resolved with the API of Uploader.

  1. How can I send the card ID along with the file being upload, so the file can be connected to the proper card?

The uploader sends a binary file and its additional info (if any) as the FormData. The additional parameters which will be converted to the FormData can be set in the uploader configuration as a simple object.
In addition to the example in the docs, you can use also onAfterFileAdd event to add form data to each file individually before sending it (please see the example below)

  1. After the file is uploaded, in the browser I just see a broken image. The script on the server renames the file and moves it to a proper location. So, I must have to return the image page/name, but I don’t see how to do that.

To upload the file correctly, you need to return also the proper URL as a link property in response (it can include both link and size, according to the info stored for attachments). I must admit it isn’t clear from our current docs, so we will add this information asap.
Also, the mentioned properties may be redefined on the client-side manually with onFileUpload event.

Please, check the following demo for both needed features: https://snippet.webix.com/ssgeqyh8

#3

Thanks again @Listopad this was exactly the clue I needed. The file uploads are working perfectly now.

#4

Hi @Listopad

I have one quick followup question to this.

If we return a new ID number for the uploaded file, how can we replace the temporary ID with the new ID?

Using your example, we have code like this below to update the file link. We would also like to return the new ID, but I don’t see how updateItem can change the file.id.

    uploader.attachEvent("onFileUpload", (file, response)=>{  
      const link = response.link;
      const newid = response.newid;         <<<--- how can we use this?
      uploader.files.updateItem(file.id, {link:link})
    });
#5

Hey @robert,

If we return a new ID number for the uploaded file, how can we replace the temporary ID with the new ID?

As you’ve correctly stated, it is not possible to update an item’s id using the updateItem method. Instead, the client side id can be changed via the changeId method of the underlying DataStore. Here is an example, please take a look: https://snippet.webix.com/wr2pw1k5.

#6

Hello,
How can I be aware if an uploaded attachment has been removed from the card?
Once the file is uploaded the attachment url is triggered, however, if an existing file is removed , there is no obvious event to say that.
How can I access the dataview in the uploader on the kanban editor , so then I can handle the dataremoved event? Or there is an easier way?
Thank you