How to stream data from python to javascript - javascript

I am looking for a way to stream data from python script to a javascript within a html file.
My data is stored in a large csv file which looks like:
x1,x2,y1,y2
0.5,0.54,0.04,0.55
0.12,0.88,1.02,0.005
...
...
The python script must pre-process this data before sending it to javascript:
import csv
def send_data(filename):
with open(filename, "rb") as csvfile:
datareader = csv.reader(csvfile)
for row in datareader:
preprocessed = Do_something(row)
yield preprocessed
The javascript should process the received data from the python script above.

Without knowing more about your exact requirements you could do something like this using circuits:
Code: (untested)
import csv
from circuits.web import Server, Controller
def Do_something(row):
return row
class Root(Controller):
def send_data(self, filename):
self.response.stream = True
with open(filename, "rb") as csvfile:
datareader = csv.reader(csvfile)
for row in datareader:
preprocessed = Do_something(row)
yield preprocessed
app = Server(("0.0.0.0", 8000))
Root().register(app)
app.run()
Then requests to http://localhost:8000/send_data/filename would result in a stream resolve of the entire csv file. This also assumes you actually want to serve up the csv file as a web response to some web application.

Related

Connect views.py to a Javascript file

I'm working on a Django project showing PDF files from a dummy database. I have the function below in views.py to show the PDF files.
def pdf_view(request):
try:
with open ('static/someData/PDF', 'rb') as pdf:
response = HttpResponse(pdf.read(), content_type="application/pdf")
response['Content-Disposition'] = 'filename=test1.pdf'
return response
pdf.closed
except ValueError:
HttpResponse("PDF not found")
This function needs get connected to another function located in a javascript file.
How do we connect views.py to another Javascript file?
Finally, I added an "Iframe tag" in the JavaScript file. Then there was no need to use the "def pdf_view(request)" function.

JSON Response output is not updated on single click event

I am trying to build a java online compiler web app using django.
but every time I submit my code through AJAX call the new code is posted successfully to view.py but the JSON response object is still the previous one.
def code1(request):
response_data={}
**codet=request.POST.get("code","")** # getting the code text from Ajax req
**output=code(codet)** #sending code for execution
response_data['result']="Successful" #storing in response
response_data['message']=output
**return HttpResponse(json.dumps(response_data), content_type="application/json")**
def code(code_text):
return execute(code_text)
def execute(code_text):
filename_code=open('Main.java','w+') #creating file
filename_code.flush()
f1 = code_text.split("\n") # splitting code line by line
for i in f1:
filename_code.write(i+"\n") #writing code line by line
filename_code.close() #closing file
time.sleep(2) #giving wait
**compile_java(filename_code)**
#compiling file (Note: I am not using the file passed in compile_java)
**return execute_java(filename_code,input**) #running java file
def compile_java(java_file):
proc = subprocess.Popen('javac Main.java', shell=True)
def execute_java(java_file, stdin):
#java_class,ext = os.path.splitext(java_file)
cmd = ['java ', 'Main']
proc = subprocess.Popen(cmd, stdin=PIPE, stdout=PIPE, stderr=STDOUT)
stdout,stderr = proc.communicate(stdin)
stdoutstr= str(stdout,'utf-8')
**
1. return stdoutstr
**
Actually the previous json response is being sent for current code(codet)

How render binary image in javascript

