how to assign a javascript function return value to the variable in python?

Question

html code:

<h1>Uploading a photo.</h1>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script type="text/javascript">
        var p;
        var canvas = document.createElement("canvas");
        var img1=document.createElement("img");

        function converttobyte()
        {
            p=document.getElementById("file").value;
            img1.setAttribute('src', p);
            canvas.width = img1.width;
            canvas.height = img1.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img1, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            alert("from getbase64 function"+dataURL );
            return dataURL;
        }
    </script>

    <form action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                                   enctype="multipart/form-data">
        <input type="file" id="file" name=""><br>
        <input type="submit" value="Upload" onclick="converttobyte">
    </form>

Python code:

def UploadFile(request):
  if request.method == 'POST':
      converttobyte = request.GET['converttobyte'].decode("base64")
      #file = request.FILES['avatar']
      default_storage.save("%s"%(converttobyte), ContentFile(converttobyte.read()))
      return HttpResponse("File uploaded successfully")
  else:
      return HttpResponse("please upload a file")

what should be a statement that should be added after if request.method== 'post' in order to accept the the function return value in python script.

Please help me. Thanks in advance

Answer 1

Inside your form creates a hidden variable,

<form action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                                   enctype="multipart/form-data">

        <input type="hidden" id="url" name="url" value="">  
        <input type="file" id="file" name=""><br>
        <input type="submit" value="Upload" onclick="converttobyte">
</form>

Instead of returning the value from java script assign that value to the hidden variable,

function convert_to_byte()
        {
            p=document.getElementById("file").value;
            img1.setAttribute('src', p);
            canvas.width = img1.width;
            canvas.height = img1.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img1, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            alert("from getbase64 function"+dataURL );
            document.getElementById("url").value = dataURL;
        }

Then after submit you can use the below code to get the value in python,

if request.method == 'POST':
    url_value = request.POST['url']

Answer 2

One way to solve your problem is :

1. Create a hidden field as follows

    <input type="hidden" id="hide" name="URL" value=""> 

2. In the javascript function, rather than returning the value, set it for the hidden field

    document.getElementById("hide").value = dataURL; 

3. Once the form is submitted, the hidden value goes with it. Access the field using request.GET['URL'] in python code

Hope this solves the problem.

Answer 3

A few problems with your code.

Shouldn't you be calling the method like onclick="converttobyte()" instead ?

In the converttobyte() method you are simply returning the dataURL when the form is submitted but how is that value passed to the POST request ?

You'd need to pass the value with the POST request. You can use a hidden field to achieve this. Try something like this:

Javascript:

<h1>Uploading a photo.</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
    var p;
    var canvas = document.createElement("canvas");
    var img1=document.createElement("img");

    function converttobyte()
    {
        p=document.getElementById("file").value;
        img1.setAttribute('src', p);
        canvas.width = img1.width;
        canvas.height = img1.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img1, 0, 0);
        var dataURL = canvas.toDataURL("image/png");
        alert("from getbase64 function"+dataURL );

        /**Set the value of the raw_bytes input field*/
        var form = document.getElementById('uploadForm');
        form.raw_bytes.value = dataURL;
    }
</script>

<form id="uploadForm" action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                               enctype="multipart/form-data">
    <input type="file" id="file" name=""><br>
    <input type="hidden" name="raw_bytes" id="raw_bytes" />
    <input type="submit" value="Upload" onclick="converttobyte()">
</form>

Django View:

def UploadFile(request):
  if request.method == 'POST':
      raw_bytes = request.POST['raw_bytes'].decode("base64")