Drop Zone Is Missing in Records with File Drag and Drop

Written by
Manuelito Macalinao
Published on
May 26th, 2023

Scenario

Administrators installs the File Drag and Drop bundle. After configuring File Drag and Drop on Setup > Customization>File Drag and Drop Setup, the user navigates to a record where the feature is enabled but does not see the Drop Zone on the top right corner of the page when it loads.

Solution

The missing dropzone can be caused by several factors:

  • Check bundle installed is correct, verify the bundle ID is 41309.
  • VerifySetup>Customization>File Drag and Drop Setuphas the record type enabled for File Drag and Drop.
  • Check other browsers and make sure to give the page 10 seconds to load as it usually takes a few seconds for the dropzone to appear when a record is loaded.


If all these have been checked and the dropzone is still unavailable, the problem is most likely caused by a missing DnD File HTML configuration.

To check if the problem is a missing DnD File HTML:
  1. Log in as an Administrator
  2. Navigate toCustomization>Lists,Records & Fields>Record Types
  3. Filters:
    • From Bundle:Select41309
  4. DnD File Html:ClickList
Note: The entry will only display a View and Edit link. If there is none listed here, it means you need to manually create it.Re-installing File Drag and Drop doesn't work.
To create that file, you will need the URL of some components of your File Drag and Drop bundle. The URL and internal ID is different for each account. You need to locate these files in your File Cabinet and take note of each one's URL.
  1. Navigate toDocuments>Files>File Cabinet
  2. Folder: ClickSuiteBundles
  3. ClickBundle41309
  4. Clicklib
  5. ClickViewbeside any file
  6. Note the URL
    Note: Repeat steps 1-6 for each file. Also do the same for the src folder.
CSS:

dad-record-page-markup.css (in SRC folder)
dad-Ext-4.2.1.883-ext-theme-classic-sandbox-all.css (in LIB folder)
dad-jquery-ui.css (in LIB folder)



SCRIPT SRC

dad-jquery-1.10.2.min.js (in LIB folder)
dad-Ext-4.2.1.883-ext-all-sandbox.js (in LIB folder)
dad-Ext-4.2.1.883-Spotlight.js (in LIB folder)
dad-jquery-ui-1.10.1.custom.min.js (in LIB folder)
dad-record-page-client.js (in SRC folder)
dad-tclib_common.js (in SRC folder)
dad-tclib_client.js (in SRC folder)
dad-common-client.js (in SRC folder)


Once you have noted their URLs, open a separate Notepad and paste the File Codes below.

File Codes:
<link type="text/css"rel="stylesheet"href="/core/media/media.nl?id=4894&c=YOURACCOUNTNUMBER&h=56d763cf91b30d5384c4&_xt=.css"/><link type="text/css"rel="stylesheet"href="/core/media/media.nl?id=4906&c=YOURACCOUNTNUMBER&h=610c15a94e8451f7a67c&_xt=.css"/><link type="text/css"rel="stylesheet"href="/core/media/media.nl?id=4903&c=YOURACCOUNTNUMBER&h=75116bbc5faecd084c40&_xt=.css"/><span id='processing'></span><!-- this is used as tooltip help in line items --><div id='dadInfo'class='dadInfo' style='visibility: hidden;z-index: 9001;position: absolute;'> Drop file in the highlighted line item </div><div id='dadRecordDropZone'onclick='dadShowFolderMenu(event);'title='Drop files here or click to view more options.'><a id='dadFolderOpen'href='#'><img id='dadImgFolderInfo'src=''/></a></div><div id='dadRecordDropZoneBackground'><div id='dadRecordDropZoneBackgroundStatus'title='Click here for additional options or see your upload progress'>&nbsp;</div><div id='dadRecordDropZoneBackgroundBar'>&nbsp;</div></div><!-- this is used in displaying the files attached to a line item --><div id="dadFilesBox"class="x-hidden"><div id='dadWindowHeader'class="x-window-header"> Files Attached to Line </div><div id='dadFilesContent'class="x-window-body"> list of files will go here </div></div><!-- used for caching media items --><div id="dadTplImageCancelCache" style="display:none;"><img id="dadImageCancel"title="Cancel"/></div><!-- used for displaying tutorial buttons --><div id='dadTooltipbuttons' style='display: none;'><table width="100%"cellspacing="0"cellpadding="0"border="0"><tbody><tr><td><table cellspacing="0"cellpadding="2"border="0"><tbody><tr><td><table id="tbl_dadbtnNext"class="uir-button"cellspacing="0"cellpadding="0"border="0"><tbody><tr id="tr_dadbtnNext"class="pgBntG pgBntB"><td id="tdleftcap_dadbtnNext"><img class="bntLT"width="3"height="50%"border="0"src="/images/nav/ns_x.gif"><img class="bntLB"width="3"height="50%"border="0"src="/images/nav/ns_x.gif"></td><td id="tdbody_dadbtnNext"class="bntBgB dadTooltipButtonTdBody"valign="top"nowrap=""><input id="dadbtnNext"class="rndbuttoninpt bntBgT"type="button"onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, true, this);"onmouseout="if(this.getAttribute('_mousedown')=='T') setButtonDown(false, true, this);"onmouseup="this.setAttribute('_mousedown','F'); setButtonDown(false, true, this);"onmousedown="this.setAttribute('_mousedown','T'); setButtonDown(true, true, this);"onclick="return dadSpotlight(event, '');"name="refreshmessages"value="Next Topic"_mousedown="F"></td><td id="tdrightcap_dadbtnNext"><img class="bntRT"width="3"height="50%"border="0"src="/images/nav/ns_x.gif"><img class="bntRB"width="3"height="50%"border="0"src="/images/nav/ns_x.gif"></td></tr>