My flask python app return an image as a response from a POST request:
def upload_file():
if request.method == 'POST':
return send_file('1.png', mimetype='image/png')
Then I want to use javascript and jquery ajax to do the request, and the response is:
success: function(img_response) {
console.log(img_response);
}
�PNG
���
IHDR����������?1��
�IDATx����nIv��vdU�Ѓ�ۀm6f`�����?���W3�1��%6Y��ER�xh�Pb��]�R�DfeFF�qo��_����O�4�]J$��.�%E�%E�ɲ$)...
How can I render this type of file in browser?
Maybe is better decode the image in base64 in flask, but how can I do it?
You should take a look here for encoding a binary to base64 with python. Once you got it, send the string to your app (frontend) as a response, then you can add something like:
<img id="myImgTag" src="data:image/png;base64, YOUR_BASE64_STRING_FROM_RESPONSE"></img>
You can add it with javascript with something like:
let img = document.getElementById('myImgTag').setAttribute('src','data:image/png;base64, YOUR_BASE64_STRING_FROM_RESPONSE')
====EDIT===
To read the file and encode it to base64 do the following:
import base64
...
myImage = open('your_file_name','rb')
myBase64File = base64.b64encode(myImage.read())
Then just use Flask to send 'myBase64File' var as you want (might be inside a JSON, as plain text, etc.)

Dropzone.js prevents Flask from rendering template

I am using Dropzone.js to allow drag and drop upload of CSV files via a Flask web site. The upload process works great. I save the uploaded file to my specified folder and can then use df.to_html() to convert the dataframe into HTML code, which I then pass to my template. It gets to that point in the code, but it doesn't render the template and no errors are thrown. So my question is why is Dropzone.js preventing the render from happening?
I have also tried just return the HTML code from the table and not using render_template, but this also does not work.
init.py
import os
from flask import Flask, render_template, request
import pandas as pd
app = Flask(__name__)
# get the current folder
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
#app.route('/')
def index():
return render_template('upload1.html')
#app.route('/upload', methods=['POST'])
def upload():
# set the target save path
target = os.path.join(APP_ROOT, 'uploads/')
# loop over files since we allow multiple files
for file in request.files.getlist("file"):
# get the filename
filename = file.filename
# combine filename and path
destination = "/".join([target, filename])
# save the file
file.save(destination)
#upload the file
df = pd.read_csv(destination)
table += df.to_html()
return render_template('complete.html', table=table)
if __name__ == '__main__':
app.run(port=4555, debug=True)
upload1.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<table width="500">
<tr>
<td>
<form action="{{ url_for('upload') }}", method="POST" class="dropzone"></form>
</td>
</tr>
</table>
EDIT
Here is the sample csv data I am uploading:
Person,Count
A,10
B,12
C,13
Complete.html
<html>
<body>
{{table | safe }}
</body>
</html>
Update: Now you can use Flask-Dropzone, a Flask extension that integrates Dropzone.js with Flask. For this issue, you can set DROPZONE_REDIRECT_VIEW to the view you want to redirect when uploading complete.
Dropzone.js use AJAX to post data, that's why it will not give back the control to your view function.
There are two methods to redirect (or render template) when all files were complete uploading.
You can add a button to redirect.
Upload Complete
You can add an event listener to automatic redirect page (use jQuery).
<script>
Dropzone.autoDiscover = false;
$(function() {
var myDropzone = new Dropzone("#my-dropzone");
myDropzone.on("queuecomplete", function(file) {
// Called when all files in the queue finish uploading.
window.location = "{{ url_for('upload') }}";
});
})
</script>
In view function, add an if statement to check whether the HTTP method was POST:
import os
from flask import Flask, render_template, request
app = Flask(__name__)
app.config['UPLOADED_PATH'] = 'the/path/to/upload'
#app.route('/')
def index():
# render upload page
return render_template('index.html')
#app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
for f in request.files.getlist('file'):
f.save(os.path.join('the/path/to/upload', f.filename))
return render_template('your template to render')
Your code does work. Your template will be rendered and returned.
Dropzone will upload files you drag and drop into your browser 'in the background'.
It will consume the response from the server and leave the page as is. It uses the response from the server to know if the upload was successful.
To see this in action:
Navigate to your page
Open up your favourite browser dev tools; (in firefox press CTRL+SHIFT+K)
Select the network tab
Drag your csv into the dropzone pane and note that the request shows in the dev tools network table
Here is a screen shot from my browser. I copied your code as is from your question.
To actually see the rendered complete.html you will need to add another flask endpoint and have a way to navigate to that.
For example:
in upload1.html add:
Click here when you have finished uploading
in init.py change and add:
def upload():
...
# you do not need to read_csv in upload()
#upload the file
#df = pd.read_csv(destination)
#table += df.to_html()
return "OK"
# simply returning HTTP 200 is enough for dropzone to treat it as successful
# return render_template('complete.html', table=table)
# add the new upload_complete endpoint
# this is for example only, it is not suitable for production use
#app.route('/upload-complete')
def upload_complete():
target = os.path.join(APP_ROOT, 'uploads/')
table=""
for file_name in os.listdir(target):
df = pd.read_csv(file_name)
table += df.to_html()
return render_template('complete.html', table=table)
If you are using Flask-Dropzone then:
{{ dropzone.config(redirect_url=url_for('endpoint',foo=bar)) }}

Problems loading JSON code in Python

I've been tyring to figure out how to load JSON objects in Python.
I'm able to send a JSON string to the server, but there it fails.
This is what I'm sending through a websocket with JavaScript:
ws.send('{"test":"test"}');
The server receives it without a problem, but can't validate it:
{"test":"test"}
This is not a JSON object!
Which comes forth from this code:
try:
data = data[:-1]
json.loads(data)
except ValueError:
print 'This is not a JSON object!'
else:
print ('JSON found!')
The data = data[:-1] is there to strip the delimiter sent through the websocket.
import traceback
try:
d = json.loads(data[data.index('{'):-1])
except:
traceback.print_exc()
else:
print(d)
This way only the dictionary part of the data-string is parsed to json.loads().

Categories

Resources