Dec-03-2017, 03:32 AM
Hi experts,
I amsharing HTML code Which I am able to find. Since I am not front end developer,so I am not sure this code will help you to understand my issue or not . Apologies if am spamming these post with un necessary inputs . But I am still trying my best to make you understand this issue ,so that I can get help .
In below mnetioned HTML tag I am trying to access
<label for="email-file-upload" class="custom-file-upload btn-email">
<span class="glyphicon glyphicon-arrow-up"></span> Upload File
</label>
**************************************************************************************
I amsharing HTML code Which I am able to find. Since I am not front end developer,so I am not sure this code will help you to understand my issue or not . Apologies if am spamming these post with un necessary inputs . But I am still trying my best to make you understand this issue ,so that I can get help .
In below mnetioned HTML tag I am trying to access
<label for="email-file-upload" class="custom-file-upload btn-email">
<span class="glyphicon glyphicon-arrow-up"></span> Upload File
</label>
**************************************************************************************
<html ng-app="MarketingBounceBackApp" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MDM: Marketing Bounce Back</title>
<link rel="stylesheet" type="text/css" href="public/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="public/vendor/octicons/octicons.css">
<link rel="stylesheet" type="text/css" href="public/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="public/app/toaster/toaster.min.css">
<link rel="stylesheet" type="text/css" href="public/app/common/common.css">
<style type="text/css">
.animate-if.ng-enter, .animate-if.ng-leave { -webkit-transition:all ease-out 2s; transition:all ease-out 2s; }
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active { opacity:0; }
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active { opacity:1; }
.drawer, .content { padding: 0; height: 100%; }
.content { border-left: 2px solid rgba(0,0,0,0.15); }
.search-bar { height: 80px; padding-top: 20px; padding: 20px 25px; }
.search-bar > * { display: inline-block; }
.search-bar .title { margin: 0; position: relative; top: 5px; padding-right: 15px; }
.search-content { padding-top: 10px; }
</style>
<link rel="stylesheet" type="text/css" href="public/app/marketingBounceBacks/marketingBounceBack.css">
</head>
<body>
<div class="container-fluid main">
<div class="row wrapper">
<div class="col-md-2 col-sm-3 col-xs-3 drawer">
<drawer role="UI/UX-Engineer" active="marketingBounceBack" class="ng-isolate-scope"><div class="drawer-wrapper" ng-init="init()">
<div class="nav-links">
<div class="accordion" id="accordion2">
<!-- BEYOND HERE IS THE TEST CODE OF A YOUNG MJP -->
<div class="accordion-group"> <!-- this indicates a "higher level" drawer... ie, click this to see various "subpages" -->
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseHome" id="homeTab" ng-click="openHomeTab()" aria-expanded="false">
HOME PAGE
</a>
</div>
<div id="collapseHome" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="homeTab" ng-class="{'active': isActive('home') }"><a href="/mdm/app/homePage"><span class="octicon octicon-home"></span>Home</a></div>
</div>
</div>
</div>
<!-- ABOVE HERE IS THE TEST CODE OF A YOUNG MJP -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne" id="peopleTab" ng-click="openPeopleTab()">
PEOPLE
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="peopleTab" ng-class="{'active': isActive('people') }"><a href="/mdm/app/people"><span class="octicon octicon-person"></span>Gold Record Search</a></div>
<div class="sourceTab" ng-class="{'active': isActive('source') }"><a href="/mdm/app/source"><span class="octicon octicon-file-media"></span>Source Record Search</a></div>
<div class="manual-reviewTab" ng-class="{'active': isActive('manual-review') }"><a href="/mdm/app/manual-review"><span class="octicon octicon-file-submodule"></span>Manual Review Queue</a></div>
<div class="stitcherTab" ng-class="{'active': isActive('stitcher') }"><a href="/mdm/app/stitcher"><span class="octicon octicon-git-pull-request"></span>Stitching Tool</a></div>
<div class="marketingBounceBackTab active" ng-class="{'active': isActive('marketingBounceBack') }"><a href="/mdm/app/marketingBounceBack"><span class="octicon octicon-git-pull-request"></span>Marketing Bounce Backs</a></div>
<div class="manageBounceBackTab" ng-class="{'active': isActive('manageBounceBack') }"><a href="/mdm/app/manageBounceBack"><span class="octicon octicon-git-pull-request"></span>Manage Bounce Backs</a></div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwo" id="accountsTab" ng-click="openAccountsTab()" aria-expanded="false">
ACCOUNTS
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="accountsTab" ng-class="{'active': isActive('accounts') }"><a href="/mdm/app/accounts"><span class="octicon octicon-briefcase"></span>Gold Record Search</a></div>
<div class="accountsSourceTab" ng-class="{'active': isActive('accountsSource') }"><a href="/mdm/app/accountsSource"><span class="octicon octicon-versions"></span>Source Record Search</a></div>
<div class="accountsManualReviewTab" ng-class="{'active': isActive('accountsManualReview') }"><a href="/mdm/app/accountsManualReview"><span class="octicon octicon-book"></span>Manual Review Queue</a></div>
<div class="accountsStitcherTab" ng-class="{'active': isActive('accountsStitcher') }"><a href="/mdm/app/accountsStitcher"><span class="octicon octicon-git-pull-request"></span>Stitching Tool</a></div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree" id="orgDomainsTab" ng-click="openOrgTab()" aria-expanded="false">
ORG DOMAINS
</a>
</div>
<div id="collapseThree" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="org-domainsTab" ng-class="{'active': isActive('org-domains') }"><a href="/mdm/app/org-domains"><span class="octicon octicon-mention"></span>Org Domains</a></div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseFour" id="privacyTab" ng-click="openPrivacyTab()" aria-expanded="false">
PRIVACY
</a>
</div>
<div id="collapseFour" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="babrTab" ng-class="{'active': isActive('contacts') }"><a href="/mdm/app/contacts"><span class="octicon octicon-repo"></span>Contacts</a></div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseFive" id="babrTab" ng-click="openBabrTab()" aria-expanded="false">
SELF SERVICE
</a>
</div>
<div id="collapseFive" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="babrTab" ng-class="{'active': isActive('babr') }"><a href="/mdm/app/babrSelfService"><span class="octicon octicon-link-external"></span>BABR</a></div>
<div class="contactDedupeTab" ng-class="{'active': isActive('contactDedupe') }"><a href="/mdm/app/contactDedupe"><span class="octicon octicon-person"></span>Contact Dedupe</a></div>
<div class="accountDedupeTab" ng-class="{'active': isActive('accountDedupe') }"><a href="/mdm/app/accountDedupe"><span class="octicon octicon-organization"></span>Account Dedupe</a></div>
</div>
</div>
</div>
<!--<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseSix" id="dnbTab" ng-click="openEnterpriseTab()">
ENTERPRISE
</a>
</div>
<div id="collapseSix" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="dunsReviewTab" ng-class="{'active': isActive('enterprise')}"><a href="/mdm/app/enterprise"><span class="octicon octicon-diff-renamed"></span>Duns Review</a></div>
</div>
</div>
</div>-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseSeven" id="bulkLoaderTab" ng-click="openBulkLoaderTab()" aria-expanded="false">
BULK LOADER
</a>
</div>
<div id="collapseSeven" class="accordion-body collapse" style="display: none; height: 0px;" aria-expanded="false">
<div class="accordion-inner">
<div class="bulkStitcherTab" ng-class="{'active': isActive('bulkStitcher') }"><a href="/mdm/app/bulkStitcher"><span class="octicon octicon-git-pull-request"></span>People</a></div>
<div class="accountsBulkStitcherTab" ng-class="{'active': isActive('accountsBulkStitcher') }"><a href="/mdm/app/accountsBulkStitcher"><span class="octicon octicon-git-pull-request"></span>Accounts</a></div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="profile-block">
<label>Username:</label>
<p class="profile-name">{{ username }}</p>
<label>Role:</label>
<p class="job-title">{{ role }}</p>
</div>-->
</div>
<style>
drawer, .drawer-wrapper { width: 100%; height: 100%; }
drawer .nav-links a { display: block; height: 50px; line-height: 50px; padding-left: 20px; color: #777; border-bottom: 1px solid rgba(0,0,0, 0.25); transition: background 0.2s linear; overflow: hidden; }
drawer .nav-links a:hover, drawer .nav-links a.active { text-decoration: none; transition: background 0.2s linear; }
drawer .nav-links [class^='octicon'] { padding-right: 10px; }
drawer .profile-block { position: absolute; bottom: 0; width: 100%; padding: 12px 15px 5px; color: white; background: #555; font-size: 12px; font-size: 1.2rem; }
drawer .profile-block p { padding-left: 20px; }
drawer .profile-block button.logout { color: black; border: none; padding: 2px 15px; margin-bottom: 10px; border-radius: 2px; background: linear-gradient(#FEFEFE, #BCBCBC); box-shadow: 0 2px 2px 2px rgba(0,0,0,0.15); transition: all 0.3s ease; }
drawer .profile-block button.logout:active { background: #BCBCBC; box-shadow: 0 2px 2px 2px rgba(0,0,0,0.35); transition: boxShadow 0.3s ease; }
.peopleTab { border-left: 5px solid #BDBDBD; color: #000000;}
.peopleTab :hover { color: #000000; background: #DCDCDC; }
.peopleTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.peopleTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.peopleTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.sourceTab { border-left: 5px solid #BDBDBD; color: #000000;}
.sourceTab :hover { color: #000000; background: #DCDCDC; }
.sourceTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.sourceTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.sourceTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.manual-reviewTab { border-left: 5px solid #BDBDBD; color: #000000;}
.manual-reviewTab :hover { color: #000000; background: #DCDCDC; }
.manual-reviewTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.manual-reviewTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.manual-reviewTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.stitcherTab { border-left: 5px solid #BDBDBD; color: #000000;}
.stitcherTab :hover { color: #000000; background: #DCDCDC; }
.stitcherTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.stitcherTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.stitcherTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.bulkStitcherTab { border-left: 5px solid #BDBDBD; color: #000000;}
.bulkStitcherTab :hover { color: #000000; background: #DCDCDC; }
.bulkStitcherTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.bulkStitcherTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.bulkStitcherTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.org-domainsTab { border-left: 5px solid #BDBDBD; color: #000000;}
.org-domainsTab :hover { color: #000000; background: #DCDCDC; }
.org-domainsTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.org-domainsTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.org-domainsTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountsTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountsTab :hover { color: #000000; background: #DCDCDC; }
.accountsTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountsTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountsTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountsSourceTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountsSourceTab :hover { color: #000000; background: #DCDCDC; }
.accountsSourceTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountsSourceTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountsSourceTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountsManualReviewTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountsManualReviewTab :hover { color: #000000; background: #DCDCDC; }
.accountsManualReviewTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountsManualReviewTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountsManualReviewTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountsStitcherTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountsStitcherTab :hover { color: #000000; background: #DCDCDC;}
.accountsStitcherTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountsStitcherTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountsStitcherTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountsBulkStitcherTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountsBulkStitcherTab :hover { color: #000000; background: #DCDCDC;}
.accountsBulkStitcherTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountsBulkStitcherTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountsBulkStitcherTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.contactsTab { border-left: 5px solid #BDBDBD; color: #000000;}
.contactsTab :hover { color: #000000; background: #DCDCDC; }
.contactsTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.contactsTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.contactsTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.babrTab { border-left: 5px solid #BDBDBD; color: #000000;}
.babrTab :hover { color: #000000; background: #DCDCDC; }
.babrTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.babrTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.babrTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.contactDedupeTab { border-left: 5px solid #BDBDBD; color: #000000;}
.contactDedupeTab :hover { color: #000000; background: #DCDCDC; }
.contactDedupeTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.contactDedupeTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.contactDedupeTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.accountDedupeTab { border-left: 5px solid #BDBDBD; color: #000000;}
.accountDedupeTab :hover { color: #000000; background: #DCDCDC; }
.accountDedupeTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.accountDedupeTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.accountDedupeTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.homeTab { border-left: 5px solid #BDBDBD; color: #000000; }
.homeTab :hover { color: #000000; background: #DCDCDC; }
.homeTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.homeTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.homeTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.dunsReviewTab { border-left: 5px solid #BDBDBD; color: #000000; }
.dunsReviewTab :hover { color: #000000; background: #DCDCDC; }
.dunsReviewTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.dunsReviewTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.dunsReviewTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.marketingBounceBackTab { border-left: 5px solid #BDBDBD; color: #000000; }
.marketingBounceBackTab :hover { color: #000000; background: #DCDCDC; }
.marketingBounceBackTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.marketingBounceBackTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.marketingBounceBackTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
.manageBounceBackTab { border-left: 5px solid #BDBDBD; color: #000000; }
.manageBounceBackTab :hover { color: #000000; background: #DCDCDC; }
.manageBounceBackTab.active:hover { color: #000000; background: #BDBDBD; border-left: 5px solid #BDBDBD;}
.manageBounceBackTab.active {border-left: none; background: #BDBDBD; font-weight: bold;}
.manageBounceBackTab.active a { color: #FFFFFF; background-color: #BDBDBD;}
#homeTab{ color: #FFF; background: #00213F; font-weight: bold; cursor: pointer; cursor: hand; }
#peopleTab{ color: #FFF; background: #00315D; font-weight: bold; cursor: pointer; cursor: hand;}
#accountsTab{ color: #FFF; background: #00417B; font-weight: bold; cursor: pointer; cursor: hand;}
#orgDomainsTab{ color: #FFF; background: #00529B; font-weight: bold; cursor: pointer; cursor: hand;}
#privacyTab{ color: #FFF; background: #3374AF; font-weight: bold; cursor: pointer; cursor: hand;}
#babrTab{ color: #FFF; background: #66A0D4; font-weight: bold; cursor: pointer; cursor: hand;}
#dnbTab{ color: #FFF; background: #A8D6FF; font-weight: bold; cursor: pointer; cursor: hand;}
#dnbTab{ color: #FFF; background: #A8D6FF; font-weight: bold; cursor: pointer; cursor: hand;}
#bulkLoaderTab{ color: #777; background: #FFFFFF; font-weight: bold; cursor: pointer; cursor: hand;}
</style>
</drawer>
</div>
<div class="col-md-10 col-sm-9 col-xs-9 content">
<div class="row nav">
<nav page="marketingBounceBack" username="pubhatia" pagetitle="Marketing Bounce Backs" class="ng-isolate-scope"><div class="nav-container marketingBounceBack col-md-12">
<div class="col-md-1">
<span class="brand"><a href="/mdm/app/">MDM</a></span>
</div>
<div class="col-md-6 col-md-offset-2">
<p class="page-title ng-binding">Marketing Bounce Backs</p>
</div>
<div class="profile-block col-md-2 col-md-offset-1">
<p class="profile-name"><b class="ng-binding"><span class="glyphicon glyphicon-user"></span> PUBHATIA</b></p>
</div>
</div>
<style>
nav .nav-container {
height: 50px;
background: linear-gradient(#388ED6, #2A77B8);
background: #444;
}
.nav-container.people { border-color: #00315d; }
.nav-container.source { border-color: #00315d; }
.nav-container.stitcher { border-color: #00315d; }
.nav-container.manual-review { border-color: #00315d; }
.nav-container.accounts { border-color: #00417B; }
.nav-container.accountsSource { border-color: #00417B; }
.nav-container.accountsManualReview { border-color: #00417B; }
.nav-container.accountsStitcher { border-color: #00417B; }
.nav-container.org-domains { border-color: #00529b; }
.nav-container.contacts { border-color: #3374AF }
nav .brand {
display: block;
padding: 0 20px;
height: 50px;
width: 100px;
line-height: 50px;
font-size: 22px;
}
nav .brand a { color: #FEFEFE; }
nav .brand a:hover { text-decoration: none; }
p.profile-name{
color: white;
padding-top: 1em;
float: right;
}
p.page-title {
color: white;
font-size: 1.75em;
padding-top: 0.25em;
text-align: center;
}
</style>
</nav>
</div>
<div class="row">
<marketing-bounce-back><div class="col-md-10 col-md-offset-1 bulkStitch-wrapper">
<div id="bb-tabs">
<button id="emailTab" class="btn btn-md btnTabSelected" ng-class="{true: 'btnTabSelected', false: 'btnTabDeselected'}[emailSelected]" ng-click="emailTab()" style="">Email</button>
<button id="phoneTab" class="btn btn-md btnTabDeselected" ng-class="{true: 'btnTabSelected', false: 'btnTabDeselected'}[phoneSelected]" ng-click="phoneTab()" style="">Phone</button>
<button id="mailTab" class="btn btn-md btnTabDeselected" ng-class="{true: 'btnTabSelected', false: 'btnTabDeselected'}[mailSelected]" ng-click="mailTab()" style="">Mail</button>
</div>
<fieldset id="emailBounceBacks" ng-show="emailSelected" class="" style="">
<legend class="emailLegend">Bulk Loader - Email Bounce Backs</legend>
<div class="col-sm-12 bb-content">
<div class="col-sm-4">
<button class="btn btn-md download-button btn-email" ng-click="downloadFile('email_bounceback_template.xlsx')">
<span class="glyphicon glyphicon-download-alt"></span> Download Email End Date Template
</button>
</div>
<div class="col-sm-4">
<label for="email-file-upload" class="custom-file-upload btn-email">
<span class="glyphicon glyphicon-arrow-up"></span> Upload File
</label>
<div id="fn-display"><span ng-bind="emailFilename" class="ng-binding"></span></div>
<input id="email-file-upload" ng-model="selectedTxtEmailFile" type="file" name="addAttachment" accept=".xlsx" on-file-change="updateEmailFile" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="col-sm-4">
<button class="btn btn-md submit-button btn-email" ng-click="submitFile('EMAIL_BOUNCE_BACK', 'emailFile')">
<span class="glyphicon glyphicon-play"></span> Submit
</button>
</div>
</div>
</fieldset>
<fieldset id="phoneBounceBacks" ng-show="phoneSelected" class="ng-hide" style="">
<legend class="phoneLegend">Bulk Loader - Phone Bounce Backs</legend>
<div class="col-sm-12 bb-content">
<div class="col-sm-4">
<button class="btn btn-md download-button btn-phone" ng-click="downloadFile('phone_bounceback_template.xlsx')">
<span class="glyphicon glyphicon-download-alt"></span> Download Phone Returns Template
</button>
</div>
<div class="col-sm-4">
<label for="phone-file-upload" class="custom-file-upload btn-phone">
<span class="glyphicon glyphicon-arrow-up"></span> Upload File
</label>
<div id="fn-display"><span ng-bind="phoneFilename" class="ng-binding"></span></div>
<input id="phone-file-upload" ng-model="selectedTxtPhoneFile" type="file" name="addAttachment" accept=".xlsx" on-file-change="updatePhoneFile" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="col-sm-4">
<button class="btn btn-md submit-button btn-phone" ng-click="submitFile('PHONE_BOUNCE_BACK', 'phoneFile')">
<span class="glyphicon glyphicon-play"></span> Submit
</button>
</div>
</div>
</fieldset>
<fieldset id="mailBounceBacks" ng-show="mailSelected" class="ng-hide" style="">
<legend class="mailLegend">Bulk Loader - Mail Bounce Backs</legend>
<div class="col-sm-12 bb-content">
<div class="col-sm-4">
<button class="btn btn-md download-button btn-mail" ng-click="downloadFile('mail_bounceback_template.xlsx')">
<span class="glyphicon glyphicon-download-alt"></span> Download Mail Returns Template
</button>
</div>
<div class="col-sm-4">
<label for="mail-file-upload" class="custom-file-upload btn-mail">
<span class="glyphicon glyphicon-arrow-up"></span> Upload File
</label>
<div id="fn-display"><span ng-bind="mailFilename" class="ng-binding"></span></div>
<input id="mail-file-upload" ng-model="selectedTxtMailFile" type="file" name="addAttachment" accept=".xlsx" on-file-change="updateMailFile" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="col-sm-4">
<button class="btn btn-md submit-button btn-mail" ng-click="submitFile('SNAIL_MAIL_BOUNCE_BACK', 'mailFile')">
<span class="glyphicon glyphicon-play"></span> Submit
</button>
</div>
</div>
</fieldset>
<div class="row footer">
<p>For questions or issues, please contact [email protected]</p>
</div>
</div>
</marketing-bounce-back>
<p class="disclaimer">Gartner Confidential - Internal Use Only</p>
</div>
</div>
</div>
<div id="toast-container" ng-class="[config.position, config.animation]" toaster-options="{'position-class': 'toast-bottom-right', 'newestOnTop': true}" class="ng-scope toast-bottom-right"><!-- ngRepeat: toaster in toasters --></div>
</div>
<!-- Required JS Dependencies -->
<script type="text/javascript" src="public/vendor/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="public/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="public/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="public/vendor/angular/angular-animate.min.js"></script>
<!-- Angular Dependencies -->
<script type="text/javascript" src="public/app/common/common.js"></script>
<script type="text/javascript" src="public/app/toaster/toaster.min.js"></script>
<script type="text/javascript" src="public/app/nav/nav.js"></script>
<script type="text/javascript" src="public/app/drawer/drawer.js"></script>
<script type="text/javascript" src="public/app/search/search.js"></script>
<script type="text/javascript" src="public/app/helperDirectives/helperDirectives.js"></script>
<!-- Main App -->
<script type="text/javascript" src="public/app/marketingBounceBacks/marketingBounceBack.js"></script>
</body></html>