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.
You need to load the dropzone file before main.js since main.js requires the Dropzone member to exist.
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; as Dropzone.autoDiscovery = false;
I had a = instead of a : in after dictDefaultMessage in 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>
Related
I have a problem that my HTML code does not load my css files. The code works if put into the main.html tag, however as outsourced to the separate css files, not working at all.
Link to the project: https://github.com/Svantevith/Python/tree/master/ToDoList
The overall structure of the folder:
The head tag of main.html:
<head>
<title>ToDoList App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
<link id="sheet-theme" rel="stylesheet" type="text/css" href="light.css">
<!-- Nunito Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200&display=swap" rel="stylesheet">
</head>
In my django project, the rest of HTML files extend the main.html file, for example the register view:
{% extends 'base/main.html' %}
{% block content %}
<div class="header-bar">
<h1>Register</h1>
</div>
<div class="card-body">
<form method="POST">
{% csrf_token %}
{{form.as_p}}
<input style="margin-top: 16px" class="button" type="submit" value="Register">
</form>
<p>Already have an account? <a id="plain" href="{% url 'login' %}">Login</a></p>
</div>
{% endblock content %}
What might be the problem?
EDIT:
Solved the problem by adding the base/static/base folder and accessing the css via {% static 'base/file.css' %} as mentioned in the comments and official documentation ;)
You have to just put the {% load static %} on top of your main.html code
And in the Head section, you should change the link as I did in href.
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static 'light.css'%}">
Your href="light.css" is the problem here. The system is looking for that file in the main folder that you are in. You have to tell the system to go to the base folder in the template folder using Jinja syntax. Your link should be
<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static light.css %}">
I just started learning JS and I keep failing to make a function successfully run via external javascript. I have no idea what is wrong. The thing is that it works when using inline javascript, but not external one. Here's the following code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title id='title'> Home </title>
</head>
<body>
<input type="button" id="btn" value="testas" onclick="myFunction()" />
<address>
Written by Jon Doe
</address>
<script src="{% static 'javascript/js.js' %}"></script>
</body>
</html>
JS:
function ChangeTitle() {
document.getElementById("title").innerHTML = 'Homepage';
}
I want to change the title of "Home" to "Homepage" but it doesn't work on external JS.
in your JS script you only created function, now you need to call it.
Just add ChangeTitle(); at the end of script.
I am writing a website in Django and Vanilla JS
I have 2 html pages, I want them both to share css but I want them to use different javascript.
Both pages extend a layout.html.
The layout.html looks begins like this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
My index.html (which extends my layout.html) begins like this
{% extends "network/layout.html" %}
{% load static %}
<script src="{% static 'network/messages.js' %}"></script>
and my Javascript file looks like this:
document.addEventListener('DOMContentLoaded', function() {
console.log("page loaded!")
document.addEventListener('click', event => {
const element = event.target;
console.log("Something was clicked")
})
});
It simply prints out a line when the page is loaded and when something is clicked.
However, when I go to index.html with the code like this, the javascript file is not loaded, nothing is printed out when the page is loaded or when anything is clicked.
However, if I modify the layout.html page to be like this:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
<script src="{% static 'network/messages.js' %}"></script>
</head>
where I load the messages.js, and then remove it from the index.html like this:
{% extends "network/layout.html" %}
Then the javascript works, and the page loads it properly.
The only problem with this is that it also loads it for my other pages which I do not want, I only want to load message.js for index.html and I am not sure why it refuses to load when I only include it in index.html.
I appreciate any help.
This is not how you extend templates. Django templates use a block system. So the script in the index.html isn't rendered at all. You must have an empty block in layout.html, and override that block in index.html.
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
index.html
{% extends "network/layout.html" %}
{% load static %}
{% block content %}
<script src="{% static 'network/messages.js' %}"></script>
{% endblock content %}
Try adding HTML to your current index.html. It won't be displayed. You must enclose everything in blocks for it to work.
I have been importing JS files into my template using:
<script src="{% static 'inventory/js/panel.js' %}" type="text/javascript"></script>
while importin CSS using
<link href="{{ STATIC_URL }}common/css/form.css" rel="stylesheet" type="text/css">
Can you tell me how to import CSS files using the static template tag like in importing JS files. Thanks
It's almost the same as your js:
{% load staticfiles %}
<link href="{% static "css/base.css" %}" rel="stylesheet"/>
I am facing to load static only css and Javascript in my django project.
By this code image files are loading but only js and css files are not loading
{% load staticfiles %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="{% static "pro.css" %}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1>Hi my first django application</h1>
<img src="{% static "images/img08.jpg" %}"/>
<div id="demo"></div>
</div>
</body>
</html>
and my page source in browser
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="/static/pro.css rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1></h1>
<img src="/static/images/img08.jpg"/>
<div id="demo"></div>
</div>
</body>
</html>
my setting files code`
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS= (os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),)
I got this error message when i checked in my Javascript console -
127.0.0.1/:19 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:
This is for project (common) statics:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
And this is for your apps statics:
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
Then in template you can access it using:
{% load static %}
{# this is in project static dir == tip №1 == static/... #}
<script type="text/javascript" src="{% static ' js/bootstrap.min.js' %}"></script>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
{# suppose your app name is `questions` == tip №2 == questions/static/questions/... #}
<script type="text/javascript" src="{% static 'questions/js/some.js' %}"></script>
<link href="{% static 'questions/css/pro.css' %}" rel="stylesheet" type="text/css">
Try this :
<link href="{% static "css/pro.css" %} rel="stylesheet" type="text/css"/>
same applies for js.
You have given path for images as static "images/image_name.jpg" but missing the same for css and js files
I guess what you are missing is collectstatic
run this command
python manage.py collectstatic
docs : https://docs.djangoproject.com/en/1.8/ref/contrib/staticfiles/
Hope this helps!
It was my problem too!
but i solve it :
you should go to your project setting setting.pyand find STATIC_URL
note url which is in STATIC_URL then change it to the path of absolute static files
for example my path is MySite/MyApp/static/My_App/'static files'
after that copy the path of your My_app to the STATIC_URL then it should work.
Note: you should insert your path in STATIC_URL with this format:
/file1/ or `/file1/file2/.../`
hope useful