I'm currently working on developing a drag and drop component, but I've encountered an issue with selecting the div using getElementById. When I try to do so, I receive an error message stating:
Uncaught TypeError: Cannot read property 'addEventListener' of nullAdditionally, the console log is showing null instead of the actual div element.
<template>
<div class="highlight" id="dragZone">
<input
v-model="inputText"
placeholder="Write something..."
/>
</div>
</template>
<script>
import $auth from '@/services/auth';
import $utils from '@/services/utils';
const dropArea = document.getElementById('dragZone');
console.log(dropArea);
// Prevent default drag behaviors
function preventDefault(e) {
e.preventDefault();
e.stopPropagation();
}
dropArea.addEventListener('dragenter', preventDefault, false);
dropArea.addEventListener('dragleave', preventDefault, false);
dropArea.addEventListener('dragover', preventDefault, false);
dropArea.addEventListener('drop', preventDefault, false);
// Handle dropped files
async function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
this.uploadingFile = await $utils.uploadFile(files, credentials);
}
dropArea.addEventListener('drop', handleDrop, false);
export default {
props: {
links: {
type: Object,
},
},
data(){
return{
uploadingFile: null
}
}
</script>