AnsweredAssumed Answered

Drag & Drop uploader customisation

Question asked by anamanuel on Jul 4, 2013
Latest reply on Jul 5, 2013 by scouil
Hi!
I'm changing the drag & drop action in the document library (dnd-upload.js) but I'm having a problem calling a server webscript when loading the form (that appears with the upload status).
When dragging & dropping documents into a folder the current form was extended so it has two more columns, each one of them need a call to a webscript to get the values available (the values in the second column will depend on the choice of the first column).
I successfully added the new columns and called the webscripts, but the form is not correctly formatted, the new columns overlap in the left side (if the success function is not executed - it just loads the values into the combobox - the form is correct and the columns are empty but not overlapping).
Does anyone have any idea what to change so it works?
Thanks

<javascript>
// Definition of the data table column
var myColumnDefs = [
   { key: "type", className:"col-left", resizable: true, formatter: formatTypeCell },
   { key: "subtype", className:"col-left", resizable: true, formatter: formatSubTypeCell },
   { key: "id", className:"col-left", resizable: false, formatter: formatLeftCell },
   { key: "name", className:"col-center", resizable: false, formatter: formatCenterCell },
   { key: "created", className:"col-right", resizable: false, formatter: formatRightCell }
];
</javascript>

<javascript>
var formatTypeCell = function(elCell, oRecord, oColumn, oData)
{
   try
   {
      var currentURL = elCell.baseURI;
      Alfresco.util.Ajax.request(
      {
         url : Alfresco.constants.PROXY_URI + "modules/documentlibrary/classes-list.json?currentURL=" + currentURL,
         method:"GET",
         successCallback :
         {
            fn : function dlA_onGetClasses_refreshSuccess(response)
            {
               var responseJSON = response.serverResponse.responseText;
               var json = JSON.parse(responseJSON);
               var dndUpload = Alfresco.util.ComponentManager.findFirst("Alfresco.DNDUpload");
               var customTypes = json.types
                  
               var html = '<div id="'+ oRecord._oData.id +'-left-div" class="fileupload-left-div"><span class="fileupload-percentage-span">type:'
               + '<select id="'+oRecord._oData.id +'-custom-types" style="width: 150px;" disabled="disabled">';
                  
               html+='<option value="">'+dndUpload.msg("label.selectType")+'</option>';
               for (var i=0; i < customTypes.length; i++)
               {
                  html+='<option value="'+customTypes.nodeRef+'">'+customTypes.name+'</option>';
               }
                  
               html+= '</select></span></div>';
               elCell.innerHTML = html;
            },
            scope: this
         },
         failureCallback :
         {
            fn : function dlA_onGetClasses_refreshFailure(response)
            {
               Alfresco.util.PopupManager.displayMessage(
               {
                  text : this.msg("message.details.failure")
               });
            },
            scope: this
         }
       });
   }
   catch(exception)
   {
      Alfresco.logger.error("DNDUpload__createEmptyDataTable (formatLeftCell): The following error occurred: ", exception);
   }
};
</javascript>

Outcomes