parsing path variables from python(tornado) to javascript

Question

I have a code in python where I'm trying to send dynamic path of few images to javascript, but for some reason the '\'(delimiter) gets removed. I'm trying to achieve this by sending one image at a time. I'm using tornado as python server and have javascript code with html.

server.py

import tornado.ioloop
import tornado.web
import time
import os

class one(tornado.web.RequestHandler):
    def get(self):

        self.write('Hello')

class Article(tornado.web.RequestHandler):
    def get(self):

        dir_path = os.path.dirname(os.path.realpath(__file__))
        dir_path=os.path.join(dir_path, 'images')
        file='2000px-Python-logo-notext.svg_.jpg'
        file=os.path.join(dir_path, file)

        var1 = 'Orignal_Appp'
        self.render('template.html', var=var1, file1=file)

application = tornado.web.Application([
    (r"/", one),
    (r"/articles", Article),
],debug=True)

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

template.html

<html>
<title>

</title>
<body>
<br>

<h1 align="center"> </h1>

<br>
<div id='div2' align="center">
<h4>{{var}}</h4>
</div>
<div id='div1' align="center" >

<p><img id="dynamicImg" src="" style="width:300px;height:300px;"/></p>

</div>
</body>

<script>
    var N = "{{ file1 }}";

    var img = document.getElementById('dynamicImg'); 
    img.src = N
    document.write(N)
</script>

</html>

The output of image path from "document.write(N)":

D:namanimagesimages0px-Python-logo-notext.svg_.jpg

It should be something like :

D:\naman\images\images\2000px-Python-logo-notext.svg_.jpg

Also if in server.py I pass 'images/2000px-Python-logo-notext.svg_.jpg' as hard coded path value instead of variable, it works fine. So, my understanding is javascript is parsing the path and removing the '\' backward slash. I am pretty sure sure, its because of the backslash character, and I think this doesn't happen in flask. So it could be related to tornado, although I'm not sure. This might as well have a very common/general solution. let me know.

hard coded:

self.render('template.html', var=var1, file1='images/2000px-Python-logo-notext.svg_.jpg')

variable :

self.render('template.html', var=var1, file1=file)

I'm on windows 10, Python 3.7.3, tornado==5.1.1, but I would like to know about other platforms(linux) as well. Also, this may be a very common problem that I may have overlooked. I'm not sure. I looked around for this scenario and as well as other scenarios, but may be this question is duplicate, please direct me to the question with the solution, in such case. If anyone knows of any javascript function to overcome this issue Any information, help would be appreciative.

Thanks in advance!

Ben Darnell · Accepted Answer · 2019-08-10T17:38:45.523

2

var N = "{{ file1 }}"; gets turned into var N = "D:\naman\images\images\2000px-Python-logo-notext.svg_.jpg";, and backslash is a special character in javascript strings.

You need to escape this string for use in a javascript string literal. Tornado's default escaping behavior is appropriate for HTML (where characters like angle brackets are special but backslashes are not). The simplest way to do this is to use the json_encode function (which will turn a python string into a javascript string):

var N = {% raw json_encode(file1) %};

Note that there are no quote marks here - json_encode is responsible for adding them.

Escaping is tricky - you should be sure to test your app with paths containing special characters including backslashes, angle brackets, whitespace, ampersands and plus signs.

edited Aug 10 '19 at 17:38

answered Aug 09 '19 at 01:42

Ben Darnell

21,844
3
29
50

Sure, I get it, I see that you have answered all the tornado questions, so thanks for that. json_encode() enabled the path with the backslash to be read in js and then I used `N=N.replace(/"/g, '');` to get rid of the extra pair of quotes(" ") at the beginning and at the end of the string. – naman1994 Aug 09 '19 at 07:40
1

There shouldn't be any extra quotes - notice that there are no quotes around the braces in the template. But I did miss something - `json_encode` needs to be called with `{% raw %}` not `{{ }}`. I've updated the answer and you can see this working at https://repl.it/@bdarnell/NeedyCavernousWordprocessing – Ben Darnell Aug 10 '19 at 17:38

parsing path variables from python(tornado) to javascript

1 Answers1