Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added drag and drop functionality #440

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added drag and drop functionality #440

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<script type="x-shader/x-fragment" id="shader-fs"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TC8EC01HKK"></script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
Expand All @@ -38,7 +39,8 @@
</script>
</head>

<body>
<body id="drop-zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">

<div id="video-container" style="display:none"></div>
<div class="container-fluid d-flex flex-column main-container">
<!-- TODO: change this: -->
Expand Down Expand Up @@ -266,7 +268,7 @@ <h6>BLUE filters <i class="fa fa-filter" aria-hidden="true" style="color:#347ab7

<!-- ========================= intro/welcome msg =============================== -->
<!-- onClick="$('.choose-prompt').hide();" -->
<div class="choose-prompt welcome-msg">
<div id="dropZone" class="choose-prompt welcome-msg">
<div class="welcome-msg-text">
<h2 style="font-size:1.25rem;">Analyze plant health. <br> Visualize photosynthesis.</h2>
<p>Every pixel of your infragram media is converted to display the amount of infrared light reflected when used <a href="" style="color:var(--link-color);">with an Infragram camera or filter kit</a>. The default setting generates grey-scale NDVI, the Normalized Difference Vegetation Index, and has a built in colorize function to intensify individual pixel channels.</p>
Expand Down Expand Up @@ -533,6 +535,28 @@ <h6 style="text-decoration:underline;">BLUE filters <i class="fa fa-filter" aria
}
})()

function dropHandler(ev) {
ev.preventDefault();
if (ev.dataTransfer.items && ev.dataTransfer.items[0].kind === 'file') {
// Use DataTransferItemList interface to access the file(s)
const file = ev.dataTransfer.items[0].getAsFile();
const dataTransfer = new DataTransfer();
const fileInput = document.querySelector('input[type="file"]');
const fileSelect = document.getElementById('file-sel');
var event = new Event('change');
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
fileSelect.dispatchEvent(event);
}
}

function dragOverHandler(ev) {
console.log('File(s) in drop zone');

// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}

</script>
</body>
</html>