We Keep Coding

How to add img elements with Javascript when using Django?

I am trying to dynamically insert img elements to the website I am building which uses Django for the back-end. The images change often so I pass the src from Python to Javascript like this:
views.py
path='{% static "../static/assets/'+image_name+'" %}'
response = render(request, 'main.html',{'image_path':path})
return response
Then I declare a global variable in the template so I can use this in the .js files.
main.html
var imagePath = {{image_path|safe}}
Then I use Javascript to pass this as src to new img elements. However, when I do it, Django cannot find images. When I put the string as src to a img element manually, it works.
Does anyone know how to solve this?

You need to use this:
from django.templatetags.static import static
path = static(f'assets/{image_name}')
response = render(request, 'main.html',{'image_path':path})
return response

Using php var inside js file

I'm using Laravel's var ({{ $test }}), assets ({{ asset('upload/img/something.png' }}), route ( {{ route('something.something') }} ) in a js script. This script works correctly if its in a blade file.
I want to has this script inside a js file. I know that I can create a js function and call this in a blade file with arguments, but I have no more arguments. How I can solve my problem?

You can declare your variables in blade file, then include the javascript file to use them.
Example:
In your blade file you declare a url variable:
<script>
var url = "{{ route('something.something') }}";
</script>
Notice that we use var so that the variable will be visible in the scripts below this.
Then you include your script file:
<script src="{{ asset('js/myScript.js' }}"></script>
In that file you can use the url variable.
PS: maybe if you provide more code I will be able to help you more.

Unable to load concatenated static file source

I am new to django and eventually I learnt the use of static files in Django and to my relief I was finally able to load the files while hardcoding the file name in the {%static filename.jpg %}. However, when I tried to create a string by replacing the hardcoded filename.jpg with the dynamic file name, I wasn't getting the output.
Not working code snippet:
<script>
image_name = "1.png"
static_start = "{% static '"
static_end = "' %}"
image_src = static_start.concat(image_name, static_end)
window.alert(image_src)
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", image_src)
var element = document.getElementById("div_test");
element.appendChild(para);
</script>
Working Code snippet:
<script>
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", "{%static '1.png'%}")
var element = document.getElementById("div_test");
element.appendChild(para);
</script>
What I am trying to do is that, I have a bunch of image files that I am getting from somewhere through an API and I am storing them in the static folder. After downloading those image, I am trying to load them on my webpage, for that I am using the static file and getting the file name dynamically as I do not know what would the file name of the downloaded file.
The point is that string concatenation isn't working, while directly passing the string is.
Any help would really be appreciated.
P.S.: Apparently in the example shared above I am simply using 1.png which would eventually be replaced by the name of the file I wish to display.
Working code using get_static_prefix (the way I actually wanted)
<script>
image_name = "1.png"
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", "{% get_static_prefix %}" + image_name)
var element = document.getElementById("div_test");
element.appendChild(para);
</script>

I think I understand what you are trying to do here, but I don't think it is possible. Django templates are rendered on the server, and JavaScript is rendered on the client-side. You are trying to create the template tag with JavaScript, but the template tags won't be evaluated on the client-side, they will just be strings.

So after referring to other posts, I realized what I was doing wrong. I believe there was something that wasn't right about string concatenation and the escape characters and therefore Django has an option for get_static_prefix and that is was I was supposed to use instead of that stupid string concatenation. I have edited my question with the correct working response, exactly the way I wanted it to.
References: Stackoverflow question,
Django tutorial

Get filename from input file in Javascript

I have noticed that bootstrap is able to parse out and display the top level filename from a file input field when the user selects a file.
<input type="file" id="exampleFile">
JSFiddle: http://jsfiddle.net/na4j7n6y/
My question: Is this functionality exposed for me to use in my own javascript code? Or do I have to parse out the filename once again using my own technique?
I have tried retrieving the filename like so:
$('#exampleFile').val()
// Resolves to 'C:\fakepath\FILENAME' instead of 'FILENAME'

Well, bootstrap is a framework based on html, css and javascript. The javascript part of this framework uses jQuery and not a own library. Then you could try to solve it using a regex with javascript/jquery, for sample:
var fullPath = $("#exampleFile").val();
var filename = fullPath.replace(/^.*[\\\/]/, '');
Take a look here:
http://jsfiddle.net/na4j7n6y/1/
How to get the file name from a full path using JavaScript?

Check this JSFiddle to reference the filepath displayed.
http://jsfiddle.net/67y9tpd4/
HTML
<div id="write"><button type="button" onclick="getAfilepath()">Print Filepath</button></div>
JS
function getAfilepath(){
var afilepath = document.getElementById("uploadFile").value;
document.getElementById("write").innerHTML=afilepath;
}

Accessing content folder from js file

I'm trying to access image which is located in ~\Content\img folder. I'm trying to do that from JavaScript file which is located in ~\Scripts folder. This an MVC application.
U have tried absUrl + "\Content\img" + fileName. But it gives me Controller\Content\img\fileName.jpg

Forward slashes...
\Content\img\fileName.jpg
Should be
/Content/img/fileName.jpg

Please use the #Url.Content helper:
#Url.Content("~/img/fileName.png")
In case you use a separate javascript file you can put a <script> block in the beginning of the view page:
<script>
var ROOT = '#Url.Content("~/")';
</script>
And then refer to the ROOT variable in javascript:
var imagePath = ROOT + '/img/fileName.png';