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.
- Verify Setup > Customization > File Drag and Drop Setup has 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.
- Log in as an Administrator
- Navigate to Customization > Lists, Records & Fields > Record Types
- Filters:
- From Bundle: Select 41309
- DnD File Html: Click List
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.
- Navigate to Documents > Files > File Cabinet
- Folder: Click SuiteBundles
- Click Bundle 41309
- Click lib
- Click View beside any file
- Note the URL
Note: Repeat steps 1-6 for each file. Also do the same for the src folder.
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'>
</div>
<div id='dadRecordDropZoneBackgroundBar'>
</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>
</tbody>
</table>
</td>
<td>
<table
id="tbl_dadbtnCancel"
class="uir-button"
cellspacing="0"
cellpadding="0"
border="0"
>
<tbody>
<tr
id="tr_dadbtnCancel"
class="tabBnt"
>
<td id="tdleftcap_dadbtnCancel"><img
class="bntLT"
width="10"
height="50%"
border="0"
src="/images/nav/ns_x.gif"
> <img
class="bntLB"
width="10"
height="50%"
border="0"
src="/images/nav/ns_x.gif"
></td>
<td
id="tdbody_dadbtnCancel"
class="bntBgB dadTooltipButtonTdBody"
valign="top"
nowrap=""
height="20"
><input
id="dadbtnCancel"
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="Ext.Msg.hide(); return dadSpotlight(event, '');"
value="Close"
></td>
<td id="tdrightcap_newmessage"><img
class="bntRT"
width="10"
height="50%"
border="0"
src="/images/nav/ns_x.gif"
> <img
class="bntRB"
width="10"
height="50%"
border="0"
src="/images/nav/ns_x.gif"
></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div><!-- start of suitelabs rating widget -->
<!--
How to use:
Set the return value of dadGetRatingMarkup() to the html element where you want it displayed.
The rating selected by the user can be obtained from variable dadGlobal.rating.
-->
<style type='text/css'>
.dad-rating {
cursor: pointer;
margin-left: 2px;
margin-top: 0px;
}
</style>
<div id='dadRating' style='display: none'>
<img id='dad-rating-1' src='https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772' onclick='ratingChosen(event);' class='dad-rating'/><img id='dad-rating-2' src='https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772' onclick='ratingChosen(event);' class='dad-rating'/><img id='dad-rating-3' src='https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772' onclick='ratingChosen(event);' class='dad-rating'/><img id='dad-rating-4' src='https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772' onclick='ratingChosen(event);' class='dad-rating'/><img id='dad-rating-5' src='https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772' onclick='ratingChosen(event);' class='dad-rating'/>
</div>
<script type='text/javascript'>
var dadGlobal = dadGlobal || {};
dadGlobal.rating = 0;
function ratingChosen(e){
e = e || window.event;
var target = e.target || e.srcElement;
var elId = target.id;
dadGlobal.rating = parseInt(elId.replace('dad-rating-', ''));
for (var i = 1; i <= 5; i++) {
var elStar = document.getElementById('dad-rating-' + i);
elStar.src = 'https://system.netsuite.com/core/media/media.nl?id=1046369&c=NLCORP&h=49de3bb452301ade3772';
}
for (var i = 1; i <= dadGlobal.rating; i++) {
var elStar = document.getElementById('dad-rating-' + i);
elStar.src = 'https://system.netsuite.com/core/media/media.nl?id=1046368&c=NLCORP&h=62302f4e24789f88c308';
}
}
// store the markup in a global vara
dadGlobal.ratingMarkup = document.getElementById('dadRating').innerHTML;
// we need to delete the markup inside div dadRating because to prevent more than one star images having the same id
document.getElementById('dadRating').innerHTML = '';
/**
* This returns the markup of the 5 stars. The return value of this function is set to the innerHTML of the
* element where you want the stars displayed
*/
function dadGetRatingMarkup(){
return dadGlobal.ratingMarkup;
}
</script>
<!-- end of suitelabs rating widget -->
<!-- screen for file cabinet picker -->
<div id="dadFileCabinetFolderPicker" style='position: absolute; visibility: hidden; left: -1000px; z-index: 9998;'>
<table width="auto" cellspacing="0" cellpadding="0" class="uir-popup" >
<tbody>
<tr class="uir-popup-header">
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle" nowrap="" style="padding-left: 2px;" ></td>
<td nowrap="" style="padding-left: 5px; padding-right: 1px;" class="smalltextb" >Choose Target Folder</td>
<td style="width: 1px;">
<img src='/images/icons/controls/machine_x.gif' onclick='dadHideFileCabinetFolderPicker();' title='Closes this popup window' style='cursor: pointer; margin-right: 5px;' />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="uir-popup-body">
<td>
<div style="padding: 0px;" class="text">
<table border="0" cellspacing="0" >
<tbody>
<tr style="display: none;">
<td align="center">
<img width="175" height="1" border="0" src="/images/nav/stretch.gif">
</td>
<td align="center">
<img width="175" height="1" border="0" src="/images/nav/stretch.gif">
</td>
</tr>
<tr>
<td colspan='2' style="padding: 0px;">
<div style="padding: 0 30 20 30" class="text" >
<div class="fgroup_title" style="color: #5A6F8F; font-weight: 600; white-space: nowrap; margin: 0 0 2px 0; display: none">
</div>
<div style='width: 100%; text-align: left;'>
<!-- start of content -->
<div style='text-align: left'>
<iframe id='dadIframeFileCabinetFolderPicker' style='border: none;' >
</iframe>
</div>
<!-- end of content -->
</div>
<table style='widthx: 500px; padding: 5px 5px 10px 20px;' border="0">
<tr>
<td>
<table id='dadNoteCategoryBox' cellspacing='5' style='margin-right: 20px'>
</table>
</td>
<td rowspan="2" valign="top">
<table id='dadNoteUserPreference' cellspacing='5'>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border=0 style="width: auto; margin-right: 5px; cursor: hand; margin-left: 5px; display: inline-block;" id="tbl_dadCancel" align='right' class='uir-button'>
<tbody>
<tr class="pgBntG" id="tr_dadCancel">
<td width="45%"">
</td>
<td id="tdleftcap_dadCancel">
<img height="50%" width="3" border="0" class="bntLT" src="/images/nav/ns_x.gif">
<img height="50%" width="3" border="0" class="bntLB" src="/images/nav/ns_x.gif">
</td>
<td height="20" valign="top" nowrap="" class="bntBgB" id="tdbody_dadCancel">
<input type="button"
onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false, this);"
onmouseout="if(this.getAttribute('_mousedown')=='T') setButtonDown(false, false, this);"
onmouseup="this.setAttribute('_mousedown','F'); setButtonDown(false, false, this);"
onmousedown="this.setAttribute('_mousedown','T'); setButtonDown(true, false, this);"
onclick='dadHideFileCabinetFolderPicker();'
id="dadCancel"
value="Cancel"
class="rndbuttoninpt bntBgT"
_mousedown="F">
</td>
<td id="tdrightcap_dadCancel">
<img height="50%" width="3" border="0" class="bntRT" src="/images/nav/ns_x.gif">
<img height="50%" width="3" border="0" class="bntRB" src="/images/nav/ns_x.gif">
</td>
</tr>
</tbody>
</table>
<!-- end of cancel button -->
<!-- start of choose folder button -->
<table border="0" cellspacing="0" cellpadding="0" style="margin-right: 6px; cursor: hand;" class="uir-button" id="tbl_newfolder">
<tbody>
<tr class="pgBntG pgBntB" id="tr_newfolder">
<td id="tdleftcap_newfolder">
<img width="3" height="50%" border="0" class="bntLT" src="/images/nav/ns_x.gif">
<img width="3" height="50%" border="0" class="bntLB" src="/images/nav/ns_x.gif">
</td>
<td valign="top" nowrap="" height="20" class="bntBgB" id="tdbody_newfolder" >
<input type="button"
onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false, this);"
onmouseout="if(this.getAttribute('_mousedown')=='T') setButtonDown(false, false, this);"
onmouseup="this.setAttribute('_mousedown','F'); setButtonDown(false, false, this);"
onmousedown="this.setAttribute('_mousedown','T'); setButtonDown(true, false, this);"
onclick="dadFolderSelectedFromFileCabinet(); return false;"
name="dadSaveAccountPreference"
id="dadSaveAccountPreference"
value="Choose Folder"
class="rndbuttoninpt bntBgT"
style="color: white !important">
</td>
<td id="tdrightcap_newfolder">
<img width="3" height="50%" border="0" class="bntRT" src="/images/nav/ns_x.gif">
<img width="3" height="50%" border="0" class="bntRB" src="/images/nav/ns_x.gif">
</td>
</tr>
</tbody>
</table>
<!-- end of choose folder button -->
</td>
<td colspan='2'>
<span id='dadUserPrefInfo' class='smalltext' style='color: red'>
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</tbody>
</table>
</div>
<!-- end screen for file cabinet picker -->
<!-- start - In-App Help Notification -->
<div id='dadInAppNotif' style='display: none;'>
<b>File Drag and Drop</b>
<br/>
Launch the File Drag and Drop Tutorial to learn more about the feature.
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 15px;">
<tbody>
<tr>
<td>
<table style="border-collapse: collapse; border: 0px !important;">
<tbody>
<tr>
<td style="padding: 0px; width: 10%;">
<table id="tbl_dadNotifBtnTutorial" class="uir-button" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="tr_dadNotifBtnTutorial" class="pgBntG pgBntB">
<td id="tdleftcap_dadNotifBtnTutorial">
<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_dadNotifBtnTutorial" class="bntBgB dadTooltipButtonTdBody" valign="top" nowrap="">
<input
id="dadNotifBtnTutorial"
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 dadHelp(); return false;"
name="refreshmessages"
value="Launch Tutorial"
_mousedown="F">
</td>
<td id="tdrightcap_dadNotifBtnTutorial">
<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>
</tbody>
</table>
</td>
<td>
<table id="tbl_dadNotifBtnDontShow" class="uir-button" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="tr_dadNotifBtnClose" class="tabBnt">
<td id="tdleftcap_dadNotifBtnClose">
<img class="bntLT" width="10" height="50%" border="0" src="/images/nav/ns_x.gif">
<img class="bntLB" width="10" height="50%" border="0" src="/images/nav/ns_x.gif">
</td>
<td id="tdbody_dadNotifBtnClose" class="bntBgB dadTooltipButtonTdBody" valign="top" nowrap="" height="20" >
<input
id="dadNotifBtnClose"
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="Ext.Msg.hide(); return dadSpotlight(event, '');"
value="Close">
</td>
<td id="tdrightcap_dadNotifBtnClose">
<img class="bntRT" width="10" height="50%" border="0" src="/images/nav/ns_x.gif">
<img class="bntRB" width="10" height="50%" border="0" src="/images/nav/ns_x.gif">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table id="tbl_dadNotifChkboxDontShow" style="border-collapse: collapse; border: 0px !important;">
<tbody>
<tr id="tr_dadNotifChkboxDontShow">
<td id="tdbody_dadNotifChkboxDontShow" style="padding: 0px;">
<input id="dadNotifChkboxDontShow" type="checkbox" value="Don't show this message again" style="margin-right: 0px; margin-left: 0px;" onclick="dadSetSuppressTutorial();">
<span style="vertical-align: top;">Don't show this message again</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end - In-App Help Notification -->
<script src="/core/media/media.nl?id=4905&c=YOURACCOUNTNUMBER&h=1b7c667ea8b53948ecd9&_xt=.js"></script>
<script src="/core/media/media.nl?id=4907&c=YOURACCOUNTNUMBER&h=7df70b3746a1fbdaafaa&_xt=.js"></script>
<script src="/core/media/media.nl?id=4908&c=YOURACCOUNTNUMBER&h=56155bd8de43eb77c657&_xt=.js"></script>
<script src="/core/media/media.nl?id=4904&c=YOURACCOUNTNUMBER&h=f71239c6c3233ca71bb0&_xt=.js"></script>
<script src="/core/media/media.nl?id=4895&c=YOURACCOUNTNUMBER&h=687954b4791034121c6f&_xt=.js"></script>
<script src="/core/media/media.nl?id=4891&c=YOURACCOUNTNUMBER&h=460416c4b00c6a7820c0&_xt=.js"></script>
<script src="/core/media/media.nl?id=4923&c=YOURACCOUNTNUMBER&h=a71c8743b80fcf85c4a9&_xt=.js"></script>
<script src="/core/media/media.nl?id=4920&c=YOURACCOUNTNUMBER&h=3706044eb616daed47b3&_xt=.js"></script>You will need to edit this and insert the values/parameters from the urls of the files you checked in the File Cabinet. The top part of the File Code will display 3 css links and the bottom part will display 8 scripts. You need to replace the URL for these to display the URL from these files in your Production Account.
Replace the parameters for id and c with the value of the same parameters from the url you took note of in your own File Cabinet to make sure the document points to the correct internal ID as it is installed in your NetSuite Account. Bear in mind that what you need to copy and paste would be from id until .css. You can also copy the entire url of the file and paste it after the href=" replacing the /core/media/media.nl?id=FILEINTERNALID&....
This is the sample code for the first three lines that begin with
link type:
<link type="text/css" rel="stylesheet" href="/core/media/media.nl?id=FILEINTERNALID&c=YOURACCOUTNUMBER&h=mWlYBmJnSXLrbSpSLm8pVXD0QkZkqI7oFdXqLt0B_SatfXeD&mv=khnxj49k&_xt=.css" />
For the script source part of the File Code, replace the sample from id= up until .js
This is the sample code for the lines that begin with script src
<script src="/core/media/media.nl?id=FILEINTERNALID&c=YOURACCOUTNUMBER=h72aoBuQg8u3ic3me1VRecp_Z8f5uiDBv4jtV17c2bNF5kF_&mv=khnxj51c&_xt=.js"></script>
Note: You can also copy the url of the file and paste it after the href=", replacing the /core/media/media.nl?id=FILEINTERNALID&....
Once this file has been modified to include your the URLs from your account, you can then create the DnD File Html.
- Log in as an administrator
- Navigate to Customization > Lists, Records & Fields > Record Types
- Filters:
- From Bundle: Select 41309
- DnD File Html: Click New Record
- File Codes: Paste the modified file
- Click Save
This should now display the drop zone on the records where it is enabled.
Disclaimer
The sample code described herein is provided on an "as is" basis, without warranty of any kind, to the fullest extent permitted by law. Oracle + NetSuite Inc. does not warrant or guarantee the individual success developers may have in implementing the sample code on their development platforms or in using their own Web server configurations.
Oracle + NetSuite Inc. does not warrant, guarantee or make any representations regarding the use, results of use, accuracy, timeliness or completeness of any data or information relating to the sample code. Oracle + NetSuite Inc. disclaims all warranties, express or implied, and in particular, disclaims all warranties of merchantability, fitness for a particular purpose, and warranties related to the code, or any service or software related thereto.
Oracle + NetSuite Inc. shall not be liable for any direct, indirect or consequential damages or costs of any type arising out of any action taken by you or others related to the sample code.
Oracle + NetSuite Inc. does not warrant, guarantee or make any representations regarding the use, results of use, accuracy, timeliness or completeness of any data or information relating to the sample code. Oracle + NetSuite Inc. disclaims all warranties, express or implied, and in particular, disclaims all warranties of merchantability, fitness for a particular purpose, and warranties related to the code, or any service or software related thereto.
Oracle + NetSuite Inc. shall not be liable for any direct, indirect or consequential damages or costs of any type arising out of any action taken by you or others related to the sample code.