Quiero hacer una función simple en JS para verificar la extensión del archivo cada vez que se cambia la entrada del archivo. Hasta aquí:

HTML:

 <div> <script src="{% static 'js/snip_uploads.js' %}" type="text/javascript"></script> <label for="snip">Add a snip</label> <input type="file" class="p-2 rounded" onchange="checkExtension()" name="snip" id="snip_file"> <br> </div>

JS:

 var snip = document.getElementById("snip_file"); snip.addEventListener('change', checkExtension); function checkExtension(event) { var input = event.srcElement; var fileName = input.files[0].name; var extension = fileName.substr(fileName.lastIndexOf(".")); var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i; var file = document.getElementById(event.target.name) if (allowedExtensionsRegx.test(extension) == true) { // some stuff } else { //some other stuff } }

Pero después de cargar la página, Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') . ¿Qué me estoy perdiendo?