Insert a variable in javascript POST

Question

I have a script to upload the photo shoot from the webcam. The image can properly send it, but I need to send the file savecam.php also a given, it would be the user ID.

<?php echo Auth::user()->id ?>

While, the part of code is this:

    // Upload image to sever 
    document.getElementById("upload").addEventListener("click", function(){
        var dataUrl = canvas.toDataURL();
        $.ajax({
          type: "POST",
          url: "camsave.php",
          data: { 
             photo: dataUrl
          }
        }).done(function(msg) {
            console.log('saved');
        });
    });
}, false);

I should add, for example,

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                 userID:  // <-- HERE ??
              }
            }).done(function(msg) {
                console.log('saved');
            });
        });
    }, false);
</script>

********* EDIT **********

<div class="content">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button id="snap">Capture</button>
    <button type="reset" id="new">New</button>
    <button id="upload">Upload</button>
    <div id="userId" display="hidden" value="<?php echo Auth::user()->id ?>"></div>
</div>

<script>
            // Put event listeners into place
            window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                image_format= "jpg",
                jpeg_quality= 95,
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            // Trigger photo take
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 640, 480);
                // Littel effects
                $('#video').fadeOut('slow');
                $('#canvas').fadeIn('slow');
                $('#snap').hide();
                $('#new').show();
                $('#upload').show();
            });

            // Capture New Photo
            document.getElementById("new").addEventListener("click", function() {
                $('#video').fadeIn('slow');
                $('#canvas').fadeOut('slow');
                $('#snap').show();
                $('#new').hide();
                $('#upload').hide();
            });

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value'); //get the value of the the
            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);
</script>

I also tried this, but it seems that it is enough to change the part of javascript and you break something, in fact, no longer shows me the message of acceptance of the webcam.

Answer 1

Try this

var dataUrl = canvas.toDataURL();
post_data = {

      photo: dataUrl,
      userID:  HERE
};
 $.ajax({
     type: "POST",
     url: "camsave.php",
     data: post_data
    }).done(function(msg) {
        console.log('saved');
    });

Answer 2

If you do something like this, it should work, but it requires you knowing the user id before you submit the form:

<div id="userId" display="hidden" value="<?php echo "your user id" ?>"></div>

So you would hide the user id on the page, and then pull it when you send the request.

Then you can do:

 document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value');                           

            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        //you have an extra "})" here, so remove it
        }, false);

Here is a JSFIDDLE that shows it working, as much as it can: https://jsfiddle.net/rq0qnc2y/5/

Answer 3

If you run the code below you can clearly see that you can inject that value into the ajax call. you can test the code using http://phpfiddle.org/

<?php

        class User
        {
            public $id = 1234;

            public function __get($name){
                return this;
            }
        }

        class Auth
        {
            public static function user(){
                return new User();
            }
        }


        echo Auth::user()->id;




        ?>
        <html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            </head> 
            <body>
                <button id ="upload" width="100" height="100">click me</button>

                <script>
                document.getElementById("upload").addEventListener("click", function(){
                //var dataUrl = canvas.toDataURL();
                var dataUrl = "weeeh";
                $.ajax({
                  type: "POST",
                  url: "camsave.php",
                  data: { 
                      photo: dataUrl,
                     userId: <?php echo Auth::user()->id; ?>
                  }
                }).done(function(msg) {
                    console.log('saved');
                });
                });

                </script>
            </body>
        </html>