cancel
Showing results for 
Search instead for 
Did you mean: 

Drag & Drop uploader customisation

anamanuel
Champ in-the-making
Champ in-the-making
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>
1 REPLY 1

scouil
Star Contributor
Star Contributor
Hi Ana,

Sounds like a CSS issue to me.
Double check your style="width: 150px;
if that's not it, play around in firebug and when you have a display that suits, you, apply the same css changes to your code.

Good luck.

PS: cross-browser compatibility anyone? Smiley Happy