Why doesn't Django load my javascript file correctly?
Question
I am new to Django and I'm trying to implement drag and drop file uploading using dropzone.js . I was follow this tutorial to start of with. Dropzone is working fine and the file is being uploaded and stored correctly, my issues comes with the customization of the dropzone instance. I created a second javascript file to create my custom dropzone like the tutorial showed and included it into the django template. But for some reason this does not change anything, with or without customization javascript file, the dropzone looks exactly the same.
The javascript file:
Dropzone.autoDiscovery = false;
const dropzone = new Dropzone("#drop", {
dictDefaultMessage = "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
The django template file I'm trying to include the script into:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
<!--dropzone js & css-->
<link rel="stylesheet" tpye="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
</body>
</html>
My static file directory is setup correctly, all my other static files load without issues and from the command prompt [15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0 I can see that the file was found, since 304 stands for Not Modified .
Since I do not know any javascript, I'm not sure if I made a mistake in the javascript file, or if it is a deeper issue. Any help is appreciated.
2 answers
solution1
1 2021-01-15 15:33:40
You need to load the dropzone file before main.js since main.js requires the Dropzone member to exist.
solution2
0 ACCPTED 2021-01-15 17:03:05
Ok so I found my error, it was a quick fix caused, as always, by human error.
as @schillingt answered, I had to place the main.js include after the dropzone.js
I misspelled
Dropzone.autoDiscover = false;asDropzone.autoDiscovery = false;I had a
=instead of a:in afterdictDefaultMessagein main.js
Final main.js:
var myDropzone = new Dropzone("#drop", {
dictDefaultMessage: "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
Final Django template:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--dropzone js & css-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.