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

Sakeer · Accepted Answer · 2014-01-28 12:44:40Z

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']

score 0 · Accepted Answer · 2014-01-28 12:31:09Z

0

One way to solve your problem is :

Create a hidden field as follows

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

In the javascript function, rather than returning the value, set it for the hidden field
```
document.getElementById("hide").value = dataURL;
```
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.

edited Jan 28, 2014 at 12:31

answered Jan 28, 2014 at 12:18

user2440647

3 Comments

prashanth Over a year ago

Thanks for the response I have tried it but once i submit the form am getting Exception Type: MultiValueDictKeyError Exception Value: "'URL'"

user2440647 Over a year ago

Try using, request.POST.get('URL', False) in the python code. This is a way to get around the default values, in case they are not provided

prashanth Over a year ago

Hi mayankTUM I have tried in that wayy too but first of all the image file is not getting converted to dataurl in the default storage it is showing a text file which is empty......Please help me.

Amyth · Accepted Answer · 2014-01-28 12:41:42Z

0

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")

edited Jan 28, 2014 at 12:41

answered Jan 28, 2014 at 12:34

Amyth

33k28 gold badges97 silver badges137 bronze badges

3 Comments

prashanth Over a year ago

Am very thankful for your response bro but am getting getting Exception Type: MultiValueDictKeyError Exception Value: "'raw_bytes'"

Amyth Over a year ago

what's the output of request.POST ?

prashanth Over a year ago

The image is not getting converted to the dataurl in the alert box the empty string is getting appended to "from getbase64 function"..

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related