Pass data from Python (flask framework) to javascript

Question

I try to pass data (exactly a path or a url) from flask to a javascript. But it don't recognize my variable. On the server side: it upload a file, process this file and then create and save many images. When I try to pass the path to a javascript file which use three.js library it doesn't.

@app.route('/upload', methods=['POST'])
def upload_file():
 print('coucou')
 if request.method == 'POST':
 file = request.files['file']
 print(file)
 # if file and allowed_file(file.filename):
 filename = secure_filename(file.filename)
 print(filename)
 file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
 path = UPLOAD_FOLDER + filename
 fits_reader = FitsReader.FitsReader()
 fits_reader.open_file(path)
 cube_faces = ['/home/morban/essaiserver/cube3D/CubeX.PNG', '/home/morban/essaiserver/cube3D/CubeY.PNG', '/home/morban/essaiserver/cube3D/CubeZ.PNG']
 return render_template('index.html', cube_faces=cube_faces)
for (var i = 0; i < 3; i++) {
 switch (i) {
 case 0:
 texture[i] = new THREE.ImageUtils.loadTexture('{{ cube_faces[0] }}');
 console.log('{{ cube_faces[0] }}')
 break;
 case 1:
 texture[i] = new THREE.ImageUtils.loadTexture('{{ cube_faces[1] }}');
 break;
 case 2:
 texture[i] = new THREE.ImageUtils.loadTexture('{{ cube_faces[2] }}');
 break;
 }

• Mr. Concolato: Have you tried placing the data you need in a txt file and then accessing it via an Ajax call? It is a bit much, but if nothing else works, at least that we know will. Also, does flask have a scripting feature like Django where you can print the server-side variable in your view?

Answer 1

The javascript must be in the template file, and not included has script source.

If included, you can make it has a function or "class" and use it like this:

 (function($) {
 var texture = new LoadTexture(
 '#filter_form',
 {{ cube_faces | tojson | safe }}
 );
 })(jQuery); 

you could/should pass cube_fase has json and filter it to safe on Jinja2.